To ensure any changes made by users actually take effect, we need to add another function telling WordPress to alter the CSS.
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'),
functions.php
file.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:
theme_customize_css()
function which defines our function's name.<style type="text/css">
which is inline CSS to be inserted in our page's <head>
section: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.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:
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:
We've just added one option to the Theme Customizer—of course you could add more. Possibilities include:
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.
For more on the Theme Customizer, see http://codex.wordpress.org/Theme_Customization_API.
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.