If you look at the bottom of this page, in the footer, you’ll notice some (currently two) color bars. If you click one of the color bars, the “skin” of this site will change based on the color bar you clicked. I thought this would be a neat functionality to have, but I had a very difficult time finding pre-made scripts that would do exactly what I wanted. So, I came up with something, based partly on A List Apart’s guide. It works pretty well, is easy to configure, and is expandable to any number of styles. At some point I’m hoping to make it a little more portable (easier to configure). In the meantime, I’m learning my way around PHP, but I decided to post my style switcher in case it could benefit anyone else.

The style switcher uses cookies so that the stylesheet settings aren’t lost as the visitor navigates the site. The cookie duration can be set for a session only, meaning the next time the user visits the site, the default style is used. Alternatively, the cookie can be set for a longer duration so that the user doesn’t have to change the style on subsequent visits (this is how the cookie is set in the example).

Where you may wish to start is with a simple PHP script to set the cookie, based on input sent to it from a link or form. In the case of my site, when a user clicks one of the color bars in the footer, a variable is passed to the switcher.php script, which looks like this:

<?php
require( dirname(__FILE__) . ‘/wp-config.php’);
$style = $_GET['set'];
setcookie(‘sitestyle’, ” . $style, time() + 864000, COOKIEPATH);
wp_safe_redirect(wp_get_referer());
?>

If you aren’t using a WordPress installation, the line beginning with “require” can be removed. You’ll have to change “COOKIEPATH” to include the path and domain name, as in

setcookie(‘sitestyle’, $style, time() + 864000, ‘/’, ‘domain.tld’);

The line beginning with “wp_safe_redirect” would also be changed, maybe to something like:

header(‘Location: ‘.$_SERVER['HTTP_REFERRER']);

There are probably better ways of doing this, but you’ll want to keep in mind the general idea of redirecting back to the page the user came from. Otherwise, they won’t be able to switch the style and reliably stay on the same page.

Anyway, you may have noticed that basically any text could be passed to the switcher script and saved into a cookie. This isn’t a huge deal since there aren’t really any benefits to a user intentionally garbling their cookie. Regardless, the next script will read the contents of the cookie and decide which style to use based on the contents. If the cookie contains something that isn’t expected, the script will simply use the default style. This script can be used directly with the page on which you’re actually setting the stylesheets:

<?php

$path = “http://www.joshebben.com/wp/wp-content/themes/main/”;

if (isset($_COOKIE['sitestyle'])) {
$style = $_COOKIE['sitestyle'];
if ($style == “default”) {
$style = $path . “style.css”;
}
elseif ($style == “contrast”) {
$style = $path . “style-contrast.css”;
}
else {
$style = $path . “style.css”;
}
}
else {
$style = $path . “style.css”;
}

?>

Following the flow of the program, it first checks to see if a cookie is set called “sitestyle”. If it isn’t set (the very final ‘else’), the default style will be used. If the sitestyle cookie does exist, the script checks to see what the contents are. If the contents are something unexpected (the second to last ‘else’), again, the default style will be used. Otherwise, a style will be chosen based on the predefined contents of the cookie. You could add more elseif statements if you wanted more style possibilities. Of course, keep in mind that each style requires an independent stylesheet with this setup.

Finally, you’ll need to replace your current stylesheet tag:

<link rel=”stylesheet” type=”text/css” media=”screen” title=”User Defined Style” href=”<?php echo ($style) ?>” />

This will grab the $style variable, which was just set a moment ago when the cookie was checked.

Feel free to adapt this and use it however you want. Thanks to the guide on A List Apart for providing a base for me to work with.