I recently went all over the internet trying to find a tutorial for skinning a website using PHP. After patching together several tutorials and trying stuff out on my own, this is what I came up with.
What we're going to do is set up the index (or home) page so that your visitors can pick a layout via a dropdown menu, hit "change", and then be redirected to the index page. We'll do this using cookies, php, and a bit of javascript. I'd strongly recommend having basic HTML and PHP knowledge before you try this tutorital.
First off, website structure. My site is structured like this:
/subdomain.domain.com/ contains these pages:
abs.php <== for telling what the absolute path is. If you're confused about the absolute path, move this file to wherever the file whose absolute path you need is and then go there in your browser. It'll tell you the path.
header.php <== the header file, sets cookies and tells the browser where to go for other information.
index.php <== index file. pretty self-explanatory.
indexthemechange.php <== where the user will be directed after changing the theme. you have to put some special code on this page, which I'll explain later.
indexheader.php <== this is the header file for only the index.php file.
/subdomain.domain.com/themes/ contains the different themes for the website.
If you want to create abs.php (remember, that's the absolute path file, which came in handy for me many times), here is the code:
header.php will tell the browser where to go for layout information. The code for the header page is this:<?php
$path_parts = pathinfo($_SERVER['SCRIPT_FILENAME']);
echo 'Path to this file: '.$path_parts['dirname']."
\n";
?>
PLEASE NOTE: the bolded and capitalized text is what you need to change. The "3" is bolded because you will number your themes, and whichever number you put in there will be the theme number used by default--for example, when a user cleans out his or her cookies or you get a new visitor to your site.<?php
$pathtothemes = "/home/www/SUBDOMAIN.DOMAIN.com/themes/";
$defaulttheme = 3;
if (isset($_COOKIE['mytheme']) && file_exists($pathtothemes . $_COOKIE['mytheme'] . '/header.php') && file_exists($pathtothemes . $_COOKIE['mytheme'] . '/footer.php')) {
$header = $pathtothemes . $_COOKIE['mytheme'] . "/header.php";
$footer = $pathtothemes . $_COOKIE['mytheme'] . "/footer.php";
$styles = "/themes/" . $_COOKIE['mytheme'] . "/stylesheet.css";
} else {
$header = $pathtothemes . $defaulttheme . "/header.php";
$footer = $pathtothemes . $defaulttheme . "/footer.php";
$styles = "/themes/" . $defaulttheme . "/stylesheet.css";
}
include($header);
?>
Save this file as header.php in the root directory as shown above.
Next comes the index file. You can put whatever you want in here, but there is some code you must include.
At the very top of the page, before you put any other code, put this:
Note that the file included is indexheader.php, not just header.php. This tells the browser to refer back to indexheader.php for style and header information.<?php include('indexheader.php'); ?>
At the very end of the file, put this:
The footer file will be the same for your entire website.<?php include($footer); ?>
Save your index file in the root directory.
Next is indexthemechange.php. This file need only consist of the following code:
This file is fairly simple. First it tells the browser to retrieve whichever skin has been selected. That last bit of code (beginning with "meta") tells the browser to refresh, but instead of refreshing on the same page it goes to the index page. This is set up because the subdomain I was using was hosted by a company that did not allow automatic redirects. It's a bit of a cheat code, but works like a charm.<?php
if (isset($_GET['theme']) && is_numeric($_GET['theme']) && is_dir('/home/www/SUBDOMAIN.DOMAIN.com/themes/' . $_GET['theme'])) {
setcookie("mytheme", $_GET['theme'], time()+(31*86400));
header("Location: indexthemechange.php");
}
include('header.php');
if (isset($_COOKIE['mytheme'])) {
echo "
You are now using theme #{$_COOKIE['mytheme']}!</p>";
} else {
echo "
There is no theme currently set.</p>";
}
?>
<meta http-equiv="REFRESH" content="0; URL=http://SUBDOMAIN.DOMAIN.com/index.php">
<?php include($footer); ?>
And now we have indexheader.php. All you need is to include this code:
Looks familiar, doesn't it? That's because it's almost identical to the header.php file. But there's a few tiny changes, which I've bolded: instead of referring back to "header.php", it refers back to "indexheader.php". You do not need to change anything but SUBDOMAIN and DOMAIN, and the default theme if you wish. The other bolding is only there for emphasis.<?php
$pathtothemes = "/home/www/SUBDOMAIN.DOMAIN.com/themes/";
$defaulttheme = 3;
if (isset($_COOKIE['mytheme']) && file_exists($pathtothemes . $_COOKIE['mytheme'] . '/indexheader.php') && file_exists($pathtothemes . $_COOKIE['mytheme'] . '/footer.php')) {
$header = $pathtothemes . $_COOKIE['mytheme'] . "/indexheader.php";
$footer = $pathtothemes . $_COOKIE['mytheme'] . "/footer.php";
$styles = "/themes/" . $_COOKIE['mytheme'] . "/stylesheet.css";
} else {
$header = $pathtothemes . $defaulttheme . "/indexheader.php";
$footer = $pathtothemes . $defaulttheme . "/footer.php";
$styles = "/themes/" . $defaulttheme . "/stylesheet.css";
}
include($header);
?>
Now we go to where the real magic happens. From the root directory, create a folder called /themes/. For each layout, you need to have separate file. The files should be labelled numerically: 1, 2, 3, and so on.
Inside each numerically labelled file, you need to have the information for your layout. First comes the footer file. It's very simple and shouldn't change from layout to layout. You can put whatever you want here; for example:
Now instead of going from page to page and placing a horizontal rule and the copyright note on each page, I can just include it in the footer. Simple and convenient.
<hr color="#CEC5BC">
All original work © Impertinence 2006</div>
</body>
</html>
The next file you need in your layout folder is header.php. This header file will display all the information you want on the top and to the side of your layout; for example, you can put a banner and a navigation bar.
Save this file as header.php in the layout folder.<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex">
<link href="<?php echo $styles; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
put whatever you want here! Div tables, a navigation bar, etc.
</body>
</html>
indexheader.php is a little different. This will have javascript on the side, formatting a dropdown menu so the visitor can switch themes while on the index page.
Save this file in the numerically labelled /themes/ file like you did with the others.<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex">
<link href="<?php echo $styles; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
blah blah blah your nav stuff goes here blah blah blah
<p align="right"><u>Change Layout</u>
<script type="text/javascript"></p></div>
<!--
// original code by Bill Trefzger 12/12/96
function go1(){
if (****.selecter1.select1.options[****.selecter1.select1.selectedIndex].value != "none") {
location = ****.selecter1.select1.options[****.selecter1.select1.selectedIndex].value
}
}
//-->
</script>
<script type="text/javascript">
<!--
****.write('<form name="selecter1"><select name="select1" size=1>');
****.write('<option value=none>Pick a Theme');
****.write('<option value=none>--------------------');
****.write('<option value="http://SUBDOMAIN.DOMAIN.com/indexthemechange.php?theme=1">PUT A SHORT NAME HERE');
****.write('<option value="http://SUBDOMAIN.DOMAIN.com/indexthemechange.php?theme=2">PUT A SHORT NAME HERE</small>');
****.write('</select>');
****.write(' <input type="button" value="Change!" ****="go1()">');
****.write('</form>');
// end hiding contents -->
</script>
blah blah blah more content blah blah blah
</body>
</html>
You're almost done! Now all that's left is to create stylesheet.css. Again, you can put whatever you want here; but make sure you start and end with the style tag.
That's it! If you've followed the directions and I haven't left anything out, your structure should look something like this:
/subdomain/domain.com/
--abs.php
--header.php
--index.php
--indexthemechange.php
--indexheader.php
/subdomain/domain.com/themes/
--1
--2
--etc
/subdomain/domain.com/themes/1/ (applies to 2, 3, and so on as well)
--footer.php
--header.php
--inheader.php
--stylesheet.css
/subdomain/domain.com/aboutme/
/subdomain/domain.com/links/
and so on.
ONE LAST THING
In all your files that are NOT in the directory, you need to put this first:
and this last:<?php include('../header.php'); ?>
in the file. If you don't, your layouts will not work!<?php include($footer); ?>
A Few Common Questions
Q. How many themes can I have?
A. As many as you like. Just remember, you have to add them to the javascript in all the indexheader.php files or your visitors won't be able to access them.
Q. Is there an easier way to do this?
A. Probably. But I was working with limitations and minimal knowledge of PHP, so this is what I came up with!
Q. What if I just have a domain, not a subdomain?
A. Then just remove the subdomain stuff and it should work fine.
Hope this helped some of you.
dont be so lazy, do it youself 
