Adding Your Own Custom Color Settings

If you find that the extra custom color settings the plugin provides on the Theme Options page don’t allow you to modify the colors you want to change, one of the ways to solve that problem is to add your own color settings using the moz_theme_custom_colors filter.

To do this, you need to know a little about PHP code (though not too much) and you need to find a place to put the code. For themes, that is typically in the functions.php file in the theme directory, but be careful of doing that with the Twenty Eleven theme since when you update WordPress next time, your changes to functions.php will probably be overwritten. Therefore it is better to either create a child theme or put it in a separate file and add a one line include_once statement for it in Twenty Eleven’s functions.php, which can easily be added back if it is overwritten.

The Theme Extensions plugin stores all the information about the custom color settings in a single array, and if you add your own filter to your blog’s code, you get a chance to add to it and/or modify it before it is used.

Each item in the array is a separate color setting, with the key being the name of the setting, and the value being an array of data fields that defines how the setting is used. The fields are as follows:

• title: the title of the color setting to be displayed on the Theme Options page.
• styles: an array of CSS selectors and property names in the form of array($property, $selectors). The property names are the array keys and the selectors are the values in the array (which seems a little backwards, but you can only set one property per entry and you can specify multiple selectors by separating them with commas, just as you do in a CSS stylesheet).
• defaults: an array of default values — one entry per color scheme. The names of the color schemes are the array keys with the default values being the values. The values should always be in hexadecimal format (e.g. #56f7dd). Currently there are only two default schemes, light and dark, and if you are going to add your own color settings you will need to provide the values used by (or are consistent with) the Light and Dark color schemes.

Here is an example of the above settings. It is from the default array used by the plugin:

array(...
   'menu_highlight_color' => array(
      'title' => 'Menu Highlight Color',
      'styles' => array(
         'background' => '#access li:hover > a, #access a:focus, #access ul ul *:hover > a',
         'border-bottom-color' => '#access ul ul a'),
      'defaults' => array(
         'light' => '#383838',
         'dark' => '#505050')
  ...);

Here is a list of the existing settings defined in the array:

text_color
title_color
metadata_color
page_color
window_color
background_contrast_color
blog_title_color
blog_description_color
header_background_color
menu_background_color
menu_highlight_color
menu_text_color

You may notice that link_color is missing from this list. This is because it is part of the basic Twenty Eleven theme package and cannot be modified using this filter.

The order of the settings in the array is the order in which they are displayed (after the link_color setting). You can alter the ordering of the array’s contents to influence the order in which they are displayed.

Here is an example which adds a new color setting for changing the comment background color to the Theme Options page:

/**
 * Custom color settings filter callback. Adds a comment
 * background color setting to Theme Options.
 * @param array $settings array of color settings
 * @return array modified version of the settings array
 */
function my_custom_colors($settings) {
    $settings['my_comment_background_color'] = array(
        'title' => 'Comment Background Color',
        'styles' => array('background' => '.commentlist > li.comment'),
        'defaults' => array('light' => '#F6F6F6', 'dark' => '#090909')
    );
    return $settings;
}

// Add the custom color settings filter.
add_filter('moz_theme_custom_colors', 'my_custom_colors');

Note: it is advisable to use a prefix like “my_” with any new settings values you add, just to make sure it doesn’t overwrite any new color settings the plugin may implement in future releases.

That’s all there is to it. Once you add that code to your blog’s code base, a new color settings option will appear on the Theme Options page (as long as the Custom Colors option is enabled, of course.)

You can modify any of the existing settings by accessing the $settings array using the key names listed above, and you can even remove a color setting completely by using the unset function on a key name. For example, if you want to dispose of the blog description color setting you would add unset($settings[‘blog_description_color’]) to your filter function. Note that the removal of the setting will not be recognized until you reload the Theme Options page with the filter in effect, and click Save Changes.

If you use this filter to add new color settings, feel free to share your work with us by posting it in the Support Forum for the plugin.