Time for action – ensuring Theme Customizer changes are carried through to the CSS

To ensure any changes made by users actually take effect, we need to add another function telling WordPress to alter the CSS.

  1. In your functions.php file, below the functions you've just added, add the following lines:
    function theme_customize_css()
  {
    ?>
         <style type="text/css">
             a { color:<?php echo get_theme_mod( 'content_link_color' ); ?>; }
         </style>
    <?php
  }
add_action( 'wp_head', 'theme_customize_css'),
  2. Save your functions.php file.

What just happened?

We added a final function which tells WordPress to amend CSS based on any changes the user makes in the Theme Customizer screen. In detail, the code is as follows:

  • We start with the theme_customize_css() function which defines our function's name.
  • Inside the function's settings, we set styling using <style type="text/css"> which is inline CSS to be inserted in our page's <head> section:
  • The styling uses echo get_theme_mod( 'content_link_color' ). What this does is fetch the value of content_link_color (the setting we defined earlier) and echoes it, which means it outputs it.
  • Finally, after closing the HTML tags and PHP braces, we define an action: add_action( 'wp_head', 'theme_customize_css'). This defines an action to be run with the wp_head hook, which means WordPress will use it whenever it encounters wp_head in our page's <head> section. You may remember we added that to our theme in the Finishing off with the footer section in Chapter 3, Coding It Up. The action runs our function theme_customize_css, at this point. What this will then do is output the HTML into the <head> section of each page, generating inline CSS.

Now when our users amend the link color, it will show up on the Theme Customizer screen:

What just happened?

If they then save changes by clicking on the Save button, the changes will be reflected in the live site, as shown in the following screenshot:

What just happened?

Tip

Before continuing, we'll use the Theme Customizer to change the color back to the default CSS as it fits with our design.

Theme Customizer – the possibilities

We've just added one option to the Theme Customizer—of course you could add more. Possibilities include:

  • changing any of the colors
  • tweaking the layout
  • adding content in specific areas of the site
  • uploading images

The great thing about using the Theme Customizer is that users can see the effect of their changes before saving, which means they'll be less likely to break the site than if they tried to hack your theme files.

Note

For more on the Theme Customizer, see http://codex.wordpress.org/Theme_Customization_API.

Have a go hero – adding a theme options screen

Along with activating the Theme Customizer, you could also create a theme options screen which lets users configure a wider range of options in your theme. This involves using functions to create admin screens and menu items, as well as getting to grips with the WordPress Settings API.

Try creating a theme options screen for your theme. You can find out how to do it at http://codex.wordpress.org/Creating_Options_Pages.

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

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