A stylesheet switcher is kind of like skinning your site, except that the only thing that changes is the stylesheet; everything else stays exactly the same.
You must already have some knowledge of using “PHP Includes”.
Getting Ready
The first thing you need to do is to set up a new folder in your root directory called “styles”. The “styles” folder is where all of your different stylesheets should be placed.
When you add new stylesheets, name them “style1.css”, “style2.css”, “style3.css”, etc.
- root directory
- styles/
- style1.css
- style2.css
- style3.css
- styles/
Once you’ve done this, you can upload the “styles” folder (containing your stylesheets and any images) and move onto the next step.
Coding
First, we’ll need to make the file that will control how many styles you have, which style is the default, allow the user to change style, etc.
This file will be called “styles.php” and will be uploaded to your root directory.
Download stylesheetswitcher.txt.
You’ll only need to edit the first chunk of coding:
$path = "/home/YOURUSERNAME/public_html/styles/";
$defaultstyle = 2;
$totalstyles = 3;
- Change YOURUSERNAME to your site’s username. Since you already use includes, you should know your site’s username.
- $defaultstyle = 2 – change the number to the number of the style you want to be the default (self explanatory, really).
- $totalstyles = 3 – change this to the number of styles you have…
You will not need to edit anything else in that file.
Reupload the file now. Please. 
Open up your header.php file and add this to the top of the page (before anything else):
<?php include("/home/USERNAME/public_html/styles.php");>
Now replace the “link” to your stylesheet with this:
<link rel="stylesheet" href="/styles/style<?php print $currentstyle;?>.css" type="text/css" media="screen" />
Unless you’ve screwed up along the way (unlikely since you’re most definitely not skim reading this, are you?), everything should work perfectly.
Switching The Stylesheet
There’s a reason why “styles.php” is included into every page; the visitor can change the style with no preview page crap and they won’t lose the page they’re currently on. Woohoo!
Anyway, the link to change the style is “?switchstyle=[stylenumber]“.
Example:
<a href="?switchstyle=1">Name Of Style 1</a>
<a href="?switchstyle=2">Name Of Style 2</a>
<a href="?switchstyle=3">Name Of Style 3</a>
These links can go on any page since you’re including the file which switches the stylesheet in the file which is included into every page.
No related posts.
Tags: Design, Help, PHP, Scripts, Site, Site Stuff, Tutorial
Exellent. I haven’t tried it yet but i’m going to try it out on my wordpress blog tomorrow. I’m to tired now, i would just mess it up.
Great tutorial and easy to understand. Thanks
I don’t think it will work on a WordPress installation – I think the whole “themes” thing will probably mess it up. =\
Let me know if it DOES work though!
I think it will work, because i’m not trying to switch between different themes. I only want to change the css file… i have three different colors for my theme.
Everything seemed fine but when i viewed the theme afterwards it gave me this:
Parse error: syntax error, unexpected '>' in /home/blubbz/public_html/b/wp-content/themes/premium/header.php on line 1
I tried changing “/home/YOURUSERNAME/public_html/styles/” to the direct path instead… but that didn’t work either (and yes, i did change the username)
And i added the stylesheet link to the very first line of the header.php file.
Any ideas?
Sorry, i mean i added the “include” link to the very top of the page. I just added the stylesheet link right below the normal one.
I need to include two stylesheets since the first one is for the layout and the styles is for the images and text colors etc..
I tried it and it looks like WordPress changed some of the quotes from the code. Try downloading the .txt file of the code and replace whatever you already had with the downloaded version.
When you add the include for the styles.php page, make sure it’s not between a block of PHP code already (<?php and ?>).
Actually never mind the comments above. I managed to fix it somehow ^^
I got a few errors on line 15 in styles.php at first but then i replaced the line with this instead:
setcookie(’switchstyle’,($_GET['switchstyle']),time()+(86400*365),’/');
and one more thing… you forgot to add an ‘?’ to the include code… that was the first error i saw.
Thanks for the great tutorial
It feels like i’m spamming, sorry
This will be the last comment, i promise ^^ (unless you comment back and then want me to reply…)
When i was about to insert the links and try the theme switcher the whole blog messed up. And also my forum and my image host :S Really weird actually, i don’t know how or why it happened.
Luckily i made a backup of the whole site yesterday, so i restored it all
After i got it working again i tried to “install” the theme switcher again, and this time it worked perfect, without any errors at all (i used the code from the textfile you posted above).
However since i installed it on my wordpress blog i had to change a few paths to get it working, but now it is.
check it out:
http://planettechsupport.com/b/
you can switch between brown, black and red. (the themes aren’t finished yet, so far there is just some basic color changes).
Again, thanks for the tutorial.
o Let me know if it DOES work though!
It is working ;D
-Nike
I’m sorry xD I know i promised, but i saw that i posted the wrong link o.O
Since its not finished i haven’t made the theme public yet, so here is the real link..
http://planettechsupport.com/b/?theme=premium
(If you navigate to another page on that theme, you’ll have to add “?theme=premium” to the end of the url…
It’s weird that it suddenly just stopped working. I have no idea why it would do that.
I really like that new theme by the way! 
I’m glad you DID manage to get it up and working! Thank you for letting me know that you were successful!
Thanks. Yeah i used the free version of the WP-Premium theme (google it for more info) and then just re-designed it. I’m pretty satisfied with it
And i hope you saw that i put the color change links in the upper right side of the top-bar.
=)