RSS and Email delivery
- All posts · English only
- All posts · English only
Recommended
- The WordPress excerpt: What, why, how, tips and plugins
An easy style-switcher for WordPress. How-to
5 Oct 2008, 20:20 · 25 Oct 2010, 20:55 · By demetris · Comments (22)
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
5 Oct 2008, 20:20 · 25 Oct 2010, 20:55 · By demetris
Categories: English, WordPress
Tags: 0, accessibility, alternatives, blogging, child-themes, colours, css, design, fun, lang-en, planet-wp-en, plugins, sheet, style, style-switcher, styles, stylesheets, theme-switcher, theme-switcher-reloaded, usability, Web, WordPress
Permalink · Comments feed · Write a comment
Responses (22)
Pingbacks (3)
[...] 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 [...]
Comments (19)
Hi, thanks for the article. My problem is a little different and I’m not sure if it is possible. I am working on a site right now and I want the online store to have a different theme than the rest of the site. Is there a way to do this? When the user clicks the store button I would like it to take them to the store page AND also change the theme to the different theme I have set up for the shop. Any help is appreciated, thanks!
Hi, Alex!
If the changes can be made with CSS alone, you can use Headspace2 to link an external stylesheet or insert an internal stylesheet for the shop page only.
I you need to load a complete theme with templates etc., Headspace2 can do this too — at least it has the option. I just tried in my test installation (runs WP 2.7), and it didn’t work.
Headspace2: urbangiraffe.com/plugins/headspace2/
Great post – thanks!
Thanks, Peter! Glad you liked it!
Hi Demetris.
I like a lot the functionality of your plugin, but it has been impossible for me to make it work correctly.
I created the child themes and when i change them in the wordpress admin interface, they are working perfectly, so i conclude that the child themes are ok, but when i try to change them dinamicly using you plugin, i can’t do it.
I have a parent theme which is the source of my templates and my base css. and then i established some child themes to modify the color schemes. The parent theme’s name is “fundaperdis” and i established “template: fundaperdis” and the css “../fundaperdis/style.css”in all of the children themes. As i told you, in wordpress admin interface they are working 100%. I change theme and the theme is changing, but when i try to change them with the plugin calling the wptheme variable and passing the name of the theme as the value, i could’nt get it right. Please help me
@Nestor Rojas
Hey, Nestor! Do you, by any chance, have any caching plugin installed? What you describe is what I saw when I tried the theme switcher with the WP Super Cache plugin installed.
Other than that, I have no idea. You can send the theme and the child theme, if you want:
op111.net/contact
so that I can check to see if they work here, on op111.net.
btw, the plugin is not mine. :-) I just wrote the how-to.
On the links given by you, I still find the older version which was last updated on 23 April 2008. Where can I get the latest version from?
@Navjot Singh — You mean for Theme Switcher Reloaded? Both links have the latest version, 1.0, dated 22 February 2008.
Then what’s this supposed to be?
2008-10-31
Added compatibility note for TSR and WP 2.7 (works!).
Removed child themes example (unnecessary repetition of op111.net/p53).
Ah! You’re right. That can be confusing. This is when *I* updated the *information*, to add that Theme Switcher Reloaded is also compatible with the new version of WordPress, 2.7.
I’ll rephrase the note, to make it clearer.
Thank you so much for this tutorial – it’s excellent!
One note to add: if you create child themes, and want to link to them via the “text” method (rather than using the default widget) you need to replace any spaces in the child-theme title with + symbols.
For instance, if your theme name is “Theme Number One” you should link to “?wptheme=Theme+Number+One” – not “?wptheme=Theme%20Number%20One”.
Hope this helps anyone who had the same problem! :) Michelle
Thanks, Michelle!
I tried to replicate what you describe and I cannot. I made a child theme named “dk Test”, and the text method works fine in all browsers, despite the space in the theme’s name.
Are you still seeing this? Are the links properly enclosed in double quotes? Are you using escape charaters (%20) in the URLs? If yes, have you tried with plain spaces? — Maybe I’ll add a note in the howto, to save other people the troubleshooting if they come upon this.
Thank you very much for this tutorial, it is very usefull for me.
I only have a problem, when I switch the theme using this link, it redirects to the website home page. Somebody knows if there’s a way so that it stays in the current page?
Hey!
I already found the solution for keeping the current page:
inspectelement.com/tutorials/create-a-wordpress-theme-development-environment/
Thanks
Maria, you are right. Theme Switcher Reloaded started redirecting to the homepage sometime around WordPress 2.9. I have always been using the method with the Text Widget and the manual links, which still works fine, and had not noticed.
I think you chose a good alternative in the Theme Switch and Preview plugin. It is a good plugin, it has some advanced options, and it also works with the manual method I describe. All in all, it gives you everything you may need.
hm.. about this caching business.. I really need to cache my pages somehow to cut on loading time. Does this mean I’m unable to use ANY kind of style switcher?
@McErrick
So far none of the combinations of caching plugin and switcher I have tried seems to work. But I think that, technically, it is possible.
Maybe you could suggest the idea to a developer of a switcher plugin and see what they say. Nicolas Kuttler, the developer of Theme Switch and Preview, is a good developer and also responsive:
www.nkuttler.de/wordpress-plugin/theme-switch-and-preview-plugin/
Hullo!
Thank you for this tutorial, it was very helpful. However, I have run into an odd issue and thought I might throw it past you. I crudely put two text links for the themes (default and a child) and oddly enough they both work perfectly when I have the child theme activated through the admin panel. Yet, neither work when I have the parent theme activated through the admin panel.
I am happy that it works, but I would prefer to have my regular theme activated, any thoughts? See it at tropicsociety.com
Again thanks!
Thanks so much for the instructions on how to easily show the different themes. I was using another plugin which instead of getting you to pick which themes you wanted to show, got you to pick which ones you wanted to hide. So every time I added more themes I had to go back and hide them them hundreds of times, frustrating!
Great solution and exactly what I was looking for. Thanks.