Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

PHP Stylesheet / Content Switcher with Save Cookie

Details

Here is a simple PHP script to change stylesheets or load in alternative content (conditional loading), with cookies to store user selection.

The nice thing about a PHP-based solution over JavaScript content / CSS switchers, is that all the checking and switching is done on the server side, before the web page even finds it's way to the browser, so you don't get any flash of unstyled content. Plus, you can conditionally load HTML or external files (improve performance and save on load times) according to user-selection. And of course, everything still works if JavaScript is disabled.

And on to the goodies...

Style Switch

This goes in the <head> section of your web page - the last line echos out a stylesheet link so put it where you'd want that to appear;

<?php 

$default = 'styles.css'; // define stylesheets
$darkcss = 'dark.css'; 
$lightcss = 'light.css'; 

$expire = time()+60*60*24*30; // how long to remember css choice (60*60*24*30 = 30 days)

if ( (isset($_GET['css'])) && ($_GET['css'] == $lightcss) ) { // set cookie for light css
    $_SESSION['css'] = $_GET['css'];  
    setcookie('css', $_GET['css'], $expire); 
    } 

if ( (isset($_GET['css'])) && ($_GET['css'] == $darkcss) ) { // set cookie for dark css
    $_SESSION['css'] = $_GET['css'];  
    setcookie('css', $_GET['css'], $expire);  
    } 

if ( (isset($_GET['css'])) && ($_GET['css'] == $default) ) { // set cookie for default css
    $_SESSION['css'] = $_GET['css'];  
    setcookie('css', $_GET['css'], $expire);  
    }  

if (isset($_COOKIE['css'])) { // check for css stored in cookie
    $savedcss = $_COOKIE['css'];  
    } else { 
    $savedcss = $default; 
    } 

if ($_SESSION['css']) { // use session css else use cookie css
    $css = $_SESSION['css']; 
    } else { 
    $css = $savedcss; 
    }  

// the filename of the stylesheet is now stored in $css
echo '<link rel="stylesheet" href="/path/to/styles/'.$css.'">'; 

?>

Right at the top, you can define all your stylesheets to individual variables. You can also set how long you want the 'remember' cookie to work for on the end-user's device - default is 30 days.

Next, you want to setup a cookie for each stylesheet / variable - this part of the code does that;

if ( (isset($_GET['css'])) && ($_GET['css'] == $lightcss) ) { // set cookie for light css
    $_SESSION['css'] = $_GET['css'];  
    setcookie('css', $_GET['css'], $expire); 
    }

By the time you get to the bottom of that block of code, the $css variable will hold the value of the stylesheet variables defined in the first few lines. This is then used to echo out a stylesheet link that points to the selected stylesheet, so once printed on the web page, this;

echo '<link rel="stylesheet" href="/path/to/styles/'.$css.'">';

Will equate to this;

<link rel="stylesheet" href="/path/to/styles/styles.css">

That's the clever switching, checking and saving part sorted - the actual switch mechanism is a simple query string passed via a link;

<a href="?css=<?php echo $lightcss;?>">Light</a>  
<a href="?css=<?php echo $darkcss;?>">Dark</a> 
<a href="?css=<?php echo $default;?>">Default</a>

Now all that's left for you to do is create different content styles in each of your stylesheets that will change the look of your page.

Content Switch

You can switch content in 2 ways; The first way being with CSS. As you'd expect, you can do this just by hiding content (maybe a <div>) with display:none; in one stylesheet, and revealing it again with display:block; or display:inline-block; in another.

Please be aware that hiding large images, videos or other bulky resources in this way will usually NOT stop them from downloading (for most popular browsers). They'll still load in the background and impact on the weight and performance of your web page, but you'll just not be able to see them. Please see this interesting research by Tim Kadlec which explores CSS and asset downloading.

The second way you can switch content is by using the value of the $css variable;

<?php if ($css == 'styles.css') { ?> 
    <p>DEFAULT CONTENT</p>
<?php } ?> 

<?php if ($css == 'dark.css') { ?> 
    <p>DARK CONTENT</p>
<?php } ?> 

<?php if ($css == 'light.css') { ?> 
    <p>LIGHT CONTENT</p>
<?php } ?>

This way is good for conditionally loading in resource / bandwidth / performance intensive material because, unlike the CSS method, it is only downloaded when a specific variable (a stylesheet in the example above) is present.

Other Uses

The script above loads in stylesheets, but you don't have to use it solely for this purpose. You could define other values to the variables at the top of the script and NOT echo a stylesheet link tag at all. You could just store the variables but use the same method for loading in different content based on either hard-coded blocks of HTML, or PHP file includes. I suppose in some ways you could even use it as a simple pagination script;

<?php 

$page1 = 'page1'; // define variables
$page2 = 'page2'; 
$page3 = 'page3'; 

$expire = time()+60*60*24*30; // how long to remember pg choice (60*60*24*30 = 30 days)

if ( (isset($_GET['pg'])) && ($_GET['pg'] == $page1) ) { // set cookie for page1
    $_SESSION['pg'] = $_GET['pg'];  
    setcookie('pg', $_GET['pg'], $expire); 
    } 

if ( (isset($_GET['pg'])) && ($_GET['pg'] == $page2) ) { // set cookie for page2
    $_SESSION['pg'] = $_GET['pg'];  
    setcookie('pg', $_GET['pg'], $expire); 
    } 

if ( (isset($_GET['pg'])) && ($_GET['pg'] == $page3) ) { // set cookie for page3
    $_SESSION['pg'] = $_GET['pg'];  
    setcookie('pg', $_GET['pg'], $expire); 
    }  

if (isset($_COOKIE['pg'])) { // check for pg stored in cookie
    $savedpg = $_COOKIE['pg'];  
    } else { 
    $savedpg = $page1; 
    } 

if ($_SESSION['pg']) { // use session pg else use cookie pg
    $pg = $_SESSION['pg']; 
    } else { 
    $pg = $savedpg; 
    }  

?>

Conditional content;

<?php if ($pg == 'page1') { ?> 
    <p>PAGE 1 CONTENT - HD RETINA IMAGE</p>
<?php } ?> 

<?php if ($pg == 'page2') {  
    include('path/to/other/content/page2.html'); 
    }  
?>

<?php if ($pg == 'page3') { ?> 
    <p>PAGE 3 CONTENT - A VIDEO</p>
<?php } ?>

And these would be the links to switch / change content;

<a href="?pg=<?php echo $page1;?>">Page 1</a>  
<a href="?pg=<?php echo $page2;?>">Page 2</a>  
<a href="?pg=<?php echo $page3;?>">Page 3</a>