A reader recently asked about how to develop a theme on a live site such that:
- All visitors will see the current theme
- Only the designer will see the new theme
- All site plugins will work with the new theme
- Smooth transition between old and new theme at launch
These are the main concerns, but there are a few other details that need addressed to ensure smooth theme development on a live site. Let’s take a look at how to achieve these goals and effectively develop themes behind the scenes..
You need a plugin
The easiest way to develop a new theme behind the scenes is to install a good theme-switcher plugin. There are plenty available:
- Theme Switcher
- Theme Switcher Reloaded
- Alternative Theme Switcher
- Theme Preview
- Theme Test Drive
- NK Theme Switch
- Theme Test Preview
- User Theme
Any of these plugins will work fine for the purposes of working with multiple themes on your site. If you also plan on enabling your visitors to switch themes, I would have to recommend the newer NK Theme Switch plugin. NK Theme Switch does everything the other plugins can do, but with the added bonus that it redirects users back to the page from which they came after switching themes. The other two plugins switch themes, but the user is always redirected back to the home page after the theme switch.
Note that, for the different theme-switcher plugins, the URLs used when switching themes include different query-string parameters that are similar but not interchangeable. Once you implement a theme switcher, replacing it with a different plugin is going to be difficult.
In any case, once you have your theme-switcher plugin of choice activated, you’re going to need to know how to actually switch the themes..
Different plugins involve different methods of switching to a different theme. If you are using NK Theme Switch, you can select and activate your alternate (development) theme from within the WordPress Admin. This is the easiest way to do it. If you are using one of the other theme-switching plugins, activating the alternate theme for your browser is as easy as entering a specific URL into the address bar. These theme-switching URLs look similar for either of the first two plugins:
For example, here is the URL used to switch to one of my favorite themes at Perishable Press:
The syntax here is straightforward -- the only thing that needs to be changed is the theme name, which in this case is “Perishable”. When developing a new theme for Perishable Press, I simply jot down the theme-switch URL for both the new theme and the active default theme. This makes jumping back and forth very easy. Of course, the general format of these URLs will vary depending on the particular theme-switching plugin that you use.
Another option for switching between current and alternate themes is to actually include the theme-switching links and/or dropdown menu right there on the theme pages themselves. For example, including the theme-switch dropdown menu in the footer of all your themes is a great way to speed up and simplify the development process. But be advised, unless you explicitly exclude your new theme from the theme-switch menu, it will be available for all of your visitors to see and activate. The other method of just using the URL directly is a good way to ensure privacy.
Now that you are setup and easily switching between themes, there are a few other points to consider..
Your new theme is just another theme
This may sound strange, but there is nothing special about your new theme -- it’s treated by WordPress as any other theme in your “
themes” directory. All of the requirements of the default theme apply:
- Your new theme needs a properly configured
- Your new theme needs a working
Assuming your new theme meets these basic requirements, WordPress will recognize your theme as such and display it when activated (either through the Admin or via theme-switch plugin). Incidentally, the name of your theme is specified via the
style.css file. The “
Theme Name” that is listed here will be the same one used in your theme-switching URLs.
Once you get the basics of your new theme established, use your theme-switching plugin to activate it locally in your browser. Form there, you can rock the design however you want, exactly as you would do when starting from a fresh installation of WordPress. While you are working on your new theme, your visitors will still be seeing your default active theme, which is whatever you specify in the WordPress Admin. This is why the theme-switch development method works so well.
Pages, plugins, and custom functions
Here are a few more little things that will help you when developing your themes behind the scenes..
- Plugins affect all themes
- Even when your theme is not set as the current default, it will still be affected by all of the plugins installed on your site. This is one of the benefits of using plugins over custom functions..
- Custom functions only affect the theme being used
- In contrast to plugins, custom functions (i.e., functions placed in your theme’s
functions.phpfile) only affect the current theme being viewed. If you seem to missing some functionality in your “behind-the-scenes” theme, make sure that you have properly transferred any required custom functions.
- Page templates will confuse you
- This happens to everyone: you are working behind the scenes on a new theme and you can’t seem to get a custom page template to appear in the WordPress Admin. This is because the page editor only shows the templates available to the current default active theme (i.e., the one that everyone sees). To work around this, you can either upload a copy of the custom page template to the active theme, or temporarily switch the default active theme to your behind-the-scenes theme. Personally, I use the former method and just delete the page template if it’s not needed in the default theme.
And last but not least..
Prepare for launch!
Once you have your new theme pimped out and ready to go, simply change your default active theme in the WordPress Admin to launch it for the world see. That’s all there is to it! :)