How To Create WordPress Theme Switcher for Your Visitors and Theme Viewer for Your Customers
Have you ever wondered if your visitors are fed up with your WordPress theme? The same theme over and over again? I know I am.
How about giving your visitors the option to change your theme? Do you want to know how to allow your users to view different themes on your WordPress Website?
In this tutorial I will show you how to create a multiple Theme Switcher for your users and also how to create a Theme Viewer to showcase your unpublished themes to your customers.
Theme Switching?
Theme Switching is the process of providing the ability for the user to change the presentation styles or “look” of your Website with the use of a Theme Switcher. Theme Switchers are plugins which allow the user to control the look of your Website. WordPress Codex…
Using Theme switching to enhance your Website showcase your talents as a Web developer and also provides entertainment for your visitors. The images below are 3 different themes that visitors of this blog can choose from. My first and oldest theme being the Paper Wall.
Installing Theme Switcher Plugin
Is there a plugin that switches between multiple themes installed? Yes, there is. It is called Theme Switcher. Go ahead install and activate the WordPress Theme Switcher plugin. Note that this plugin does work with the latest version of WordPress (Version 3.2.1).
Things You Should Know
After you installed and activated the Theme Switcher plugin, here are few things to consider:
- Make sure that each theme you use has been thoroughly tested, code scrutinized, validated for errors, and customized for rendering and for functionality. Also Make sure that each theme you choose works well with the content of your Website. For instance, I spent about 33 hours over a period of 7 days to add the 2 additional themes to this blog. All the 3 available themes have been extensively modified: design, layout, coding and functionality by me. They are my testing and teaching ground for WordPress/PHP and CSS. My original and oldest theme is the Paper Wall. All 3 themes are considered a work in Progress for improvements, new features and custom coding.
- The themes in your /wp-content/themes/ folder will dictate the number of themes available for your users to switch between. The same themes can also be found in your WordPress Admin Panel in Appearance -> Themes.
- The Theme Switcher plugin does not work with a caching plugin. For instance, if you have W3 Total Cache installed. If you want your users to be able to switch between themes, you need to deactivate the caching plugin, or at least you need to leave the “Enable Page Cache” option unchecked. If you noticed CSS styling issues when you switch between themes, then you need to disable other options in the W3 Total cache, like browser cache, and probably other options. If your WordPress Website is lightweight and your images are compressed and optimized for the Web, then by disabling the caching plugin, you might not notice a significant increase in page load time. You could also flush the buffer as I discussed in Tip8 in my previous tutorial (as well you could implement other significant tips): 14 Tips for Maximum WordPress Performance & Speed.
- The theme Switcher sets a persistent cookie in your browser. Therefore, you MUST allow cookies for the Theme Switcher to work. If you block cookies or delete them on exit, the theme switcher will always start from your “Current Theme” set in your Admin Panel.
- The Theme Switcher plugin will not modify your “Current Theme” that you specified in your Admin Panel. If you use another browser, your Website will be loaded with your “Current Theme” until a cookie is set. The next time around, if you close your browser, and depending on your preferences loading the Website again might start from your preferred theme.
- The persistent cookie is specifically set in every browser. For the first time, if you download your Website in a different browser, your “Current Theme” that you chose in your Admin Panel will render.
Caching Basics:
- Any caching plugin you use for your WordPress Website, will cache just about anything you set it to.
- Unless told otherwise, the cached pages will be shown to all media (desktop or mobile browsers).
For WordPress Developers: How To Create a Theme Viewer?
Now I will show you how to build a WordPress theme viewer using the Theme Switcher plugin. Let´s say you have an unfinished/unpublished WordPress theme installed in your dashboard and you want to show a demonstration just for your customer, with a direct Web address link and without actually activating it.
If you are a WordPress developer, the nice thing about the Theme Switcher plugin is that you can install and activate it in your dashboard, but NOT add the widget for it in the Widgets Sidebar. In this case, you can type the Web address of the unpublished theme in the browser´s address bar (you need to know the name of the theme – case sensitive – more on that later.) and then you will be able to show your customer´s the custom theme. Let me elaborate.
For this blog, to directly switch themes, without the need of the sidebar´s Widget, you can enter the following URLs in your browser´s address bar:
http://bacsoftwareconsulting.com/blog?wptheme=Emplode- OR:
http://bacsoftwareconsulting.com/blog/index.php?wptheme=Emplode http://bacsoftwareconsulting.com/blog?wptheme=Clear Line- OR:
http://bacsoftwareconsulting.com/blog/index.php?wptheme=Clear Line http://bacsoftwareconsulting.com/blog?wptheme=Paper Wall- OR:
http://bacsoftwareconsulting.com/blog/index.php?wptheme=Paper Wall
Note that I created this WordPress blog in a subdirectory (called blog). Your Web address will vary depending if you created your wordPress Website in the root directory or in a subdomain.
Let´s say I created a custom theme for my customer called: Auto Rental. Then the direct URL of the theme would be:
http://bacsoftwareconsulting.com/blog?wptheme=Auto Rental- OR:
http://bacsoftwareconsulting.com/blog/index.php?wptheme=Auto Rental
Of course, as a first step, the Theme Switcher plugin must have been installed and activated. In your case, if you can´t figure out the Web address, you could always check the HTML source code for your blog.
How to find out the theme´s name?
You could either go to your WordPress Admin Panel and go to Appearance -> Themes. There you can see the detail of the themes installed. Or in each theme folder (/wp-content/themes/), open the style.css file where the theme´s name is at the top.
What if You don´t want to Show your Visitors All your Installed Themes
Let´s say you have 4 themes in your Admin Panel but you only want to show 3 of them. In this case, go to your /wp-content/themes/ folder, and located the style.css file of the theme that you don´t want to show and add the line: Status: NotPublic right after the Author: line.
If you want to allow the Theme Switcher plugin to see that theme again, then either delete that line or change it to Status: publish
What About Google AdSense and Google Analytics code?
If you embedded your Google AdSense and Google Analytics code directly in your WordPress theme files, then make sure that the same code is present in the other themes as well.
Your Turn to Talk
This tutorial is meant for WordPress developers, where I showed you how to create multiple theme switching that keep your users engaged, and also how to create a theme viewer to showcase your unpublished themes for your customers.
If you have something to add or anything else to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.
Thank you very much for the very useful article. I installed the theme switcher but when I switch a theme I always have to clear the browser to see the new theme. I don’t use any caching plugins. I use Firefox latest version. If I don’t clear browser I cannot view the theme I’ve just switched in. please help.
Will do, and thanks for your help. I am going to become a regular reader of your blog, so I suspect this is not the last you will hear from me.
This is wierd. On http://blog.donsingleton.org/ I tried your four plus a few new ones that, like twenty-eleven, are supposedly “responsive” (work with smart phones and pads)
They all work except your Clear Line, which has the switcher in Blue sidebar, but I don’t see it.
This is really strange because this works with some, yet not themes, but it is hard to identify which will break it, and “newer” theme switchers, like http://wordpress.org/extend/plugins/nkthemeswitch/ did not even show up in the sidebar.
Clear Line is a bit tricky, since it is more like a theme framework with many options to choose from the dashboard.
I’m not sure why Clear Line does not work in your case.
If Clear Line is not working for you, then take it out. My advice to you is focus on 2-3 themes that you really like/want for your blog.
Your advice is very good for the average blog. What I am trying to do is understand WordPress, for several different reasons, which all intersect, and some themes are good for one, others for another. The reason I have so many in http://blog.donsingleton.org/ is that right now it is my test bed for theme switchers.
I am exploring each of the themes, to understand what it is good for, and what it is not good for, and would like to understand why some of them break the theme switcher, and why some don’t.
Ok Don. If/When you find the conflict between the theme switcher and some themes, please share it here because I love to know the reason. Thanks.
Another thought, you can ask the plugin owner. He might have more insights.
You say “this plugin does work with the latest version of WordPress (Version 3.2.1)”
I tried it on 3.3, and the themes did switch, but as soon as I switch themes the widgets go to default widgets. I set the widgets on each theme, and add the theme switcher to the side bar, but as soon as I switch from one theme to another, I get the default widgets for that theme, and can’t get back (without deleting the cookie), because the theme switcher is not in the default sidebar of that other theme.
Hi Don,
What themes are you using besides the twenty ten?
I am using 4 themes on my blog and sometimes I add twenty ten and twenty eleven themes (for testing) and it works fine. I have WP 3.3.1.
When you say switch, do you mean switching between themes in the WordPress dashboard? or from the browser? Are you switching themes in the dashboard?
The themes should be switched from the browser. In the dashboard you set only 1 active theme.
Cookies must be enabled in you browser for the theme switcher to work.
Why don’t you try it from the sidebar of this blog (Change Theme) and see how it works.
Hope this helps.
I have Twenty Ten 1.2, Classic 1.6, and Default 1.7.2 all of which were installed by CPanel at 1&1 (host), plus I have added Colourful Bird 1.0, Waterpark 1.0, and technology-wp-theme. I am not locked into any of these. I want to show how it can work with multiple themes.
I set up each theme in the Dashboard, dragging the theme switcher into the sidebar widget for that theme. Then with one of the themes set as default in Dashboard, I went to the browser and saw that theme, and used the theme switcher to change to one of the other 5 themes.
I got that theme, but with default widgets in the sidebar (and since themeswitcher was not one of the defaults, I could not even go back to the default set in Dashboard (without clearing my cookies)
I have the theme switcher widget in everyone of the themes in the dashboard. Even when I switch between themes in the dashboard (choosing a different active theme), the Theme switcher widgets stays in the sidebar.
I am not sure why in your case it is not maintaining your choice of widgets in the sidebar. That’s probably has to do with one of your themes. One of your theme is messed up.
If I were you I would try it on 2 themes first and then I add more themes. Solve by elimination.
Boutros.
It works fine on your blog. Now if I can just get it to work on mine
Do you mean actually remove all of the other themes
Hi Don,
I only installed twentyTen on my Blog (since I suspected that the problem could be from this theme). Once I activated in the dashboard, the Theme Switcher was already added to the primary Sidebar (they have multiple sidebars),
but the widget did not show on the Live Website (browser side). Then I went back to the dashboard and I added only the ‘Theme switcher’ widget to a secondary sidebar. Suddenly, the primary and Secondary sidebars start showing up
in Twentyten theme (on the browser side) but not on some of the other themes.
My initial result, there is definitely a problem with twentyten and If you don’t need it, you should remove it (this comes as default).
I don’t know about your other themes, but in general if you don’t need a theme you should always delete them for security reasons…
Also In general probably you should give your users not more than 3 themes to choose from (best even 2). I have 4 themes, and it is huge maintenance time for me on all 4.
Hope this helps,
Boutros.
Very good article, it will greatly improves the users’ experience if they can switch themes and change entire site design.
Nice. So, let’s say I want to provide a completely unique experiences on a phone, tablet and desktop. These experiences will focus on actions and tasks on mobile devices and more informative/research oriented on desktop computers. Tablets would be more of a magazine experience. The catch is that each will have a customize menu (links).
How would I handle this through a theme switcher? It all needs to be from the same wp instance as the content will be managed for all versions of the site from there.
Hi Dave,
What you are asking is different than the post’s goal. The post’s goal is to give the user the ability to switch between preset themes within the same medium. Thus the post’s theme switcher plugin I discussed is not the one for you.
If I understood you correctly, you are trying to deliver different themes with different content/functionality depending on the medium/browser while at the same time the content is delivered from the same database.
The closest plugins that I could find are: UserAgent Theme Switcher (http://wordpress.org/extend/plugins/user-agent-theme-switcher/) and Mobile theme switcher (http://wordpress.org/extend/plugins/mobile-theme-switcher/)
I never used those and I don’t think they will handle different functionality as you are asking.
At the end, I think you will need custom coding (for instance JavaScript to check for user-agents) to deliver specific content/functionality to each medium from the same database (definitely with 3 separate databases would be much easier but not efficient).
Also check out the WP touch plugin (http://wordpress.org/extend/plugins/wptouch/)
Wow. It’s really interesting. With automated tools (artisteer, divine elemente, etc.) it is even much more interesting. Thanks for idea.