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.
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.
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.
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.
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. π
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.
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.
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.
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.
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.
Thank you Rob! Ok then, I will follow your advice: that is my brand new website.
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.
Thanks, Craig. I absolutely agree to developing and remembering set processes. In fact, that’s one of the reasons why I create videos of them! π
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
Ok, found a way. But my dev website is still calling images from my live website domain. Why is so ? π
How did you find a way, Kevin? Did you try the Find/Replace on the DB?
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
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.
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
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?
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
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.
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!
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”.
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?
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.
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
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
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?
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.
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 π
Ah, thanks, Sean, I wasn’t aware of that. I see there’s a bit of code you can put in wp-config.php to specify the folder. π
Yes I came across that in my travels just recently too, quite a few plugins popping up to re-introduce that feature back as well. Just starting using one at random and it’s done the job.
Thanks again!
Good to know that a plugin works. Here’s the wp-config.php fix http://www.wpbeginner.com/wp-tutorials/how-to-change-the-default-media-upload-location-in-wordpress-3-5/ π
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?
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!
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.
Glad it’s all working, Kay. I’ve heard good things about that plug-in. You can also run find/replace queries in PHPMyAdmin to the MySQL database.
Hey Rob,
Great video.
However, after following through the video I got everything up and running; dev site showing with correct urls etc. However I had two problems. It seems the featured images of the articles weren’t showing, and the user names didn’t transfer over. I can’t login to the backend of the dev site and it doesn’t recognize my username.
Would you know what would cause this?
I noticed that the wp_user and wp_usermeta tables were not copied across.
Copying them now… would you know why that was?
Sorry, Craig, I don’t know why it wouldn’t have copied those tables or why you can’t login to the dev site. To get the featured images showing, import them into the WordPress post again and they will regenerate. If there’s many you can use the Regenerate Thumbnails plugin. Hope this helps.
Rob
Very nice tutorial, thank you.
I am stuck on the create a new database phase, but I know it’s me and not your tutorial.
I’m not sure how to find the wp-config.php file in the PHPMyAdmin tool. I have a couple of sites on my hosting account, but nothing looks familiar in the sidebar. So that’s my first concern.
And for the password and username, is that the same for when I sign into Cpanel? Or is for when I created the add-on domain for the site I’m developing?
I contacted my host Site Ground and received some excellent guidance on how to do this. I needed to find the database name for the main website I’m wanting to copy. It’s in the wp-config.php file. In the PHPMyAdmin sidebar, you just select that database to export. It looked like Greek to me until I understood those are database names.
:o)
Exactly, Carla. It all looks like Greek… until you get the hang of it