How to Add Customizer Setting in Child Theme

by

I would like to add an option to the Customizer of my Child Theme, but I am having some trouble implementing it. I am pretty sure my problem is connected to the name of the arguments I am calling, but I’m not sure, so if you see something else, please do not hesitate to tell me what you think.

What I suspect is wrong:

  1. I am unsure what arguments in my functions.php should have child theme’s name (e.g. child_theme_name/ tesseract-child), and the parent theme’s title (e.g. parent_theme_name/tesseract) . Normally I would assume I should always use the child theme’s name, but the declaration for the panels the Parent theme’s customizer.php file includes the Parent theme’s name (tesseract_footer_options), and I’m unsure if WordPress modifies that name when using child themes. For example, should the first argument in add_section in a Child theme’s be parent_theme_name_footer_options or child_theme_name_footer_options

  2. If I am supposed to use a child theme’s name, I am confused how to. When I try to name the function with a reference to the child theme’s name (e.g. tesseract-child_options), which includes hyphens, I get an error. So, I don’t think php likes to have functions that are named with hyphens, and in fact I have read that this php doesn’t allow hyphen in function names. Another clue that hyphens are bad: not only did the hyphens from the child theme name cause a crash, it caused my editor (sublime text) to markup the code strangely. To test if hyphens were the problem, I changed the name of the function to tesseract_child_options, using all underscores, but that seems wrong to me, because technically the theme’s name is tesseract-child with a hyphen, not tesseract_child with an underscore.

The Code

This is the declaration of the panel in the Parent Theme’s customizer.php file:

$wp_customize->add_panel( 'tesseract_footer_options', array(

'priority'       => 5,

'capability'     => 'edit_theme_options',

'title'          => 'Footer Options',

//'description'  => ''

) );

This is the the code I am using in my Child Theme’s function.php file to try to add a section to that Options Panel:

add_action( 'customize_register' , 'tesseract_child_options' );

function tesseract_child_options( $wp_customize ) {

$wp_customize->add_section( 
    'tesseract_footer_options', 
    array(
        'title'       => __( 'Reblog Options', 'tesseract' ),
        'priority'    => 100,
        'capability'  => 'edit_theme_options',
        'description' => __('Change Reblog Options Here.', 'tesseract'), 
    ) 
);


$wp_customize->add_setting( 'number_of_reblogs',
    array(
        'default' => '3'
    )
);  

$wp_customize->add_control( new WP_Customize_Control( 
    $wp_customize, 
    'reblog_number_control',
    array(
        'label'    => __( 'Number of Reblogs', 'tesseract-child' ), 
        'section'  => 'tesseract_footer_options',
        'settings' => 'reblog_number',
        'type'     => 'text',
        'priority' => 10,
    ) 
));

}

Any help would be greatly appreciated! Thanks!

UPDATE REGARDING PROSTI’S ANSWER:

@Prosti answered the question, but I just want to clarify what was wrong for anyone who is trying to figure out how to do this:

  1. The name of the entire function called by the action customize_register is arbitrary, you can name it anything you want, as long as you don’t include hyphens. Note that this function name does not have to relate to the parent theme’s name or the child theme’s name in any way. To illustrate this, in my working example (shown below), I changed the function name I used in my initial question from tesseract_child_options to childtheme_customize_register. Please note that while you don’t have to reference the child theme or parent theme’s name in this function, it is nonetheless good practice to, but just for the sake of legibility, not functionality.

  2. The name of the section you are creating (the first argument in function add_section) is arbitrary, you can name it anything you want. That is a tag that WP will use for internal passing of the variable. The text you include int he second argument of add_section will determine what text appears when you first land on the root menu of the customizer (the first menu that appears). Again, good practice dictates that for legibility purposes use a name connected to the theme.

  3. Inside the add_section, and add_control functions, all of the two argument statements I used (e.g. title, description, and label) needed to have the exact name of the child theme as the second argument. If that child theme’s name has hyphens (as was the case with mine, e.g. tesseract-child), this second argument should also have hyphens.

  4. The priority of the section determined where (i.e how high or low) the section I created fell inside of the options list. The footer was 4th section in the parent them and it had a priority of 5. If I set the priority inside of of add_section, to have a priority of 4 the option came above the footer option button, if I set it to 6, it fell below it.

Example of Working Code

 
add_action( 'customize_register', 'childtheme_customize_register'); //second argument is arbitrary, but cannot have hyphens because php does not allow them in function names.



function childtheme_customize_register( $wp_customize ) {

$wp_customize->add_section( 
    'tesseract_reblog_options', 
    array(
        'title'       => __( 'Reblog Options', 'tesseract-child' ), //2nd arg matches child theme name 
        'priority'    => 6, // put the section below the Footer options on the list
        'capability'  => 'edit_theme_options',
        'description' => __('Change Reblog Options Here.', 'tesseract-child'), //2nd arg matches child theme name 
    ) 
);


$wp_customize->add_setting( 'number_of_reblogs',
    array(
        'default' => '3'
    )
);  

$wp_customize->add_control( 'setting_id', array(
  'label'    => __( 'Number of Reblogs', 'tesseract-child' ), //2nd arg matches child theme name
    'section'  => 'tesseract_reblog_options',
    'settings' => 'number_of_reblogs',
    'type'     => 'text',
    'priority' => 6
) );
}

1
1

OK, check out the theme developer handbook.

$wp_customize->add_control( 'reblog_number_control', array(
  'label'    => __( 'Number of Reblogs', 'tesseract-child' ), 
    'section'  => 'tesseract_footer_options',
    'settings' => 'number_of_reblogs',
    'type'     => 'text',
    'priority' => 10
) );

Since you are in the child theme

'title'       => __( 'Reblog Options', 'tesseract' ),

shoudl be

'title'       => __( 'Reblog Options', 'tesseract-child' ),

In other words, your setting, control and section names need to match in add_control, add_section, add_setting.

Leave a Comment