Simple PHP Style-Switcher

If you want to give your visitors the option of viewing your site with several pre-defined styles that you’ve created, a simple bit of PHP is just what you’re after. Before you start, you’ll need to have some alternative stylesheets ready to go and a web host that supports PHP (hopefully, that bit goes without saying!) as your pages will need to end with the .php extension.

First, we provide some links on our ‘index.php’ page for our visitors to click.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHP Style Switcher</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<p><a href="stylechange.php?s=1">Stylesheet 1</a></p>
<p><a href="stylechange.php?s=2">Stylesheet 2</a></p>
<p><a href="stylechange.php?s=3">Stylesheet 3</a></p>
<p><a href="stylechange.php?s=4">Normal Stylesheet</a></p>
</div>
</body>
</html>

As you can see, all of these links point to a PHP script (stylechange.php which you need to create) and have a unique parameter appended (e.g. ?s=2). The parameter will then be accessed using the $_GET Superglobal by stylechange.php

Let’s have a look at stylechange.php

stylechange.php

<?php
if (isset($_GET['s'])) {
$style = (int) ($_GET['s']);
switch ($style) {
case 1:
$file = '<link rel="stylesheet" type="text/css" href="style1.css" />';
setcookie('style', $file);
break;
case 2:
$file = '<link rel="stylesheet" type="text/css" href="style2.css" />';
setcookie('style', $file);
break;
case 3:
$file = '<link rel="stylesheet" type="text/css" href="style3.css" />';
setcookie('style', $file);
break;
case 4:
$file = '';
setcookie('style');
break;
default :
$file = '';
setcookie('style');
}
$url = 'index.php';
header("Location: $url");
}
?>

It may look daunting but not when we break it down line by line:

1 2	if (isset($_GET['s'])) { $style = (int) ($_GET['s']);

The first line checks to see if the ‘s’ parameter has been set. If it has, it is typecast as an integer and assigned to the variable $style.

switch ($style) {
case 1:
$file = '<link rel="stylesheet" type="text/css" href="style1.css" />';
setcookie('style', $file);
break;
...............
}

We then use a switch statement on the variable $style. Simply put, this checks the value of $style and acts accordingly. So in the above example, if $style is equal to 1, we create a new variable ($file) and assign a string of html with a link to a stylesheet as its value. We then set a cookie on the visitor’s browser with this value for future reference.

The switch statement checks the ‘s’ parameter for all the possible ‘cases’ (1,2,3 or 4) until it finds a match. If it doesn’t find a match, it uses the ‘default’ action instead:

21
22
23

default :
$file = '';
setcookie('style');

The default action above sets the $file variable as an empty string and destroys any existing cookies with the name ‘style’.
Finally, the last two lines point the script back to index.php

25
26

$url = 'index.php';
header("Location: $url");

index.php can then print out the information stored in the cookie via the $_COOKIE Superglobal.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHP Style Switcher</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php if (isset($_COOKIE['style'])) { echo $_COOKIE['style'];} ?>
</head>
<body>
<div>
<p><a href="stylechange.php?s=1">Stylesheet 1</a></p>
<p><a href="stylechange.php?s=2">Stylesheet 2</a></p>
<p><a href="stylechange.php?s=3">Stylesheet 3</a></p>
<p><a href="stylechange.php?s=4">Normal Stylesheet</a></p>
</div>
</body>
</html>

The most important thing to remember is that this line:

<?php if (isset($_COOKIE['style'])) { echo $_COOKIE['style'];} ?>

is placed below any links to your other standard stylesheets otherwise it won’t override them with the new styles!

With this script, the user preferences will be stored in the cookie until they close their browser. You can, however, change this to whatever time span you like (1 minute, 1 year etc) by setting other parameters in the setcookie function. As ever, the best resource for PHP is php.net.

Happy Style Switching!

Category: PHP // 2 CommentsOpen my Lovebox

2 Responses to “Simple PHP Style-Switcher”

Helen - Apr 30, 2009 at 8:08 pm

oooooo! I don’t know how I overlooked this, but it’s perfect for one of my future projects

Ta fella!
ElanMan - Apr 30, 2009 at 8:33 pm

You’re very welcome my dear
Just realised I haven’t shown an example of it in action.
Shall get one uploaded asap!

RSS

ElanMan