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

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.

Leave a Reply

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