Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using Wordpress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.
With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress. We’ll do this by creating a bar at the top of the page which will clearly show you if you’re viewing the live theme (what everyone else sees) or the development theme with a link to switch between the two.
While there may well be a Worpdress plugin that does everything below, it’s much more rewarding and satisfying to create your own solution.
Step 1: Install Theme Switcher WordPress Plugin
First step is to install the aforementioned plugin, Theme switch and preview. You can access the configuration for Theme Switcher in the settings section of the WordPress admin sidebar on the left where you can also find a list of all the available themes.
Screenshot of the themes installed on Inspect Element as seen in Theme Switcher's settings.
By clicking any of the links above, you can switch between themes without activation allowing you to see what a different theme looks like without affecting what your visitors sees. They will still see the activated theme.
Step 2: Create a Copy of the Current Theme
This is as easy as just duplicating the theme folder in you WordPress theme directory. Make sure to change the name of the theme as it is what Theme Switcher relies on to distinguish between installed themes.
You can see from the screenshots above that Theme Switcher uses the ‘Theme Name’ but WordPress also picks up on this in the Themes section of the admin area so it’s a good practice to stick to with for any theme. Here I’ve added dev in brackets to use for my development theme.
Step 3: Add the Dev Bar to the Live Theme
One of the best ways to indicate what theme you’re viewing is to add a colour coded bar at the top of the page when logged in. We need to use a bit of PHP to determine if you’re logged in. Open up the header.php file in your live theme and paste in the following code directly below the <body> tag.
<?php if ( is_user_logged_in() ) : ?>
// Insert dev bar code here
<?php else : ?>
// Nothing here
<?php endif; ?>So that’s a simple bit of WordPress PHP to see if you’re logged in or not expressed as an if else statement. Of course you’ll want to include some HTML for the bar itself. We’re going to insert a div and a link to the dev version as well as a title.
<?php if ( is_user_logged_in() ) : ?>
<div id="devbar" class="live">
<p>Live Site</p>
<a href="<?php pageURL(); ?>?theme=Inspect+Element+v3+%28dev%29">Switch to Dev</a>
</div>
<?php else : ?>
// Nothing here
<?php endif; ?>For the link to the dev theme, you need to go back to the settings page for the Theme Switcher plugin and copy the link your development theme. This is the link you’ll use in your live dev bar. There’s one small amendment to make here. Replace everything before the ?theme= with a function that gets the current url so that you’ll remain on the same page when switching between themes.
For this to work, you need to open up the functions.php file in your live theme and paste in the following code:
function pageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {
$pageURL .= "s";
}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
}
else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}Source: How to get the current URL of web page in PHP (Note: I’ve changed the name of the function from kish_trans_curPageURL to pageURL to keep things simple.)
Step 4: Add the Dev Bar to the Development Theme
Follow the same as above but this time insert the code into the development theme files. Also you’ll need to modify the code in the link on the header.php to go back to the live version.
<?php if ( is_user_logged_in() ) : ?>
<div id="devbar" class="dev">
<p>Development Site</p>
<a href="<?php pageURL(); ?>?theme=Inspect+Element+v3">Switch to Live</a>
</div>
<?php else : ?>
// Nothing here
<?php endif; ?>Step 5: Style the Dev Bar
Obviously you have free reign to do what you want here with any CSS you want with any code you’ve chosen to use for the dev bar. We’re going to give the dev bar a red background and make it span the width of the browser.
#devbar.live { background-color: red; width: 100%; height 50px; }Now you’ll want to make the bar on the live site look different to the development site so that you know which one you’re on at a quick glance.
#devbar.dev { background-color: green; width: 100%; height 50px; }Place these in the respective CSS files for the live theme and the development theme.
Additional Styling
Something that I like to do is to use the ‘logged-in’ class that WordPress appends to the body tag when you’re logged in to add an extra visual guide for each theme.
In the live theme’s CSS, I’ve I like to add the following:
body.logged-in { border-left: 30px solid green; }And in the development theme’s CSS:
body.logged-in { border-left: 30px solid red; }This gives a big visual indicator of what theme you are currently viewing. If there is a big green bar on the left, you’re seeing what your visitors see and if the bar is red, you’re viewing the development version. This comes in very handy when you scroll down the page and can no longer see the dev bar.
The screenshots above (click for larger versions) show how I’ve implemented this into Inspect Element with the use of some extra CSS styling and a couple of icons.
Step 6: Temporarily Hide the Dev Bar with jQuery
There will be times where you want to see your site without the dev bar and border on the left just as people on the outside see it. The simplest way of achieving this is to use some basic jQuery. The following is code I’ve implemented to hide the dev bar and the border on the left when the paragraph (‘Live Site’ and ‘Development Site’ text) of the dev bar is clicked.
<script type="text/javascript">
$(document).ready(function(){
$("#devbar p").css('cursor','pointer').click(function () {
$("#devbar").hide();
$("body.logged-in").css('border','none');
});
});
</script>Simply put, this code hides the dev bar and removes the left border on the body when you click on the #devbar p element in the dev bar. You may consider adding a button dedicated to this function instead.
It’s best to place this within the code that determines if the dev bar should be shown as in step 3. That way it will only load when the dev bar code is available and not when it isn’t needed. Also, don’t forget you need to include the jQuery library if your site doesn’t already, or this part won’t work.
Bring the Dev Bar back with Keyboard Shortcuts
What if you want to bring the dev bar and left border back? It will return either when you refresh the page or navigate to another part of the site but we’ve hidden it with jQuery, so why not bring it back with some additional jQuery in the form of a keyboard shortcut.
The following code will hide the dev bar and remove the left border when the letter ‘N’ is pressed and bring it back when pressing ‘Y’.
<script type="text/javascript">
$(document).bind('keydown', function(evt) {
switch(evt.which) {
case 78: // letter 'n'
$("#devbar").hide();
$("body.logged-in").css('border','none');
break;
case 89: // letter 'y'
$("#devbar").show();
$("body.logged-in").css('border-left','30px solid #972324');
break;
}
});
</script>Create Your Own
Ideally this is meant for designers who run their own site or manage an existing client’s site through WordPress. I’ve only been using this for couple of days now and already it’s made a world of difference whenever I want to make any changes but need to test before making them live.
Really useful tutorial. I plan on doing a redesign sometime this year and I have bookmarked this post as a reference when that time comes. Thanks Tom!
I always run my development websites on a staging server. Really useful tutorial. Thank you.
First of all worthy tutorial for minor tweaks. It’s always better to do all the development tasks with xampp.
Interesting, but this can be done way easier. Just install the ‘Theme test Drive’ plugins and yout can select a different theme for logged admins (or any other user acces level..) and you can start modding.
Normal visitors will stil see the selected theme, you get the test drive theme.
I didn’t know that existed but as I mentioned towards the beginning of the tutorial, it’s much more rewarding to come up with your own solution and you’ll learn more too.
Ofcourse, that`s true. I really liked the way you worked this out and i`m gonna try it myself soon.
I just mentioned, there is an easier way to accompish the same.
Keep it up!
and you will loose your critical resource -> Time
really cool I will be trying really soon.
This is really neat. TBH I’m quite lazy and sidestep any avoidable work. I can see this is useful in certain situations however. I’d opt for @Tim suggestion and go for the quick and easy approach of installing a plugin. The themeswitcher plugin is also very swish, I bookmarked it months ago incase I needed it. Again Tom great post, bookmarked FFR.
I can see this might be a nice idea for some simple situations but isn’t going to replace having a proper, separate development server in many cases. When working on an upgrade, I usually find I need to make changes to the database side of the site, such as adding a new category or new page. In that case it’s not a case of just switching the theme.
Would be nice to create some kind of plugin or script that helps with syncing live and dev versions, automating all of the MySQL queries I always end up running through PHPMyAdmin. Wonder if there is a tool like that somewhere.
That’s true but this is really meant for theme development rather than big underlying changes.
Thanks for the lesson. I’ll put it to use soon. Take care.
You always give great info and we have used some of your content.
Thanks
This is exactly what I’ve been looking for. Really could have used this last week but I’m glad I know it now for the future. Thanks for this!
Thank you very much. I’ve been looking for so long finally found this here. Now I can finally develop my themes without the necessary too install multiple copies in my localhost. A must bookmark for Wordpress themes developer.
Thank you very much! This plugin is just what I needed for my theme demo site.
Hi..thanks for share, we looking for this tutorial for development our site next..
Hey Tom,
This is one of the coolest ideas and tutorials i have read for a while, greatly approached and written which makes such a change from the usual regurgitated wordpress hacks/tutorials we see published across multiple blogs each day.
This little tutorial has saved me tons of time now when developing for wordpress, one of the more useful post’s of 2010 for the wordpress user/developer in my opinion, thanks for sharing your knowledge and i look forward to future posts here
just nedd to say that design of blog is excellent
You could combine this technique and using the sandbox theme:
http://www.plaintxt.org/themes/sandbox/
It is a bare bones theme that you can use as a basis for multiple themes… the way it works is that you have the sandbox theme in the themes folder, and then you have another theme that references sandbox, and builds from there.
That way, you don’t have to redo all of the structural code that you want to keep in place – just modify your css, and add whatever extra templates you want.
(in case you were wondering, I don’t work for the sandbox folks – I am just a fan)
While this is a cool trick, I think the best way to develop is to have a local wordpress installation that mirrors your remote one. Development work can then be done offline in the sandbox of your hard drive. When satisfied with the work changes can then be uploaded to the server and go live.
Something that I have recently learned is how to version control my local wordpress install with Git. This is certainly taking it to the next level and isn’t for everyone, but it allows you to develop tweaks and versions of your site while still preserving a master version of your site.
My development server is on my local machine as well. However, this tutorial by Tom is pretty useful too. I might try it out to have a feel of it.
Often, for small changes, I’d use Firebug to do it and I could see the changes immediately whether I’m doing the right thing or not before proceed to make the real change.
Les James, what do you think of Git? Version control is cool. I wonder does it behaves similar to SAP that have version control as well.
I prefer to use a separate installation, with test content and such, so I can test all sorts of different scenarios. Also, if I mess up, my live site remains unaffected.
Good post – I like the dev bar tips!
Excellent article for the theme testing. i liked it. it is better to display some messages when there is development going on in backend.
Hi, I’ll have to give this a try! One thing I also do is to have a webserver running on my notebook/laptop and keep a working copy of my blog on my laptop. I can make changes on my laptop and see the affects and they’ll be pretty accurate to what will happen when I upload the changes to my real server. I thought of this when I overheard a very expensive, local web designer, complaining to one of her clients that her client’s web host didn’t give her a test IP! I thought, why the heck would you need this when you’re running a really topped out MAC; just start your webserver and browse to localhost!