A Single Article
Read it, comment, and share it with your friendsHow I implemented my cookie-based switcher
As you may have heard, I recently added an extra stylesheet to this design which can be activated and saved with a cookie. The premise is simple: I have a basic stylesheet that all first-time visitors get which is simple and easy to read, and on top of that stylesheet I have a second stylesheet that users can choose to activate which makes everything a bit more lively. Fun stuff eh?
I figured I would share the code that I plugged into my template (all of it went into header.php) since I think it came out rather nice. To be fair, I got my ideas from the WP Theme Switcher plugin by Ryan Boren.
I should mention quickly that some of the PHP is Wordpress-specific, so I don’t recommend applying this to non-Wordpress programming.
// this function is for setting the cookie
function set_domo_cookie() {
// setting expiration in the future
$expire = time() + 30000000;
// checking for GET request
if(!empty($_GET["domo"])) {
// avoiding hacks with htmlspecialchars()
$domo = htmlspecialchars(stripslashes($_GET["domo"]));
// set cookie has four parameters,
// name, value, expiration, and path
setcookie("domo".COOKIEHASH,
$domo,
$expire,
COOKIEPATH);
$redirect = get_settings('home').'/';
// after this, it's important to go back to the main page
if(function_exists('wp_redirect'))
wp_redirect($redirect);
else
header("Location: ".$redirect);
// after a redirect, you must exit to stop PHP processing
exit;
}
}
// the function runs on every page load,
// but there is no action without the GET request
set_domo_cookie();
// it's a little silly to write a function and immediately
// use it, but I find that neat and clean
// this function is for retrieving the cookie
// the default is 'off'
function get_domo_cookie() {
if(!empty($_COOKIE["domo".COOKIEHASH]))
return $_COOKIE["domo".COOKIEHASH];
else
return 'off';
}The next step is deciding whether or not to add the second stylesheet.
<style type="text/css" media="screen">
/* the base stylesheet is always on */
@import url(<?php bloginfo('stylesheet_url'); ?>);
/* the second stylesheet is echoed if the
cookie is set to 'on' */
<?php
if('on'==get_domo_cookie()) {
echo '@import url(';
// this function prints my template path
bloginfo('template_directory');
echo '/alt-style.css);';
} ?>
</style>The last step is that within my navigation list I have the final link done like this:
if ('on'==get_domo_cookie()) {
echo '<a href="?domo=off">Domo Off</a>';
} else {
echo '<a href="?domo=on">Domo On</a>';
}I should mention here that Elliot Swan’s Postable made this article possible.
Hope it helps.
Get a Trackback link
3 Trackbacks/Pingbacks
Other blogs referencing this article11 Comments
Responses to my articleWow, this is pretty spiffy code. I know I’ll find a use for it somewhere. Thanks for the postage. =)
Very useful. I had read a technique on the same lines by Roger Johansson.
Yeah, his code isn’t Wordpress specific though and it’s for selecting a single stylesheet, not adding a second one. You can see the effect of activating the stylesheet on this site; without only one stylesheet is in the head section, and with there are two stylesheets.
Hah, implemented something very similar recently, only yours looks much tidier. I am too lazy when it comes to private code :X The Domo On thing is quite cute, btw!
I see now that you’re talking about WP, the one I was using (from Dynamic Drive) is for regular sites which incorporates 3 styles.
If I ever start blogging again though, this will definitely come in handy, thanks.
Jem: Yeah, I still need to work on it some and figure all the colors out, but the header image itself came out very nice.
BillyG: Yep, blogging & theming on WP is about as easy as it gets
man, we should start a style-sheet-switcher enabled blog club.
Badges and trophies and self-righteousness and all that good club-type stuff
LOL, there’s a cheesy idea I can hardly argue with!
I have theme switcher for my flavours…. am I allowed in the club
This is a very good piece of code. Although I would suggest a small improvement in your redirect section. Every time you change the stylesheet you don’t need to send the user back to home page and so you can use wp_redirect($_SERVER[’HTTP_REFERER’]); rather than wp_redirect($redirect);
Thanks,
I want to have a second style for accessibility purpose on a 2.5 wp theme but I don’t understand where to put this code on the header.php
And I don’t see a second style on your blog. Thaks for your help.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.