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! :-)
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
- Why this solution, Compatibility notes
- Making an alternative theme/style
- Setting up Theme Switcher Reloaded: 2 methods
- Notes
- 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.
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 a rule like this for the HTML body:
body { background-color: #fff; color: #111; font-family: calibri, "liberation sans", 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 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
Τhen 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, 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 mostly useful for large collections of themes. (With 5 or 10 themes I did not notice 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 those 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 above —“cookie set to expire in 1 hour”— confuse you. It obviously is a left-over from a previous version of Style Switcher, since the time() function works with seconds, not milliseconds.
... and change the value. For 1 year, use 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. (It works.)
- Removed child themes example (unnecessary repetition of op111.net/53).
Similar articles and pages in op111.net
- Add any link to your WordPress navigation menu with Page Links To
- Plugins used
- Another three clean, minimalist themes for WordPress
- How to make a child theme for WordPress: A pictorial introduction for beginners
[...] to themebot.com to check for any instructions. I don’t see anything there, but thankfully Demetris posted a link for a “how-to.” He is using this plugin to act as a style switcher, [...]
[...] to themebot.com to check for any instructions. I don’t see anything there, but thankfully Demetris posted a link for a “how-to.” He is using this plugin to act as a style switcher, [...]
[...] Follow this link: An easy style-switcher for WordPress. How-to – op111.net [...]