WP Dynamic StyleSheet Switcher – stage 1

I’ve done a quick mod to my stylesheet to enable me to turn on and off css enhancements.

The concept is based on the idea that you can create your own theme by extending another theme and adding your stylesheet changes to a style.css file in the new theme folder.

The concept in action:
In the themes folder I now have a folder for my base theme: grassland and my modified theme: vGrassland. No changes have been made to grassland but in the vGrassland folder there only needs to be one file: style.css.

That stylesheet must contain all the necessary info to define the theme (Theme Name, URI, Desc. Version…) but the essential one is TEMPLATE: grassland.
Then the magic happens.

For me I wanted to use my modified theme but I’d grown attached to the original so changing back and forth would be fun.

So here’s the low down.
Point the styles to a dynamic page: style.php and in that page show or hide the style enhancements.

Here are the contents of both files.


Theme Name: vGrassland
Theme URI:http://www.spectacu.la/grassland/
Description: Based on spectacu.la/grassland but inspired by the spectacu.la site. A light, fresh, widget friendly, two column theme particularly suited to ecology and nature blogs, but suitable for a wide range of bloggers.
Author:Mod by Vid. Orig. by James R Whitehead (spectacu.la)
Author URI:http://spectacu.la/
Mod: Vid
Tags: green, brown, blue, white, light, two-columns, fixed-width, threaded-comments

Release: 2.0 	Added new features, visuals and GPL license.

TEMPLATE: grassland

@import "style.php";

Notice that it only contains one line of CSS: @import “style.php”;

The changes all happen in style.php:

Vid's Switcher.

This stylesheet is imported from style.css in the vGrassland theme.
It calls the original grassland stylesheet and set that as it's template via TEMPLATE: grassland
This stylesheet is dynamic so I can randomly add or remove style modifications each time the page is loaded.

Tested and working well in FF3.
One potential draw back is that it relies on the cached css refreshing each time. I have my cache set to 0 so it always loads the site from scratch.
Thusly I added
header("Cache-Control: no-cache");
header("Expires: -1");

To force a fresh css into the browser each time. This combo of headers is IE Friendly per: http://us.php.net/manual/en/function.header.php#88875

@import "../grassland/style.css";

/* Basic layout */
html {
    background-color:#99c2fa; /*604830*/
	background:url(http://uoregon.edu/~vid/wp-content/themes/vGrassland/images/sun.jpg) no-repeat 70% -100px transparent;

#layer1 {
    background:url(http://uoregon.edu/~vid/wp-content/themes/vGrassland/images/background.png) repeat-x center bottom transparent;

	#documentBody {
		position: relative;
		padding: 42px 20px 90px;
		width: 910px;
		background: url(http://uoregon.edu/~vid/wp-content/themes/vGrassland/images/content.gif) no-repeat center top transparent
blockquote pre {overflow-x:auto;}

I added my notes in to the file itself but the note worthy points include: Setting the content-type, cache and then showing or hiding the css itself.
Here’s the php at the top of the doc:

header("Content-type: text/css");
header("Cache-Control: no-cache");
header("Expires: -1");

Thanks to WP utilizing obstart() we can send our headers anytime.
Next we call the old stylesheet: @import “../grassland/style.css”;
and then the php to show or hide the css mods

So why “stage 1?”
Well, It seems to me it would be worth testing a few other concepts.

  • Swapping out background images in this new sub-theme.
    • Sounds simple. Increase the rand range and only die() if the num is 0. Add the images in to the body of style.php and surround it with a php switch statement, checking for that $rand value.
  • Add some user specific content to the stylesheet. ie.
    	content:"Hello echo $ip;?>";

    Or something more clever…

  • Changing between an array of themes or all the installed themes.
    • Move the template in to the included style.php (needs to be tested) then you could have your choice of styles.
  • Adding a user option to change themes on the fly.
    • Using a dropdown switcher that relys on javascript to append the stylesheet… Will not likely work with complete theme changes but changes with in a theme would work. (use the edit styles bookmarklet as a reference)
Leave a Comment