Skinning (Theming) Your Website with PHP

I’ve followed countless methods for skinning/theming my website and they’ve always been flawed with cross-browser compatibility issues or have serious security issues. This little script will help you skin your website without having to rely on bad coding or constant troubleshooting.

First, create your skins folder. This will contain another folder for every skin you want. It might seem like a lot of folders if you’ve got lots of skins, but it’s tidier this way. So, if you have 4 skins, you should have a folder called skins, with 4 folders inside: 1, 2, 3 and 4. If you have 2 skins, you should have a folder called skins, with 2 folders inside: 1 and 2 (and so on).

Inside each skin folder you’ll want: header.php, footer.php, stylesheet.css and an images folder. Any image referenced inside the stylesheet will need to be placed inside the skins image folder. Any images ‘included’ with the <img /> tag, even if they only appear in one skin, will need to be stored in an images folder in the root directory — where your main skins folder is.

Now, back to where your website pages are (again, the root directory) we’ll need to set up the file that includes the correct skin header according to the skin that has been selected. You can call this page anything you like — I’ve called mine header.php because all of my pages already call header.php at the top of each document. For consistancy, I’ll be calling this file header.php from now on.

So, in header.php we’ll need to open PHP, and get two basic things out of the way: setting the path to the skins directory and our default skin. This will look like this:

<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = 1;
?>

..where “username” is your username. The path above is typical of most servers, but yours may differ. If you know you have a different absolute path, put that in instead — be sure to add the forward slash at the start and end of the path. If you’re on a subdomain, you will need your host’s username and will need to put your subdomain folder between public_html and skins, like so: “/home/username/public_html/subdomain/skins/”.

Now we need to check if there is already a skin cookie set — this will allow repeat visitors to see the skin they chose previously. If the cookie exists, we’ll also need to check if the skin chosen exists too. If both exist, we’ll set up the path to the skins header, footer and stylesheet. This will go in header.php like so:

<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = 1;

if (isset($_COOKIE['myskin']) && file_exists($pathtoskins . $_COOKIE['myskin'] . '/header.php') && file_exists($pathtoskins . $_COOKIE['myskin'] . '/footer.php')) {
   $header = $pathtoskins . $_COOKIE['myskin'] . "/header.php";
   $footer = $pathtoskins . $_COOKIE['myskin'] . "/footer.php";
   $styles = "/skins/" . $_COOKIE['myskin'] . "/stylesheet.css";
?>

If the cookie or skin doesn’t exist, we’ll want to set up the path to, *and* display our default skin (which you need to make sure does exist!) This means the final bit of coding for our header.php file which now looks like this:

<?php
$pathtoskins = "/home/username/public_html/skins/";
$defaultskin = 1;

if (isset($_COOKIE['myskin']) && file_exists($pathtoskins . $_COOKIE['myskin'] . '/header.php') && file_exists($pathtoskins . $_COOKIE['myskin'] . '/footer.php')) {
   $header = $pathtoskins . $_COOKIE['myskin'] . "/header.php";
   $footer = $pathtoskins . $_COOKIE['myskin'] . "/footer.php";
   $styles = "/skins/" . $_COOKIE['myskin'] . "/stylesheet.css";
} else {
   $header = $pathtoskins . $defaultskin . "/header.php";
   $footer = $pathtoskins . $defaultskin . "/footer.php";
   $styles = "/skins/" . $defaultskin . "/stylesheet.css";
}
include($header);
?>

Of course, we now need to set up the file that actually allows our visitors to choose the skin they want to see. I’ve called this setskin.php. This file will receive the chosen skin via the GET method; it will check to make sure the chosen skin is a number (to prevent malicious scripts being entered via the address bar); it will make sure the skin actually exists; it will set the cookie and then refresh the page immediately so visitors can see the skin they’ve chosen. The code for that is as follows:

<?php
if (isset($_GET['skin']) && is_numeric($_GET['skin']) && is_dir('/home/username/public_html/skins/' . $_GET['skin'])) {
   setcookie("myskin", $_GET['skin'], time()+(31*86400));
   header("Location: setskin.php");
}
?>

The file that we created earlier (header.php) can now be included — this will do the skin-displaying we want when we refresh. We’ll also echo the current skin number (and a message for people who’re accessing the page before they’ve chosen a skin, just in case):

<?php
if (isset($_GET['skin']) && is_numeric($_GET['skin']) && is_dir('/home/username/public_html/skins/' . $_GET['skin'])) {
   setcookie("myskin", $_GET['skin'], time()+(31*86400));
   header("Location: setskin.php");
}
include('header.php');

if (isset($_COOKIE['myskin'])) {
   echo "<p>Your skin is currently set to ".(int)$_COOKIE['myskin']."</p>";
} else {
   echo "<p>There is no skin currently set.</p>";
}
?>

Underneath all that PHP goop we can include the information on our skins, and the all important link that the visitor will need to click to change the skin. Oh, and of course, the footer, which we set the path to earlier on in header.php:

<?php
if (isset($_GET['skin']) && is_numeric($_GET['skin']) && is_dir('/home/username/public_html/skins/' . $_GET['skin'])) {
   setcookie("myskin", $_GET['skin'], time()+(31*86400));
   header("Location: setskin.php");
}
include('header.php');

if (isset($_COOKIE['myskin'])) {
   echo "<p>Your skin is currently set to ".(int)$_COOKIE['myskin']."</p>";
} else {
   echo "<p>There is no skin currently set.</p>";
}
?>

<p>
<a href="setskin.php?skin=1">Change to skin 1?</a>
<a href="setskin.php?skin=2">Change to skin 2?</a>
</p>

<?php include($footer); ?>

Now that we’ve set up the important bits, you can put the code in every one of your pages that will make the skin ‘stick’. Each page should look like this:

<?php include('header.php'); ?>
   your page content here.
<?php include($footer); ?>

Easy peasy.

VERY Important Note

In each skins header.php file, you will need to link to the stylesheet like so:
<link href="<?php echo $styles; ?>" rel="stylesheet" type="text/css" />
so the right stylesheet is referenced. If you’re on a subdomain or skinning a set of pages inside a folder other than the root directory, as well as changing the $pathtoskins variable in header.php, you’ll also need to change the $styles variable: place your subdomain name before “/skins/” so it looks like this: “/foldername/skins/“.

Here’s our directory structure, in review:

/public_html/
   /skins/
      /1/
         /images/
         header.php, footer.php & stylesheet.css
      /2/
         /images/
         header.php, footer.php & stylesheet.css
   header.php, setskin.php & your other pages

Too lazy to put together all of that code above? Here it is, all compiled, especially for you (save the files to your computer, then remove the .txt extension): header.txt, setskin.txt & example_page.txt

Add Comment Register



Speak Your Mind

*