All righty! If you're using wordpress, then the best way to handle this is to use a combination of PHP and jQuery. You'll use PHP to handle your cookies so that it carries through all your pages. This way the server can serve the stylesheet before the page loads. You'll use jQuery to call the PHP pages dynamically and update the href accordingly.
Here's how you're HTML is going to look:
<?php
// checking if the user already has a theme, if not, then it sets red as the default
if(!isset($_COOKIE['theme'])){
setcookie('theme', 'red', time()+3600);
}
?>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// handles the click actions for the style changes
// if they click blue, it's going to call the php function (setting the php cookie), then update the theme href
$('#blue-link').click(function(){
$.get('set-blue.php', function(data){
// sets the blue cookie
$('#theme').attr('href', 'blue.css');
});
});
$('#red-link').click(function(){
$.get('set-red.php', function(data){
// sets the blue cookie
$('#theme').attr('href', 'red.css');
});
});
});
</script>
<link rel="stylesheet" href="<?php getTheme() ?>" id="theme" />
<?php
// this function checks what them they are in, then serves it when the page loads
function getTheme(){
if($_COOKIE['theme'] == 'red'){
echo "red.css";
} else if($_COOKIE['theme'] == 'blue'){
echo "blue.css";
}
}
?>
</head>
<body>
<h1>Testing php cookies</h1>
<p><a href="#" id="blue-link">Blue stylesheet</a>
<p><a href="#" id="red-link">Red stylesheet</a>
</body>
</html>
You'll have two php files.
set-red.php:
<?php
setcookie("theme", "red", time()+3600);
?>
set-red.php:
<?php
setcookie("theme", "blue", time()+3600);
?>
Let me know if that makes sense!
