How to Add Extra Settings to Default Customizer Sections in WordPress

WordPress has a number of default Customizer panels that are in core and applied to all themes – these include Menu and Widgets as well as Site Identity and Static Front Page.

panel-default-customizer

 

 

Once you add_theme_supports in your themes function.php file for custom-header and custom-background you get three more panels; Colors, Header Image and Background Image.

panel-default-customizer-theme-support

Where are these panels in WordPress core

You will find reference to the Customizer panels in WordPress core at /wp-includes/class-wp-customize-manager.php

Here they are all extracted from that code and referred to as Sections, add_section, these sections form what is part of the WP Customize Manager which is PHP object oriented code and they contain settings and controls.

<?php
//Extracted Default Panel Sections from /wp-includes/class-wp-customize-manager.php
$this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
'title' => $this->theme()->display( 'Name' ),
'capability' => 'switch_themes',
'priority' => 0,
) ) );
$this->add_section( 'title_tagline', array(
'title' => __( 'Site Identity' ),
'priority' => 20,
) );
$this->add_section( 'colors', array(
'title' => __( 'Colors' ),
'priority' => 40,
) );
$this->add_section( 'header_image', array(
'title' => __( 'Header Image' ),
'theme_supports' => 'custom-header',
'priority' => 60,
) );
$this->add_section( 'background_image', array(
'title' => __( 'Background Image' ),
'theme_supports' => 'custom-background',
'priority' => 80,
) );
// Replicate behavior from options-reading.php and hide front page options if there are no pages
if ( get_pages() ) {
$this->add_section( 'static_front_page', array(
'title' => __( 'Static Front Page' ),
// 'theme_supports' => 'static-front-page',
'priority' => 120,
'description' => __( 'Your theme supports a static front page.' ),
) );
view raw panels.php hosted with ❤ by GitHub

Above we can see the section ID, title string and priority number which alters the whereabouts in the order they appear. So for example if you wanted to add a setting and control into the Site Identity section you would need to use the ‘title_tagline‘ id for the section value, more on this further down.

Extending the Customizer

WordPress gives us an action that allows extension to the customizer known as customize_register, it allows us to register further settings and make new instances of the $wp_customize class, this is used like…

add_action('customize_register','mytheme_customizer_options');

function mytheme_customizer_options( $wp_customize ) {

//code goes here

}

So we set the code and hook it into the customize_register action. For the code we need to as a minimum,  define the setting and the control, the setting is the name of the thing we want and an array of settings to go with it such as default values and any functions we need to run it through for sanitization. The control is also a range of values that allow the name of the control to be displayed, what setting and section it belongs to and what type it is such as text, textarea, select element with options, it can also be a color or an image.

For a full list of arguments that can be used with these methods, check these out add_setting and add_control.

Here’s how you would add an accent color setting to style certain parts of a theme and add that into the Customizer under the Colors section which seems like a logical place.

background-colors-customizer

So in our themes function.php

<?php
add_action('customize_register','mytheme_customizer_options');
/*
* Add in our custom Accent Color setting and control to be used in the Customizer in the Colors section
*
*/
function mytheme_customizer_options( $wp_customize ) {
$wp_customize->add_setting(
'mytheme_accent_color', //give it an ID
array(
'default' => '#333333', // Give it a default
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'mytheme_custom_accent_color', //give it an ID
array(
'label' => __( 'Accent Color', 'mythemename' ), //set the label to appear in the Customizer
'section' => 'colors', //select the section for it to appear under
'settings' => 'mytheme_accent_color' //pick the setting it applies to
)
)
);
}

And then we have…

background-colors-customizer-accent

Applying the Accent Color

So now we can select a new color but we need to output it and add our CSS selectors that will use it, this is where you can output via wp_head or add_inline_style CSS.

The actual value stored in the database is the add_setting id, in this case mytheme_accent_color and the value is retrieved from the database with the get_theme_mod() function.

<?php
add_action( 'wp_head', 'mytheme_customize_css' );
/*
* Output our custom Accent Color setting CSS Style
*
*/
function mytheme_customize_css() {
?>
<style type="text/css">
.site-header { background-color:<?php echo get_theme_mod( 'mytheme_accent_color', '#333333' ); // add in your add_settings ID and default value ?>; }
</style>
<?php
}

So above we are adding the inline CSS to the WordPress head and echoing out get_theme_mod( mytheme_accent_color, #333333 ); the #333333 is the default we set but will be overridden by a newly selected value from the Customizer, to extend the accent color to other CSS selectors just add them in like regular CSS and apply the PHP code where you would the normal color value.

Applying the Accent Color with wp_add_inline_style

The more efficient way to add the color is to utilise  wp_add_inline_style which loads the style immediately after the main style sheet, I have discussed more about this in some other posts, here on adding inline styles to themes and plugins and here on adding via Customizer widget.

<?php
add_action( 'wp_enqueue_scripts', 'mytheme_customizer_css' );
/**
* Output CSS for background image with wp_add_inline_style
*/
function mytheme_customizer_css() {
wp_enqueue_style( 'jeniscores-style', get_stylesheet_directory_uri() . '/style.css' ); //Enqueue your main stylesheet
$handle = 'jeniscores-style'; // Swap in your CSS Stylesheet ID
//$css = '';
$accent_color = get_theme_mod( 'mytheme_accent_color' ); // Assigning it to a variable to keep the markup clean.
$css = ( $accent_color !== '') ? sprintf('
.site-header{
background-color : %s;
}
', $accent_color ) : '';
if ( $css ) {
wp_add_inline_style( $handle , $css );
}
}

So there you have it, you can build many custom controls into the Customizer making it easier for end users with less technical ability to change content and design sitewide.

Leave a Comment





%d bloggers like this: