Time for action – adding some more options to the Theme Customizer

WordPress provides some default options in the Theme Customizer, and we can also add our own. Let's add the option for users to tweak the color of links.

  1. In functions.php, add the following code between the curly braces in the function you just defined:
    // SETTINGS
  $wp_customize->add_setting( 'content_link_color', array(
    'default' => '#088fff',
    'transport' => 'refresh',
    ) );
// CONTROLS
  $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'content_link_color', array(
    'label' => 'Content Link Color',
    'section' => 'colors',
    ) ) );
  2. Save your functions.php file.

What just happened?

We added a function to enable users to change the link colors in their site using the Theme Customizer. This is the most complex piece of PHP code we've added yet so let's have a look at how it works:

  • Firstly, it defines the settings which are available in our Theme Customizer, using the WordPress $wp_customize->add_setting function:
    • content_link_color is the ID of our setting
    • the default value is #088fff, which is the link color coded into our theme's stylesheet
    • 'transport' => 'refresh' tells WordPress to display any changes users may make in the Theme Customizer as they are making them
  • Next, it specifies the control which users will use to edit the setting, using the new WP_Customize_Color_Control function:
    • content_link_color is the ID for our setting that tells WordPress that this control will amend that setting
    • The label value is what WordPress will display in the Theme Customizer screen
    • section is the section within that screen in which WordPress will place our control, in this case, colors

Let's see what our Theme Customizer looks like now:

What just happened?

Any changes the user makes won't actually have any effect yet, because we haven't told WordPress to alter the CSS based on their modifications.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.91.44