Creating a PHP Styleswitcher

One of the benefits of creating a CSS-rich website is that you can change how the website looks completely, simply by creating a new stylesheet. This means that you can skin your CSS-based website using multiple stylesheets, instead of the old route of creating separate header and footer include files.

Once you’ve created your stylesheets and are ready to go, create a file called setstyle.php — this is the file that will set the all important cookie, and will also be used to display the different themes/stylesheets to your visitors. As with any PHP document, we’ll start by ‘opening’ PHP. We can also add our first bit of code — an if statement to check if our theme choice has NOT been set the in the URL:

<?php
if (!isset($_GET['s'])) {

}
?>

Of course our theme choice won’t be set yet, because we’ve not wrote the code to set it, but now’s a good time to start. Between the curly brackets of our if statement, we can set the action for the script to take if there is no choice set. This is where we want our users to pick their choice and we write that with HTML. At this point although we could use echo to display everything, it is quicker to break out of PHP to write our markup. With our choices added, this will look something like the following:

<?php
if (!isset($_GET['s'])) {
?>
	<h1>Set Your Style</h1>
	<ul>
	<li><a href="setstyle.php?s=StyleOne">style one</a></li>
	<li><a href="setstyle.php?s=StyleTwo">style two</a></li>
	<li><a href="setstyle.php?s=StyleThree">style three</a></li>
	</ul>	
<?php
	exit;
}
?>

We’ve given our visitor three choices — style one, two and three (I’ve marked them up in a list, you could show thumbnails or anything pretty). As you can see, we’re linking to setstyle.php: the file we’re working with. This is because we’ll be adding more code to the first part of the if statement that we added earlier. At this stage it is important to note that the text that comes after ‘?s=’ must match the name of the stylesheets you’ll be using. For example, if you’ve named your stylesheet MyBestTheme.css, you must link to <a href="setstyle.php?s=MyBestTheme"> ... </a> This is so we know which stylesheet to use when the user selects the desired style.

Moving on, we shall hit the next step — below the if statement. Because the if statement checks to see if $_GET[‘s’] is NOT set and we have an exit command after the markup, we can assume that for the next part that our visitor has picked their style and now wants a cookie set so they don’t have to pick it again each time they visit. First, however, we must check to see that $_GET[‘s’] is one of our themes, and that somebody hasn’t altered the URL to send malicious data to our script. This is the easy part! Because we’ve linked to our themes using the names of the .css files, we don’t have to mess around cleaning variables and suchlikes. We can simply get the script to find out if the file exists and redirect our users back to the file if it doesn’t or set the cookie if it does:

<?php
if (!isset($_GET['s'])) { 
?>
	<h1>Set Your Style</h1>
	<ul>
	<li><a href="setstyle.php?s=styleOne">style one</a></li>
	<li><a href="setstyle.php?s=styleTwo">style two</a></li>
	<li><a href="setstyle.php?s=styleThree">style three</a></li>
	</ul>	
<?php
	exit;
}
if (file_exists($_GET['s'].".css")) {
	setcookie("style", $_GET['s'], time()+(31*86400), '/');
	header("Location: setstyle.php");
} else {
	header("Location: setstyle.php");
}
?>

Our cookie is set, called “style”, and won’t expire for 31 days (31*86400 is 31 times the amount of seconds in a day).

Now that the cookie is set we can edit our website to select the stylesheet based on the user’s choice, or resort to a default if there is no cookie. Find the file/s that have your meta information in, and your link to your current stylesheet. If you’re using PHP includes to manage your website, this is probably called header.php Where your currently linking to your stylesheet (e.g. <link href="stylesheet.css" rel="stylesheet" type="text/css" />) is where we need to place the next bit of code.

Using a similar logic to our setstyle.php, we need to check to make sure that the cookie is looking for the right file. This is because cookies can be edited quite easily, and if we blindly echo or display cookie data on a page, we could end up with tons of problems. If the cookie is OK, we can link to the stylesheet, else we need to show the default one. The code for that is:

<?php
if(isset($_COOKIE['style']) && file_exists($_COOKIE['style'].".css")) {
	echo "<link href='{$_COOKIE['style']}.css' rel='stylesheet' type='text/css' />";
} else {
	echo "<link href='default.css' rel='stylesheet' type='text/css' />";
}
?>

The only thing you need to change is default.css — write in the filename for the stylesheet that you want to display by default (i.e. when no cookie is set). Save the file, upload it along with your new setstyle.php and tada: you have yourself a cookie-based PHP styleswitcher.

Speak Your Mind

*