Skinning your site

After being asked this question so many times, I finally made a tutorial for skinning your site with PHP. You need soem basic knowledge of PHP for skinning, please read the PHP includes tutorial if you dont know how to do that, before you start reading this one. Any questions regarding this tutorial should be asked here.

Break your page

Make 2 or 3 layouts (as many skins as you want, you can add more later anytime you want) code them like you code every layout you make. Now, break the coding of each layout into 3 parts for skinning, just like you break them in 2 parts, header.php and footer.php, you now have to make another part and call it anything for now lets call it body.php this is the middle part, the part of coding which is NOT common for all pages, the main content part, that is, the part which has the main content of page. Remember from reading the PHP include tutorial, header.php is the part which is common in all pages, its the beginning of your layout coding, body.php will be the main content and footer.php will be the rest of part towards end of coding which is also common in all pages, it may include your navigation...and the copyright notice, or it may have only this

</body>
</html>

This depends on te way you break the coding. My header.php have the beginning of my layout coding (including, the top image, the css file link, the beginning of tables or div position of my main content etc. The body.php for pages have the main content of that page, and my footer.php has the navigation, table closing tags, the copyright notice and the body and html closing tags.

Cookiecheck

This is the part, which most of us find difficult to understand, I did too. Well, read it twice, its not that hard. Open your text editting program (I use notepad). Start a new document and copy & paste the following code there:

<?

$total_skins = 4;
$default_skin = 2;

if (isset($_REQUEST['newskin'])) {
$newskin=(int)$_REQUEST['newskin'];
if ( ($newskin<1) OR ($newskin>$total_skins) )
$newskin=$default_skin;
} elseif (isset($_REQUEST['skin'])) {
$newskin=(int)$skin;
if ( ($skin<1) OR ($skin>$total_skins) )
$newskin=$default_skin;
} else $newskin=$default_skin;

$skin=$newskin;
setcookie ('skin', "", time() - 3600);
setcookie('skin',$newskin,time()+(86400*365),'/');
setcookie('skin',$newskin,time()+(86400*365),'/','.BLAH.COM');
$skin=$newskin;

$headervar = "/home/USER/public_html/skins/$newskin/header";
$footervar = "/home/USER/public_html/skins/$newskin/footer";
$extension = ".php";
?>


I know, that looked scary lol! Just copy and paste it, you have to change the variables shown in capital letters, the number of skins, the default skin (look towards top of the code), the path which says BLAH.COM, change it to your own domain name, if you are hosted, just add your subdomain in front of it (example: bunnyhop.blah.com or blah.com/bunnyhop) if your subdomain is bunnyhop that is change the USER to the username, ask your host if you are hosted. Remeber do not take the . (small dot) off from in front of the domain name and dont put a trailing slash (the slash in end..i.e: don't put your path like this, blah.com/). Save this file as cookiecheck.php.


What does the cookiecheck.php file do?
When someone visits your site and chooses a skin, lets say Skin 1 and then leaves the site, the next time he visits it, Skin 1 will be made his default skin (if he has not cleared his cookies ofcourse). The first time anyone visits your site, the skin you made default skin in cookiecheck.php file will be their default skin.

The pages

Open the body.php file you made, right on the top (before any code) add this line:

<? include("/home/USER/public_html/skins/cookiecheck.php");?>


Change USER with the username, if you are hosted, ask yuor host for the username..also change the path accordingly (example: /home/USER/public_html/bunnyhop/skins/cookiecheck.php) if your subdomain is bunnyhop that is.
Now copy & paste the code below in body.php right after the above code:

<? include($headervar.$extension); ?>


After these two codes comes the real content of page..for example your b2/wordpress/anything template code in index.php. In the end, add the below code to body.php:

<? include($footervar.$extension); ?>


Remember, all these codes should be in this order only:
cookiecheck code
header code
page content
footer code

save body.php. The body.php is actually nothing, Its something I prefer having, you wont upload it to the server, you save it on your computer, everytime you make a new page, open it change the content part and save the page somewhere else. So boy.php acts as a template for making new pages easily once you have skinned your site. Anyway, open it, in the content part.. if you are using a blogging tool then this is the place where you put the template (of B2/wordpress/cutenews/greymatter etc.), put the content there and save as index.php.


Everytime you make a new page, just open body.php (which you saved on computer) edit the content part and save it as page.php (page=name of page) Upload it to server. Its not required though, like I said, its a template for making new pages.

On the server

Some people like to use a file called index2.php when they skin the site, I don't use it, because I don't liek it and besides I never understood how to..lol! Its not required either, its just a page which opens everytime the visitor changes his skin on your site, saying "you have now switched to skin "this" browse ahead if you like it, or go back to pick another one"...I think thats pointless, the visitors know they switched skins so yeah... I don't use index2.php.


Connect to FTP, on your server make a folder called skins. Upload the cookiecheck.php in that folder. Now, lets say you have 3 skins, inside the skins folder, make 3 new folders names 1, 2 & 3. Upload the header.php and footer.php (if needed, the css files, images etc. too) of each layout u made in their respective folder.

Come to the root directory, that is, the main directory of your subdomain or domain (where you put the index.html or index.php files when your site was not skinned). Upload the index.php there. Now go to your site: http://blah.com/index.php
If you see the default skin of your site (the one you made default in the cookiecheck.php file) showing fine, then you did everything right! (however, I don't think anyone can do it right at once lol! not me atleast) , if you see some errors the first time, don't worry, try again. Read the tutorial twice or thrice if needed. If everything was right, you can change your skins now! To change the skins use this tag:

<a href="?newskin=1">Skin 1</a>
<a href="?newskin=2">Skin 2</a>
<a href="?newskin=3">Skin 3</a>
<a href="?newskin=4">Skin 4</a>


Change the skin number (newskin=1) to 2, 3 etc. and put those links on your navigation everytime you add a new skin.
You have to change the total number of skins in cookiecheck.php everytime you add a new skin.


Thats all you are done! Now go and do a little dance.


Note: Seriously, skinning is not easy, some people get it to work at once while most of us need to try it like 2-3 times, I myself tried skining atleast 6 times before I actually got it to work. Don't lose hope and keep trying. Try reading the tutorial properly again. Check your cookiecheck.php the codes in your index.php and everything else again. If it still does nto work, you can ask questions here. I will try my best to help you. Good luck!


« Back