Skinning Your Site

Skinning your website will enable the visitor to change the layout of your website whenever they want. There are several things to note before starting.

Your site must be in PHP, not HTML. If your host does not support PHP, usually free hosts like Freewebs don’t support this, then this method will not work for you because we’ll be using PHP to skin your site
You should understand PHP includes and your styles should be in a separate stylesheet, not style tags.

Making your Skins folder

Create a folder called ’skins’ in your root directory. Your themes will be placed in this folder. If you have 3 themes, then you will create 3 folders in this ’skins’ folder with all your theme’s files placed inside. These folders will be numbered, so create a new folder and call it ‘1′, inside we will be placing your first theme. If you’re going to be creating a second theme, call it ‘2′. Make sure that they’re in ordered numbers, don’t call them anything else.

Putting files in the Skins folders

Now let’s open the folder that you’ve just created called ‘1′. Create 3 pages: a header.php, footer.php and stylesheet.css. If you understand PHP includes then you’ll know what to do with these pages and what to put on them. Reading that tutorial will give you a detailed idea on what to do, but I’ll give a short tutorial on what you should be putting in each of those files.

In your header.php file you should put your header image and sidebar. To put it simply, the top half of your layout. Do not put any content here, this will just be your header and sidebar.

In your footer.php file you put your footer, if you have one. If you don’t, then just put your body and html closing tags here.

Setting a Default Skin

If you have been using PHP includes, you should have a file called header.php in your root directory. If you haven’t, then create one exactly by the name of header.php. Paste in the following code there:

<?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);
?>

Remember to edit the path to your skins folder by replacing the ‘username’ part with your FTP username. If it doesn’t work, then it’s most likely because you inserted your absolute path wrong. This tutorial will teach you how to find your absolute path.

There’s a part in that bit of code that defaultskin = 1. You can change that number to whatever you want your default skin to be, as in what you want your visitors to automatically see once they’ve visited your site if they haven’t set a skin. Usually, you’d change it to your latest layout. So if I’ve just created my 3rd skin, then I’ll change the default skin to 3.

Allowing visitors to set skins

We should create a page that allows your visitors to change the skin to their liking. Make a new page called setskin.php in your root directory. Edit that page and paste in this code:

<?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); ?>

Remember to change the directory path to your skins folder by replacing the ‘username’ part with your own. It should be the same path as the one you have inserted in your header.php if it worked out.

Including each page

We will now include all those bits of coding and your skins to all your pages. You’ll have to edit all of the pages you want the layout to appear on with the following code:

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

This skinning code was provided by Tutorialtastic and was derived from this tutorial of Jem’s.