A few weeks ago I wrote about using a theme options page in Thematic to give users more control over their WordPress site. To provide styling options for the theme, such as choice of fonts, text colors, and sidebar layouts- you’ll likely want to use a dynamic stylesheet in conjunction with the theme options. So, here’s a short tutorial explaining how to do this and the source files for the child theme.

Dynamic CSS

A dynamic stylesheet uses variables to define the css properties, which are set in the theme options. When the stylesheet loads, it checks what’s set and then displays.

Jeremy Clark has a great article about dynamic stylesheets that explains how to set one up and how it works. To get it running with the Thematic Framework just takes a few extra steps, especially if you’re already using the child theme I provided.

Create the Theme Options

To start, let’s define theme options that will allow the user to set a background color and a font color. We’ll just do this with a text field allowing them to paste in the HEX code (i know we could have a color wheel or something cool, but let’s just say a hex code for simplicity). If you have the child theme I set up, you would just add the following to the options array:

49
50
51
52
53
54
55
56
57
58
59
60
61
62

    array(
    'name' => 'Background Color #',
    'desc' => 'Paste in the HEX Code',
    'id' => $my_shortname . '_background',
    'std' => 'fff',
    'type' => 'text'
  ),
    array(
    'name' => 'Text Color #',
    'desc' => 'Paste in the HEX Code',
    'id' => $my_shortname . '_color',
    'std' => '111',
    'type' => 'text'
  ),

This should give you two new options in the panel:

Create the Dynamic Stylesheet

Now that options are set, we’ll need to create the stylesheet that calls these settings. To set dynamic options and use variables you’ll need to use a .php file rather than a .css file. I’d create a file called “dynamic-css.php” for this and put it with your other theme css files.

Inside the file, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
 
header('Content-type: text/css');
 
$css = $_GET["css"];
$css = urldecode($css);
$cssoptions = explode("|", $css);
 
$background = $cssoptions[0];
$color = $cssoptions[1];
 
echo 'body {background-color:#'.$background.'; color:#'.$color.';}';
 
?>

For an explanation of how this works, see Jeremy Clark’s post about this.

To send the variables from the theme options page to the stylesheet, and to link the stylesheet from the header you’ll need to paste the following into your Thematic child theme functions file:

28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/*
 * Call Dynamic Stylesheet 
 */
 
function childtheme_dynamic_stylesheet($content) {
  $background = get_option('childtheme_background', 'fff');
  $color = get_option('childtheme_color', '111');
  $css = $background . '|' . $color;
  $content .= "\t";
  $content .= '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/css/dynamic-styles.php?css=' . $css .'" />';
    $content .= "\n\n";
 
  return $content;
}
 
add_filter('thematic_create_stylesheet', 'childtheme_dynamic_stylesheet');

I put this function inside the “admin-panel-functions.php” file I have in my child theme.

Original Look

New Options Set

Updated Look

Download the Source

I wrapped everything into an updated version of the child theme that you are welcome to use however you want. Let me know if you make any improvements.

And if you’re interested in these sort of things, follow me on twitter or subscribe to the rss feed.