Coding a style changer for WordPress 2.0

I'm sure there are plugin's that take care of this function, however I decided to hardcode this right into my WordPress theme. Why? Because I don't plan to use any other themes. All style changes I make will be done through changing the CSS style sheet. I coded this so that I could work on a new style sheet offline, and when I'm finished, upload the file to my styles directory. It will then automatically show up in the drop down box on the Style Changer page.

So here is what I did. First I created a new WordPress page and called it Style Changer. On this page I put the following PHP code:

[php]
The current style is <b><?php echo $_COOKIE['raamdevstyle']; ?></b>.
<br>
<center>
<form name="stylechanger" method="post" action="https://raamdev.com/set_style.php">
<select name="style">
<?php

// get a list of all the styles in the style dir, and create a drop down list containing the styles
$d = dir('/home/raamdev/public_html/blog/styles/');
while (false !== ($file = $d->read()))
{
$selected = '';
if($file == $_COOKIE['raamdevstyle']) {$selected = 'selected';}
if($file != '.' && $file != '..')
{
// generate the drop down box
echo "<option ";
echo $selected;
echo " value="";
echo htmlspecialchars($file);
echo "">";
echo htmlspecialchars($file);
echo "</option><br />";
}
}
$d->close();
?>
</select><br /><br>
<input type="submit" name="Submit" value="Change Style">
</form>
</center>
[/php]

With WordPress 2.0, there's an "Execute page content between ?php ? as PHP." option. I checked this box so that my PHP code would be executed. If you're having problems doing this, I highly reccommend you turn off the Visual Rich Editor option in your WordPress User options. The visual rich editor does too many funky things in the background.

Next I created a file called set_style.php and added this code:

[php]
<?php
// setting new style, or just loading the page?
if (isset($_POST['style']) && $_POST['style'] != '')
{
// setting new style; make sure cookie isn't already set to this style
if ($_POST['style'] != $_COOKIE['raamdevstyle'])
{
setcookie('raamdevstyle', $_POST['style'], time()+31536000, '/', 'raamdev.com', '0');
}
}
header("Location: https://raamdev.com/index.php");
?>
[/php]

That is the file that gets executed when a user changes the style on the Style Changer page.

The last step was to add code to my theme's header.php file. This code needs to check if the cookie is already set, and if it's not, it needs to set the cookie. If the cookie is already set, it checks to make sure the style defined in that cookie exists in my style's directory. If it doesn't exist, then it sets the cookie to the default style (default.css). If the style does exist, then the style is used. See the next block of code for how setting the style is done in the HTML.

[php]
<?php
// first check if the cookie has already been set, if not, create the cookie and set it
if(!isset($_COOKIE['raamdevstyle']))
{
// set the cookie to the default style and set the cookie to expire in 1 year
setcookie('raamdevstyle', 'default.css', time()+31536000, '/', 'raamdev.com', '0');
}
// check to see if the cookie is set again
// if not, then setting the cookie failed, change $style to the default css sheet
if(!isset($_COOKIE['raamdevstyle'])) $style = 'default.css';

// the cookie was already set, or setting the cookie did not fail
else
{
// make sure the style currently set in the cookie actually exists (incase it was renamed)
// if it doesn't exist then change to the default style
$found = '0';
$d = dir('/home/raamdev/public_html/blog/styles/');
while (false !== ($file = $d->read()))
{
if($file == $_COOKIE['raamdevstyle'])
{
$style = $_COOKIE['raamdevstyle'];
$found = '1';
}
}
if ($found == '0') $_COOKIE['raamdevstyle'] = 'default.css';

$d->close();
// OK, all error checking complete. use the style sheet defined in the cookie
$style = $_COOKIE['raamdevstyle'];
}
// used in the next step (setting the page to use the style sheet defined in the cookie)
$styleroot = "https://raamdev.com/styles/";
?>
[/php]

Now that we have the name of the style stored in the $style variable, we can combine the $styleroot variable with the $style variable to get the full path to the style sheet.

[php]
<link rel="stylesheet" href="<?php echo $styleroot; ?><?php echo $style; ?>" type="text/css">
[/php]

That's it! Now I just need to upload a new style sheet to my styles directory, and it will show up in the drop down box on the Style Changer page. Once the style is changed, it's name is stored in a cookie on the user's computer and is used whenever my page is visited.

If you have any comments or suggestions, please post them!