DiggingIntoWordPress

by Chris Coyier & Jeff Starr

How to Develop WordPress Themes Behind the Scenes

Posted by on

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:

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..

Switching 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:

http://domain.tld/index.php?wptheme=ThemeName

For example, here is the URL used to switch to one of my favorite themes at Perishable Press:

http://perishablepress.com/press/index.php?wptheme=Perishable

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 style.css file
  • Your new theme needs a working index.php file

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.php file) 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! :)

27 Responses

  1. So lovely. This is of course how I work too and wouldn’t have it any other way. As you mentioned, the only little thing that can be a hitch in the giddyup is the page templates. I’m always finding myself wanting to change a pages page template, but ONLY for the new theme, which of course you can’t do. Sometimes the leads me into pushing a new design live a little early =)

    • Jeff Starr

      Yep, me too. But once you set the custom Page template it is there to stay, even when the theme is not activated as default. So at least there’s a workaround :)

    • Craig Allen December 28, 2009

      Would using a framework and creating child themes fix the page template problem?

  2. Thanks for the run down – I’ve been meaning to do this for a while now.

    On the topic of switching themes – how can you handle different screen sizes? I still get a fair bit of 800×600 traffic (according to Analytics) but I’ve moved to a 1024 wide theme. Any easy way detect and show a different 800×600 optimized theme?

    • Jeff Starr

      There are a variety of techniques available, of which jQuery would probably be a good way to do it. Also possible to do something like this with CSS:

      @media all and (max-width:800px) {
             #sidebar {
                    float: none;
                    clear: both;
             }
      }

      This would, for example, relocate your sidebar to appear beneath your content for anything less than 800 pixels wide. Of course, the sky’s the limit to how you could customize your design.

  3. Francesco December 23, 2009

    Very interesting… I bet that you used some of these plug-in to develope the new css-tricks theme… isn’t so?

  4. I suppose setting up a dev environment is out of the question?

  5. These plugins are very nice. I know about the first 2 but the others are great.

  6. Very Nice Jeff.You are becoming my ideal in wordpress development.:)

  7. I’ve used Theme Test Drive on many sites, either when creating a new theme for an existing site or when using the Launch Pad theme and developing the initial theme.

    I’ve experienced the page template issue and figured it had something to do with the live theme, but I’m glad to read about why it works like that. And more importantly, how to work around it.

    Question about NK Theme Switch:
    If you submit a form then immediately switch the theme, would the browser want to resend the info?

    Thanks!

  8. Fantastic and just in time! I wanted to revamp one of my WordPress sites for 2010, but I didn’t want anyone to see before it was finished, nor did I feel like setting up a dev environment. Awesome!

  9. Can’t be sure where, but I know I’ve seen Chris talk about this before. This isn’t how I preview a theme live. There’s probably something I’m missing, but I use this address:

    http://blog.theschoon.com/?preview=1&template=%THEMENAME%&stylesheet=%THEMENAME%&

    If I was testing out a theme named “Martini”, for example, then it would look like this:

    http://blog.theschoon.com/?preview=1&template=Martini&stylesheet=Martini&

    For curious minds, this is the link that WordPress uses to generate the Preview subwindow in the Appearance settings.

    • Sorry for linking to my site specifically – if it’s not obvious, I just copied and pasted from my bookmark.

      Also, in case this wasn’t obvious either, this will work on any WordPress installation, not just mine.

      ; )

    • Jeff Starr

      This is great stuff! Thanks for sharing this method with us :)

  10. I can’t believe I’ve never heard of this site before! I just found your blog today and I’m very impressed with all of your articles, keep up the awesome work guys!

  11. Montana Flynn December 28, 2009

    What about theme options? I can only set the default theme’s options and not the theme I am testing.

    • Jeff Starr

      Another good point, and something I have been meaning to investigate. There must be a solution for working with theme options during private theme development..

    • Jeff Starr

      Good news! Just discovered that the NK Theme Switch plugin discussed in the article actually provides an option for switching the theme in the Admin area. This makes it possible to set theme options, page templates, and everything else.

  12. RA Retouching December 29, 2009

    Thanks for the tips! I didn’t realize they had plug-ins for theme switching. I’ll have to give them a shot.

  13. Thanks so much for this post. I had been waiting for this one for some time and this one is great! Happy 2010!

  14. I’ve recently released a theme-switching plugin called ThemePerPost. It would help out with developing a theme without live users seeing it.

    To use a different theme for one (or more) posts or pages you simply need to add a custom field to that post or page with the name of the theme you want to use.

    http://wordpress.org/extend/plugins/themeperpost/

    Cheers,
    Steve.

  15. I took this a step further and included a bar at the top of the page that allows you to switch between the live theme and a development theme when logged in.

    http://inspectelement.com/tutorials/create-a-wordpress-theme-development-environment/

  16. Natalie Lestini February 3, 2010

    Totally newbie question with this, but can something like the NK Theme switch be used to develop not only a different theme (ie look and feel) but a completely different site with new content, areas etc?

    In other words, I have a very basic default theme currently live that amounts to a basic information page and that a new site is coming. Using the Theme Switcher plugin, can I be developing this new theme with a new look and feel as well as all new pages, areas, page templates (noting your page template issue above), plugins etc.

    The theme switcher doesn’t interfere with anything on that end does it?

    Sorry for such a basic question, but trying something new based on the great info I find on this site. Many thanks.

    • Jeff Starr

      Correct, using the NK Theme switch will not interfere with the building of your website. Essentially the only thing the plugin is doing is “skinning” the front end of your site with a particular theme. Behind the scenes, everything runs just the same.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry