Session Based Stylesheet Color Changes in WordPress

**NOTE**This site does not use this code so please don’t expect to see it in action here. If you would like to see an example, please visit http://www.jessicarstrickland.com/photographers/

The basic premise for this is that a client wanted the colors of the site to change at random when people visited her site but not change on every page load. Here’s how I accomplished this. I’m sure there may be better methods to accomplish it, but it worked for me and maybe it will come in handy for someone else.

Full Code Example | Download the Code |

Ok, first things first, we need to load in the initial style sheet:

Next, we need to check and see if we already have a color cookie declared. If we do have a color cookie we load in the appropriate style sheet based on that color:

< ?php

if (isset($_COOKIE["color"]))
// if the color cookie is set, grab the appropriate style sheet for it
{
if ($_COOKIE["color"] =="BLUE") {
?>


< ?php
} else if ($_COOKIE["color"] =="GREEN") {
?>
< ?php

} else if ($_COOKIE["color"] =="PINK") {
?>
< ?php
}

Now, if we don't have a color cookie, we need to get the color at random and then create the cookie:

} else {
//the color cookie isn't set, so let's randomly choose
$server = get_settings('siteurl');
#this is your file
$file = $server."/wp-content/themes/themename/colors.txt";
#open the file
$fp = file($file);
#generate a random number
srand((double)microtime()*1000000);
#get one of the entries in the file

$random_color = $fp[array_rand($fp)];
$random_color = str_replace("%0A", "", $random_color);
#display the entry
// which color are we going to use for the color cookie
if (strstr($random_color, "BLUE"))
$make_color = "BLUE";
if (strstr($random_color, "GREEN"))
$make_color = "GREEN";
if (strstr($random_color, "PINK"))
$make_color = "PINK";

$GLOBALS[$jscript_color] = $random_color;

// set the color cookie color
setcookie("color", $make_color);

So that's all fine and dandy and works great, but the problem is, the first time the page loads the cookie isn't set, so it doesn't assign the color until the second page of the site is loaded. Thus, we need to declare some initial style colors based on the random color we just chose:

// set initial colors based on the random color we just set as the style sheet won't load until next time
if (strstr($random_color, "BLUE"))
$change_color = "06a1c9";
else if (strstr($random_color, "GREEN"))
$change_color = "9dac00";
else if (strstr($random_color, "PINK"))
$change_color = "cf175e";

?>

< ?php
}
?>

The code for the text file we're pulling the colors from is just this:

BLUE
GREEN
PINK

And that's it. Only, in this case, it wasn't. I wanted to use SIFR to replace the font on the headings/post titles and I needed the colors to change appropriately. So, I had to set up the same type of setup for the javascript that loads the SIFR. I started with using the random color variable I had declared before ($random_color), but that didn't work on the initial load for the javascript at the bottom of the page. I'm not sure if that's a WordPress thing because I was calling the footer via the WordPress include function or what. I ended up having to call the variable like so: $random_color = $GLOBALS[$random_color]; and that worked. So, the SIFR code for the bottom of the page :

Full Code Example | Download the Code

Leave a Reply