How To

How to customize your WordPress Theme on a live site

I think at some stage we all want to renovate our sites.  You may want to change the entire layout of the site to make it more in keeping with what your visitor analysis tells you, or you may just want to change some colors, logos and graphics, or it may be a full scale renovation.


How do you change your theme, while your site is live, without visitors seeing the state of disarray?

There are quite a few solutions.

1)  if you are only changing a font, color or something easy you can put your site in maintenance mode or use theme switch.      The problem with using theme switch and preview is that if you are using a theme with theme options the plugin doesn’t display the options panel unless it has been enabled at least once.

2) set up xampp  or a wamp server on your computer and modify the theme from there.    You will need to install all the plugins that your current sites uses as well to do this and add some content so you get the true feel of your site. One problem that you may experience, when you finish modifying and install the new customized theme that there may be server incompatabilities.

Read more about installing wamp on your computer here.

3) set up a test bed on the same server that your site is hosting.  This way you know it is in the same server environment.   I usually do this via  a sub-domain or a directory and I clone the entire site using WP Twin.   This is what I chose to do and I prefer to set up test sites usually to test anything – plugins, new services, WordPress updates or themes.

Step 1

Using WP Twin I take a cloned copy of my original site, install  a new blog via fantastico on a directory or sub-domain and deploy the cloned site.   Now I have a true clone of my site that I can work on.  A clone of my site gives me a real feel for how things would  look on the live site.

The only problem with doing a complete clone is the size of your site and how fast your server is.   My clone took about three hours to load up!   (gave me time to do some housework while I waited).  Due to issues I was having with the server I also didn’t take my own advice and installed the clone on another site (this decision bit me on the bum later!)

Step 2

I made the customizations to the Canvas theme that I wanted on my test site.    There were a few things that I wanted to change; colors, fonts and I wanted a full width theme.   Once I was happy with the look, I then checked the site on my mobile phone and on an emulator.   Canvas is a responsive theme so I wanted to make sure that it loaded correctly on a mobile platform and check the overall site display and functionality.

Canvas has a theme functions backup which allows you to export any of the theme options you have changed and import them to another site using the theme.  I backed up the theme functions in Canvas/General Options and Downloaded the file for safekeeping (in case anything went wrong).  I then downloaded the  theme that I had customized on the test site from wp-content/themes/canvas.

Just in case anything went haywire I also copied any code or data from my text widgets into a text file so I could paste it in later if need be.

Step 3

Now, it was just a matter of going to my original site and quickly uploading the new theme, activating it and uploading the backup options.  I knew that I would have to do some playing around with the page menu navigation so I quickly switched to maintenance mode (Woo themes have a maintenance mode built in to their Woo DoJo plugin pack but you can also use a plugin from the repository.

I only intended to be in maintenance mode for a minute or so.  If I had anticipated being in maintenance mode for any period of time I would have used the theme switch and preview plugin.    This plugin would allow me to display my old theme to visitors while I did some quick changes to the new theme.

I could also have created a page to test my new theme on and used the Multiple Themes plugin.    This plugin would allow me to display my old theme to visitors and my new theme on a special page that I had set up for testing.   I would use this plugin in conjunction with Theme Test Drive to set the options in the Canvas theme.

Did things go smoothly?  um no

Just after I had switched to maintenance mode to fiddle with the menus and make sure everything looked good – I lost my internet connection.

To make matters worse because I didn’t use the same server as the original site a conflict arose on the new server.   Note: always use the same server!

Finally, my web host thought I was doing something “sketchy” and their in built firewall security ip blocked me.   Basically, I couldn’t access my site.   I was eventually unblocked, for half an hour, only to be blocked again.  Apparently, the matter that was sketchy was uploading a new theme!

By Leanne

My name is Leanne King and I'm an Australian internet marketer and WordPress fanatic. I share my knowledge of WordPress here on my blog, through my products, private coaching and in private forums. In my spare time I like to develop products for WordPress users that are easy to use.Find me on Google+