Php Function - Swap/switch Css File | Greg Bialowas. Full Stack Developer and Designer

During Christmas time I wanted to present two versions of my site, one being the "Merry Christmas"-like and the other just the regular theme. I wanted the switch to be very, very simple; just a mouse click and done! the CSS is swapped.

I had been looking for a jQuery or one of those "out of the box" scripts, but at the end I turned back to my favored and favorite scripting language, PHP.

How does that work?

The PHP version of how to swap, or switch if you like, a CSS file, is based on a PHP SESSION.

It simply creates a session with a default name ( I'll explain later on ) and then, upon a click, it changes the name of the session which incidentally is the CSS's file name, thus the new file is being loaded and is kept in that session for as long as the user is browsing your site. Trick is done.

How to do it?

First of all you need to initiate a session on EVERY page you're going to use it. And this is very important. ( If you're using a Wordpress' theme you will need to tweak your selected theme's header.php file only ) Add this little piece of code to the very top of every of your pages, right below the opening PHP tag:


<?php
session_start();

This is VERY important, if your script won't work later on, first of all, check IF all the pages have the session opened. That actually is CRUCIAL for the script.

Step 1

In your INDEX file ( or header.php in Wordpress ) add this little piece of code right below the session opener, so your code would look something like this:


<?php
session_start();
if(!isset($_SESSION['current_style_sheet'])) {
  $_SESSION['current_style_sheet'] = 'christmas';
} else {
  $_SESSION['current_style_sheet'] = $_SESSION['current_style_sheet'];
}
?>
<html .... .... </html>

where ' Christmas' is the default name of the style sheet.

The above code means nothing but this: IF there is no variable named 'current_style_sheet' create one and name it 'christmas', otherwise use the variable already defined.

Once you have that covered the rest of stuff is pretty simple:

Step 2

Display a link that will initiate a swapping process with this line:


<a href="swap.php?s=my-file-name-to-switch">My Swap Style</a>

The parameter I used is named "s", as in S in SOME-FILE-NAME, and basically this is the name of the file you want to load upon a click. The link can be initiated from any point/place of your site, wherever you like. I named it swap.php The swap.php file should look like this:


<?php session_start(); $_SESSION['current_style_sheet'] = $_GET['s']; header ( 'location: index.php'; ?>

When a user is kicked in to this page the following simple magic happens:


<?php session_start(); $_SESSION['current_style_sheet'] = $_GET['css_swap']; header ( 'location: index.php'; ?>

and then the very user is kicked back to the main site, unnoticedly.

Step 3

One last thing you need to tweak: your META tags, to invite the current style ( which is already stored in PHP's session ) to every of your page.


<link href="<?php echo $_SESSION['current_style_sheet']; ?>.css" rel="stylesheet" />

Done.

Note: gregbialowas.com is using a slightly different method of redirecting users yet you should get an idea of how to do that on your own website.

Note: The above version wasn't tested so if you have questions, don't hesitate to address them at: i at gregbialowas.com

PHP Function - swap/switch CSS file

How does that work?

How to do it?

Step 1

Step 2

Step 3