How to Develop WordPress Themes Behind the Scenes

Posted by Jeff Starr • Updated on February 7th, 2017

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 (including my own free plugin, Theme Switcha):

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 my own Theme Switcha plugin. Theme Switcha 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. Some of the other plugins always redirect the user to the home page after they switch themes.

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 Theme Switcha, you can select and activate your alternate (development) theme from within the WordPress Admin Area. 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 most of these plugins:

http://example.com/?theme=my-awesome-theme

The syntax here is straightforward — the only thing that needs to be changed is the theme name, which in this case is my-awesome-theme. 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 ↓

About the author

Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.

View all from Jeff Starr

← Display Gravatar & Autofill Fields for Previous Commenter

The Book, in Print! →

27 responses

Francesco

December 23, 2009 @ 8:15 am

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

December 23, 2009 @ 7:19 am

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 Post Author
  
  December 23, 2009 @ 11:05 am
  
  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 @ 11:57 am
  
  Would using a framework and creating child themes fix the page template problem?
  - Jeff Starr Post Author
    
    December 28, 2009 @ 3:42 pm
    
    Interesting idea — I will give it a shot next time around.
Jeff Ivany

December 23, 2009 @ 7:58 am

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 Post Author
  
  December 23, 2009 @ 11:00 am
  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.
A

December 23, 2009 @ 9:14 am

I suppose setting up a dev environment is out of the question?
- Jeff Starr Post Author
  
  December 23, 2009 @ 11:01 am
  
  That works too, but was not the point of this article :)
Luis Rivera

December 23, 2009 @ 10:16 am

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

December 23, 2009 @ 11:44 am

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

December 23, 2009 @ 11:58 am

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!
Rachel Nabors

December 23, 2009 @ 3:10 pm

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!
Michael Schoonmaker

December 23, 2009 @ 7:16 pm

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.
- Michael Schoonmaker
  
  December 23, 2009 @ 9:49 pm
  
  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 Post Author
  
  December 24, 2009 @ 6:21 pm
  
  This is great stuff! Thanks for sharing this method with us :)
Blogger Den

December 23, 2009 @ 8:23 pm

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!
Montana Flynn

December 28, 2009 @ 5:12 pm

What about theme options? I can only set the default theme’s options and not the theme I am testing.
- Jeff Starr Post Author
  
  December 29, 2009 @ 2:09 am
  
  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 Post Author
  
  December 29, 2009 @ 4:39 pm
  
  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.
RA Retouching

December 29, 2009 @ 12:10 am

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

January 5, 2010 @ 11:07 pm

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

January 9, 2010 @ 5:26 pm

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.

Cheers,
Steve.
Tom Kenny

January 12, 2010 @ 5:55 am

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.
- Jeff Starr Post Author
  
  January 12, 2010 @ 10:42 am
  
  Looks awesome, Tom — thanks for sharing!
Natalie Lestini

February 3, 2010 @ 8:20 pm

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 Post Author
  
  February 6, 2010 @ 9:19 pm
  
  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.