WordPress Theme Dev Tip – Dynamic Stylesheets

WordPressA dynamic stylesheet using php is a powerful thing, when accompanied by a user options page it can really make a theme. I’ve recently done this to my Techozoic theme, and I’m going to share how this works and some time saving tips.

First you’ll want some way of letting the theme user choose what will change in the stylesheet, I explain how to do this with a theme options framework here. After you’ve got all the options set the way you want you need some way of getting those into your theme. At first I was just using <style></style> tags in the header of the theme, while this works it just isn’t an efficient way of writing a theme. What I wanted to do was have an external file that changed with the options but that could also be cached by the web browser, to improve performance, save bandwidth and overall have a better written theme.

Now if your using a framework similar to mine or your using mine then you know you have to pull some info from the WordPress database to fill in your variables from your option page. This posed the biggest problem because since this was an external page none of the WordPress functions would work. To get around this in the first version I just loaded the wp-config.php and wp-load.php files in the top of the file. This is bad practice because WordPress site owners can move these files around now and there is now way to know where to load these from. So I spotted the solution from another theme developer. Making an array of all the option values then using php GET variable on the external stylesheet. Now onto the actual code.

First this is the code that my framework uses to pull the options from the WordPress database.

<?php 
global $options;
foreach ($options as $value) {
	if($value['type']!="checkbox" and $value['type']!="multiselect"){
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { 
		$$value['id'] = get_settings( $value['id'] ); }
	}else{
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = explode(",",$value['std']); } else { 
		$$value['id'] = explode(",",get_settings( $value['id'] )); }
	}
} ?>

I just modified it to add all the values to another variable seperated by a |.

<?php 
global $options;
foreach ($options as $value) {
	if($value['type']!="checkbox" and $value['type']!="multiselect"){
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { 
		$$value['id'] = get_settings( $value['id'] ); }
	}else{
		if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = explode(",",$value['std']); } else { 
		$$value['id'] = explode(",",get_settings( $value['id'] )); }
	}
$css .= $$value['id']."|"; } 
$css = urlencode($css);
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory') ?>/style.php?css=<?php echo $css;?>"/>

So now the variable $css now holds all the values of the options set by the theme user. Then for the external stylesheet it should be named whatever you like except instead of a .css extension give it a .php extension so the php processing engine of the web server will know it has php in it. Then the link tag gives the path to the style.php file but also notice it appends the?css=<?php echo $css;?> this actually sends all the options to the dynamic stylesheet called style.php. Then you’ll just need to add this to the top of the style.php file.

<?php 
header('Content-type: text/css');   
header("Cache-Control: must-revalidate"); 
$offset = 72000 ; 
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; 
header($ExpStr);
$css = $_GET["css"];
$css = urldecode($css);
$s = explode("|", $css);

This tells the web browser to process the output of this file as plain text and use a stylesheet instructions. This also sets up the caching that was important to me. Then it gets the value of $css which was passed to the style.php file when it was called in the header.php of the theme. After that it decodes it and then explodes it into an array. Now to access your option values you’ll just use variables like this.

$s[0]
$s[1]

It’s important to know the order your options will be added to the array so you can call the right value when needed, also keep in mind that arrays start at 0 so the first value will not be 1. For an example you can download my Techozoic theme and look in the controlpanel.php for the options framework then in the header.php for the code to pull the options into the array then in the style.php file itself to see how to use the variables in the stylesheet. In my theme however since I already had most of the variables already named I just assigned the value of the array to the different variables I already had setup. It makes it easier in the long run I think because you can give more descriptive names to make everything more readable and easier to understand.

About Jeremy Clark

Small town IT worker with interests in all things technological and technical. Biggest interests are in web development especially the WordPress publishing platform and the community supporting it. Currently developing and maintain the free WordPress theme Techozoic. I'm also always available for hire.
This entry was posted in tips, wordpress and tagged , , . Bookmark the permalink.

6 Responses to "WordPress Theme Dev Tip – Dynamic Stylesheets"

Leave a reply

Comments will be sent to the moderation queue.