Make a Copy “Dev” WordPress Site for Redesign

If you need to do a major redesign job on a WordPress site – either for a client or for yourself – it’s best to copy the whole darn site and work on it in private.

live site vs. dev site

Once the site is copied and invisible to the rest of the world, you are free to go crazy on it. You can play around on the “dev” site’s redesign and functionality while your live site remains the same.

There are two ways of “working in private”. One is by installing MAMP for Mac and XAMPP for Windows and setting up the server environment locally. The disadvantage of this is only you can see it. You can’t show off your new design nor get others to test it.

The second is by creating an exact copy of your site on the same server, usually in a .dev subdomain. This is a great way of doing things as you can work on the site in private and your friends and/or clients can look and test it during development.

copy live site to dev site

Create a .dev subdomain version of your site

If don’t have cPanel or you’re unable to take any of the following steps, please consult your host. And, first of all, back up all your files. The following video shows copying a client’s site onto a subdomain using cPanel. (I show the reverse process in another video further down this page).

In order to make a subdomain copy of your WordPress site with cPanel you need to do the following:

1. Create a dev subdomain on your host (eg www.dev.mysite.com). This can be done through cPanel.

2. Copy all the files from your live site to the folder that houses the dev subdomain. This includes all your WordPress files, the .htaccess and anything that’s currently on the root folder of your site (sometimes called “public_html” or “http-docs”).

3. Make a copy of the WordPress database. This is the database that is specified in your wp-config.php. Export it from PHPMyAdmin, create a new empty database with the same user and password, import the old one to this.

4. Change the database name in your wp-config.php to the new one.

5. Add the following lines to your wp-config.php:

define('WP_SITEURL', 'http://dev.yoursite.com');
define('WP_HOME', 'http://dev.yoursite.com');

6. Your dev subdomain should now be working. Go ahead and log in to the backend with the same username and password as you use on the live site.

7. If you’re going to be uploading new images through the WordPress media uploader, go to WordPress > Settings > Media and have a look under “Store uploads in this folder:” you may have to update the path to the new dev site root there.

Now you have a complete copy of your site with it’s own database. You can change the static pages, the widgets, the menu, the theme, anything. The public-facing live site will be unaffected by what you’re doing to the dev site.

develop test site

Redesigning and developing the dev site

Now you have a copy of the live site to play with. Remember, before you do, to add some sort of password-barrier to the site so that so one can see it. I use the UnderConstruction plugin. This is particularly good when redesigning with clients as they will know exactly what they’re getting.

The above method creates a new database for the dev site for making wholesale changes to the site. The advantage of copying the database means you can create new pages, widgets and theme settings and they will all be saved on the database for easy transition to the live site when the time comes.

The disadvantage of copying the database is that the dev database will NOT contain any new posts or comments that have been written during development. These either have to be copied manually after going live with the new design or imported from the other database.

move dev site to live site

Finally, moving the dev site to the live site

This process will hopefully be more simple.

Check out the video above which shows me move the dev site to the live site on my client’s host. As I’ve said above, I’d made multiple changes to the static pages, the widgets, the menu and changed to the Genesis theme framework. So I had to use the dev site’s database on the new site. This meant that new posts on comments on the live site needed to be replicated.

1. Copy the files from the dev folder to the live site’s root folder. It may just be a question of updating the /themes/, /uploads/ and /plugins/ folders of /wp-content/.

2. Amend wp-config.php. Change the name of the database to the one you’ve been using on the live site.

3. Delete the following lines from wp-config.php:

define('WP_SITEURL', 'http://dev.yoursite.com');
define('WP_HOME', 'http://dev.yoursite.com');

4. Your dev subdomain should now be working. Go ahead and log in to the backend. It may be necessary to go to WordPress > Settings > Media and have a look under “Store uploads in this folder:” and update the path to the live site’s /wp-uploads/ folder.

Troubleshooting

If something can go wrong it probably will. If this is the case here are a few things you can try:

  • Dev site doesn’t work period? Check the .htaccess in both the live site’s root and the dev site’s root – there may be a redirect that’s causing issues.
  • White screen of death? Can you login to the backend? What are the error messages? Try disabling plugins.
  • Are the links in your dev site going back to your live site? If so, these are probably hard-coded links so don’t worry. And don’t bother changing them.
  • Are you having problems uploading images through the WordPress image uploader? Go to WordPress > Settings > Media, have a look under “Store uploads in this folder:” and update the path to the correct /wp-uploads/ folder.
  • The home page works but none of the other pages do? Go to WordPress > Settings > Permalinks and put them on default and then back again to custom. This sometimes gets you out of a jam.

You can do it

Creating a “mirror” or “dev” site is a great way to redesign a site. You can make your mistakes in private and the client can see what they’re getting.

Remember, the client should know exactly what they’re getting before embarking on a redesign, otherwise inviting a client to view a dev site can cause “brief creep”. Be careful!

If you’re doing a big redesign, I suggest giving this method a try. And, if you do, let me know how you get on. :)

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    Absolutely fantastic video Rob. The next time I do a major change this is the video I’m going to.

    Out of curiosity, have you ever tried the WordPress plugin called Theme Test Drive? I’ve considered it, but now you have made your approach really easy to follow I don’t suppose I will risk it with a plugin.

    • says

      Hi David, no I’d never even heard of Theme Test Drive plugin, it looks pretty useful, although it seems similar to the “Live Preview” option in the WordPress Themes area, but I’m sure it does more. The advantage of creating a copy site is that you can change the content of the static pages and the widgets, etc., which I find you usually need to do with a wholescale redesign.

  2. says

    Yeah, absolutely Rob. I think your way is best even if you’re not messing with widgets.

    Even with new sites I prefer to put up a coming soon page and work on the actual hosting environment where possible.

  3. Oksana Frewer says

    Thanks, Rob. I think I’ll give it a try! I can finish building my website using this method with a dev subdomain and use “UnderConstraction plugin” for live site. But I have to move all files from MAMP.

    • says

      If it’s a new website, Oksana, you could just use the UnderConstruction plugin on the root domain rather than creating a dev subdomain? Up to you, though. And let me know if you need any help.

  4. says

    A good insight Rob, I think one of the most important things when working as a web developer is to have a process in place for situations like this. When I first started out, I would carry out each migration, copy or site move in slightly different ways – they always worked out, but perhaps more by luck than good judgement.

    Nowadays I have a set process I follow, a lot like you have outlined in this article which saves me time and makes sure these sorts of tasks work out well each and every time.

  5. Kevin says

    Hi, thanks for the tips.
    The only problem is we cannot update the path of the uploads folder from UI anymore. How can i do that ?
    Cheers

  6. says

    Very good video, Rob. I have made a copy on my .dev in my cPanel. Testing to see if I can “duplicate” this before I can make the real website of the client.

    However, when it came to config section, I got lost…I need to see your video over and over again. Maybe I am just tired and need to retire for the night.

    Thank you so much for sharing me this video. xoxo

    Angela

    • says

      The config section is where mistakes can occur. You have to get the database, username and passwords correct. Sometimes the cPanel adds a prefix to the database and username which you have to get right in the wp-config.php.

      Let me know if you need any help.

  7. Dolce says

    Hi Rob,
    This is the easiest instruction by far. I made a mistake of creating a new website without a staging/dev environment and now I have to go back. You mentioned that a subdomain might not be needed for a new website, how do I insert “UnderConstruction plugin on the root domain.” Thank you, Dolce

    • says

      Hi Dolce, you install the UnderConstruction plug-in in the WordPress administration area of the website you want to apply it to. Does that answer your question?

  8. says

    Hi,

    I have followed the video, but all I get is a “The website cannot display the page” http 500 error – both when I try to view the dev site, and when I try to login to the backend. Any suggestions on what I may have done wrong?
    Thanks

    • says

      Hmmm, I’m sorry, Leah, I assume a test HTML page works in the dev site? I’m sorry, it’s hard to say because it could be so many things. I would advise you to ask your host after explaining all the steps you’ve taken. Let me know how you get on.

  9. says

    Hello Rob,

    Thanks for this great advice. I am still having link problems. I can access the admin panel and can also visit my home page at dev.romalc.org, but I can’t click on any links since i get redirected to the home site url. I have tried everything that you mentioned above, including resaving the permalinks and changing the .htacces file with the file that they the permalinks page recommends. I think that my problem is that my site was already a multisite. The original wp-config file had the multisite code, but I took this out when I added the two lines of code that stipulate the name of the site and the home site url. Is there anything else I can do? Thanks for the help!

    • says

      Hi Kyle, I’m sorry I can’t help you more.

      It maybe a issue with your site previously being a multi-site. I’m afraid I don’t have much experience with multi-sites.

      You say you are being “redirected” to the home site. I would check the .htaccess files both in the root of the server and in your dev site directory as there could be something that’s causing this.

      I would add an underconstruction plugin or protect the dev site from public view as it’s duplicate content otherwise which Google “doesn’t like”.

  10. AJ says

    Hi Rob,

    Great tutorial – the copying worked flawlessly. I can see my dev. site, however when I attempt to login to dev.siteurl.com/wp-admin, I am redirected to the original/live site and end up logging in there. Any ideas?

    • says

      Hi AJ. Sorry you’re having this issue. I remember this happening to me but I can’t quite remember why. Did you remember the step to put those extra lines in the wp-config.php of the copy site? Otherwise, it could be an .htaccess issue. You could ask the host (sometimes works). Let me know.

      • AJ says

        Hi Rob,

        Thanks for your reply. I was able to fix it – and yes, I followed everything you’ve written and added those lines.

        Here’s what I did:
        1. I did have some beefed up security on my .htaccess – so I deleted that
        2. I went in to the wp_options table in the sql databse (on the dev site) and change the URL to the dev. site’s URL.
        3. I cleaned my browser cache – just in case it was trying to be overly helpful
        I did contact my host, who had no trouble seeing the dev site – so they weren’t all that helpful in my case.

        Anyways, I’m well into the redevelopment of the site and will be able to go live using your fabulous tutorial. Thank you so much for this resource.

        Amanda

        • says

          Thank you so much for getting back to us, Amanda, it’s so useful for other people who are experiencing the same issue. It’s funny, I thought those two lines in the wp-config.php over-rode the site URL in the database. Anyway, what’s important is you have a fully-functioning dev site to play around with to your heart’s content! Thank you again. Rob

  11. Sean says

    Hi Rob, this article really helped me out so far, but I’ve got one question.

    What is your advice on the uploading new images step given that WordPress has now removed the “Store uploads in this folder” control from the settings menu?

    • says

      Glad this helped you, Sean, I’m not really sure what you mean. Where’s that setting in WordPress? As far as the images are concerned, you just need to FTP them.

      • Sean says

        In step 7 when you say:
        “If you’re going to be uploading new images through the WordPress media uploader, go to WordPress > Settings > Media and have a look under “Store uploads in this folder:” you may have to update the path to the new dev site root there.”

        The latest version of WordPress has removed that feature. I had a quick look around online and a lot of WordPress users seem angry about it too. The only explanation I could find for why it’s gone is that apparently it was a feature very few people used and so they got rid of it to simplify the interface… or something. Seems pretty inconvenient :(

  12. says

    Hi Rob,

    This is a fantastically useful post, many thanks! I have spent the last couple of weeks doing all the design updates for the new website on the dev server, and have just moved everything to live. It’s all working a treat, but I had an issue to overcome: in Step 2 of Moving the Dev site to the Live site, you write:

    2. Amend wp-config.php. Change the name of the database to the one you’ve been using on the live site.

    But that did not work. In fact in order to see the new site I needed to keep the name of the database which I’ve been using on the dev site – which had all the new info.

    It’s all up and running now, but I wonder – did I do something wrong?

    • says

      No, Kay, that step is up to you! This was written for a site that was being updated whilst I was developing so I had to use the live database as it had been updated with new posts and comments. However, you are right. If you just migrate the new theme but stick with the old database you’ll have to recreate several steps that you did on the dev site, for example, widgets.

      Glad to hear you found a useful way of redeveloping and redesigning a WordPress site.

      Funnily enough, I’m doing the exact same thing on this site at the moment! I’m doing a redesign which should be live in a couple of days!

      • Kay Grant says

        That’s great, thanks for the confirmation. This process has been a lifesaver and I will follow it for all my sites from now on.

        The one bug I had in the end was that the images I’d added for my new posts were still pointing to the dev server. I had to go in and change the image paths manually in my posts. Luckily I didn’t have many images. If so, the easiest option appears to be the plugin Velvet Blues Update URLs, 4.9 out of 5 stars:
        http://wordpress.org/plugins/velvet-blues-update-urls/

        Many thanks again.

Leave a Reply

Your email address will not be published.

Notify me of followup comments via e-mail. You can also subscribe without commenting.