op111.net

UPDATED 2008-10-31

Style switchers in web sites can serve various purposes:

• Accessibility
• Flexibility in general
• User choice
• Fun

I wanted to add one to op111.net for all of the above reasons. After looking at various solutions for WordPress, I decided to use a theme switcher instead. This one:

wordpress.org/extend/plugins/theme-switcher-reloaded

You can try it here at op111.net (below the RSS links), to see if you like the way it works. If you do, keep reading! :-)

In Internet Explorer 6 you’ll only see different colours, not widths. To be fixed. Sorry!

Theme Switcher Reloaded in action: I just switched to the wide style of op111.net. The string with the theme name in it will be removed on the next page change. It is appended for XHTML and CSS validation.

CONTENTS

1. Why this solution, Compatibility notes
2. Making an alternative theme/style
3. Setting up Theme Switcher Reloaded: 2 methods
4. Notes
5. Links

1. Why this solution, Compatibility notes

Normally, theme switchers are used in theme directories or by theme designers, to showcase themes. So, why do I use one as a style switcher? Because I found that overall, compared to the alternatives I looked at, I liked Theme Switcher Reloaded better:

1.1. Why Theme Switcher Reloaded

• It is easy to set up.
• It works well.
• It works fast.
• It works from any page without redirecting to the home page.
• It allows to check styles/themes for valid XHTML and CSS.
• It comes with a widget. (Alternatively, text or image links can be used.)
• It offers possibilities not available in a style switcher.

Acknowledgements

I want to thank Josh Wood of Utopian.net and Themebot of Themebot for answering my questions about the performance of Style Switcher Reloaded. This could be a concern in some cases, e.g. traffic surges, or sites on budget hosting, but the switcher does not seem to be heavy on the server.

1.2. Compatibility of Theme Switcher Reloaded

Theme Switcher Reloaded 1.0:

• Works well with WordPress 2.6 and 2.7. [INFO UPDATED 2008-10-31]
• Does NOT work well with WP Super Cache. To explain. Both plugins work exactly as they should, which is where the problem lies: Theme Switcher Reloaded switches the theme, but WP Super Cache keeps serving cached content, so the change only becomes visible after the next cache refresh.

2. Making an alternative theme/style

Style switchers switch stylesheets. Here, however, since a theme switcher is used, you will have to make alternative themes.

This is very easy. Thanks to WordPress “child themes”, making alternative themes is essentially the same as making alternative stylesheets: In its elementary form, a child theme is just one directory with just one stylesheet in it. See this introduction and how-to:

How to make a child theme for WordPress

An advantage of using child themes for the alternative styles is that you only have to add rules for the difference, which makes for small, clean files, easy to manage. For example, the dark style of op111.net is essentially one stylesheet with only chromatic rules in it, to override the colours of the default theme and define a dark background and light text in their place.

So, for instance, while the default theme/style has this rule for the HTML body:

body {
    background-color: #fff;
    color: #111;
    font-family: candara, "liberation sans", verdana,
        "lucida grande", helvetica, sans-serif;
    font-size:  87.50%;
    margin: 1.0em auto 0.5em;
    max-width: 66.0em;
    padding: 0 1.0em;
    }

… in the dark style the rule for the body is just two declarations:

body {
    background-color: #272727;
    color: #dfdfdf;
    }

3. Setting up Theme Switcher Reloaded: 2 methods

Unless you are a good designer, the difficult part in all this is making good alternative styles. Setting up Theme Switcher Reloaded is just clicks and copy/paste.

First, download and install the plugin:

wordpress.org/extend/plugins/theme-switcher-reloaded

… and then pick one of two ways to display the style options…

3.a. Included widget

Go to Design, Widgets, and add the “Theme Switcher” widget to the sidebar. You can customize its title, if you want, and also choose between a list and a drop-down menu for the style options.

The second option of the second pair (“short name (faster loading)”) does not support child themes, but, in any case, this is useful for large collections of themes. (With 5 or 10 themes installed I did not feel any difference.)

The one problem of the widget in this particular implementation is that you cannot select themes to display; each and every theme you have installed is made available to your visitors to switch to:

Oops!

The quick ’n’ dirty solution is to delete every theme but the ones you want to display. If I did this, I would keep a couple of themes in an auxiliary directory nearby, to be able to do a quick cut/paste in case of emergency.

3.b. Text or image links

The alternative method is to use text or image links. In this method you select just the styles you want. The links will have this form:

<a href="?wptheme=Theme Name" title="Blah blah">Blah</a>

The URI of the href attribute is the most important part, and the name of the theme must be entered exactly as it is, case-sensitively.

To return to the example of Arietta and Arietta/dark, make two links:

<a href="?wptheme=Arietta" title="Default style">Default</a>
| <a href="?wptheme=Arietta/dark" title="Dark style">Dark</a>

… then go to Design, Widgets, add a “Text” widget to the sidebar, paste the links and click Save Changes:

For more styles, more links can be added:

… which appears like this:

4. Notes

4.1. Cookie duration

Style Switcher Reloaded stores the style preference of each visitor in a cookie, which has a life of 1000 hours, that is, 42 days. This is more than enough for a themes directory but maybe too short for other sites. To change the cookie duration, find this line in theme-changer-reloaded.php:

$expire = time() + 3600*1000; // cookie set to expire in 1 hour

Don’t let the comment —“cookie set to expire in 1 hour”— confuse you. It is obviously a left-over. (Since the time() function works with seconds, not milliseconds.)

… and change the value. For 1 year, use 60*60*24*365 or 31536000:

$expire = time() + 31536000; // Cookie set to expire in 1 year.

4.2. Suggestions, Ideas, Questions

Have any ideas, suggestions, questions, corrections, or objections? You are most welcome to leave a comment!

Thanks for reading and happy style-switching!

5. Links

THEME SWITCHER RELOADED

Home: themebot.com/webmaster-tools/wordpress/wordpress-plugins
wordpress.org: wordpress.org/extend/plugins/theme-switcher-reloaded

OTHER

www.smashingmagazine.com/2008/06/05/style-switchers-are-back-ideas-examples-and-a-contest

“Style Switchers Are Back: Ideas, Examples and a Contest”. Lots of ideas and examples for possible implementations of style switchers. — Results of the contest: www.smashingmagazine.com/2008/06/25/style-switchers-contest-results

Changelog

2008-10-31

Added compatibility note for TSR and WP 2.7 (works!).

Removed child themes example (unnecessary repetition of op111.net/p53).

Similar & Related

• Five WordPress plugins you may not know about, and how to make a “mini child theme”
• How to make a “child theme” for WordPress. A pictorial introduction for beginners
• Add any link to your WordPress navigation menu with Page Links To
• Plugins used
• WordPress: 20 answers