Developing wordpress theme from scratch, I got some basics, but, as I start to make templates for changing the look of a page (like 1 or 2 or 3 columns, with or without sidebar...), an idea came to me that that it would be nice to give option in theme to easy change bootstraps 4 .container to .container-fluid.

Container div starts in header.php and ends in footer.php. How could I implement this option in theme?

  • And your question is exactly? – kero Sep 23 '18 at 11:14
  • sorry i edited question, so, I would like to know how to implement that kind of option in theme. thank you – Zoran Koprek Sep 23 '18 at 11:27
  • Okay, did you already check the Customizer API doc? I recommend the complete Theme Handbook, this specific chapter should explain how to do it – kero Sep 23 '18 at 11:47
  • 2
    nope, I did not, thank you very much, if I will have some solution I will post here :) – Zoran Koprek Sep 23 '18 at 11:49
  • Ok, I see that we can create custom panel, section and control. So if I wan't to have new menu item in customizer I have to make custom panel? And panel won't show unless it has at least one section, and at least one control? Thank you – Zoran Koprek Sep 23 '18 at 18:47

Here is possible solution that works (theme name is "zoran"):

//1. Step (Create Customizer section, setting, control)

//In functions.php include or directly put code that goes something like this:

function zoran_customize_register( $wp_customize ) {
$wp_customize->add_section( 'zoran_sekcija', array(
    'title'          => __( 'Zoran', 'zoran' ),
    'priority'       => 35,
) );
$wp_customize->add_setting( 'zoran_postavka', array(
    'default'        => 'container',
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
) );

$wp_customize->add_control('zoran_control', array(
    'label'   => 'Container',
    'section' => 'zoran_sekcija',
    'settings'   => 'zoran_postavka',
    'type' => 'radio',
    'choices' => array(
        'container' => 'Fluid',
        'container-fluid' => 'Fixed', 
) );

add_action( 'customize_register', 'zoran_customize_register' );

 //2. Step (Create javascript to manipulate class container)

 //In functions.php include or type:

function zoran_customize_js()
         div = document.getElementsByClassName("container");
         div[0].classList.toggle(<?php echo "'" . get_theme_mod('zoran_postavka', 'container') . "'"; ?>);

add_action( 'wp_footer', 'zoran_customize_js');

I think that's it. Please make suggestions for improvement.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.