Posted on Saturday, May 13th, 2017 No Comments
A WordPress Development Environment Idea for Major Overhauls on Active Websites
If you work with WordPress, you’ve probably needed to redesign a WordPress website at one point or another. Sometimes that can be pretty straightforward. If the website is small without much traffic, you might be able to get away with putting up a temporary splash page while you switch to a new theme and make minor updates.
But in other cases, you might need to do a much more complicated website overhaul. If you’re tasked with major updates to an active website that can’t be taken offline (because that will result in a loss of revenue, orders, or leads), you can’t just start swapping out themes and making other changes willy-nilly. You need a WordPress development environment where you can create the new version of the website separately from the old one that’s currently online. Then, you’ll need to launch that new website, replacing the old one with the new one.
This entire development idea makes a few assumptions that you’re working within a given scenario:
- You’ve got a current, active website on WordPress that’s installed in the root directory (we’ll call this example.com).
- You want to develop a new version of your website in a subdirectory (we’ll use example.com/wp/).
- Once your development is done, you want the website at example.com/wp/ to appear to be at example.com. So, anyone who visits example.com will see the website you’ve created within the /wp/ subdirectory.
- Bonus: You can keep the old version of WordPress around just in case you want to revert back to it.
There are two main development scenarios that I’ve used. I don’t know how commonplace these are, but I think they’re probably the methods other WordPress developers would use as well. (But who knows, I’m not the world’s top authority on anything.)
Option 1: Develop Locally & Publish Later
In this case, you’d install WordPress on your computer and develop the new version of the website offline. Later, you would publish it where your website currently lives.
That might look like this:
- Install WordPress on your computer with XAMPP. Here’s a great tutorial.
- Import all of the content from the current website into your local WordPress.
- Make all the changes you want.
- Clone your local WordPress installation and database back to the online website location. Here’s a guide that could help you do that.
- This feels nice and safe because all of the development is nowhere near your current website.
- This could be better if you use a version control system like Git (although I usually work by myself for small companies, so I’m not an expert on that.)
- What if you’re doing this for a client who lives on the other side of the country? You’d have to somehow show them your own computer every time you wanted to demonstrate progress updates. You could use Skype to share your screen, but then they can’t view the website on their own.
- Even if you just want to show your work to someone in your office, they can’t see it on their own computer.
- You can’t fully test everything. There’s always something that behaves differently online than in your local WordPress installation.
Option 2: Develop in an Additional WordPress Installation & Later Replace the Current Website
Let’s say you’ve got an active website at example.com. You could install another copy of WordPress in a subdomain or a subdirectory. Say, at example.com/wp/. Once you do that, you can develop an entirely new site on the same server where your current website lives, and you can later point that version of WordPress to your root directory so it replaces the old website.
That would generally be done like this:
- Create a subdirectory called /wp/
- Install WordPress in it normally.
- Develop the new version of your website.
- Once the new website is ready, point the WordPress that lives in /wp/ to the root, effectively replacing the old website that lives in the root directory. You don’t even have to delete WordPress from that root.
- You can show clients or coworkers the development site simply by telling them to look at example.com/wp/
- You don’t ever have to move the WordPress files or database. They will stay right where they are.
- This doesn’t require any special plugins (just the usual WordPress Import/Export function.)
- You don’t have to move any databases.
- You don’t have a local/offline version of the website. However, you could always make a local copy once you’re done with development.
- You have to be careful not to let search engines index your development website until you’re ready to replace the old website with your new website. (That’s easy, though, and I’ll mention it in the instructions below.)
- You essentially have to redo the entire website, but that’s what this is for—major overhauls.
I’ve done this with two huge website re-build projects. I like this method because I can get a new, fully functioning website developed online and then I can just swap it out for the old website. For the rest of this article, I’ll tell you how I did it.
How to Develop a New WordPress Site in a Subdirectory and Then Point it at the Root
The following is the general process that you could perform to achieve Option 2 from above.
Don’t take any of this as some kind of WordPress gospel. I am largely a self-taught person, and I figure out what I want to do through research and trial-and-error. This method might not be the best solution for you.
1. Install WordPress in Your Subdirectory
Go through the same process that you would if you were installing WordPress into your root directory.
- Create the directory
- Install WordPress in it following the usual instructions
- Update your robots.txt file to disallow indexing of this site for now. Add a line that says Disallow: /wp/
2. Import Content from the Current/Old Website
- On your current website (which we might as well start calling your “old” website) in the root directory, login to WordPress and export all of your content.
- On your new website (in the /wp/ subdirectory), login to WordPress and import all of the content.
No need to mess around with the database here. You’ve already moved over everything.
3. Develop Your New Site
Now, do whatever you want to do in regards to developing your new website.
4. Launch! Point Your Subdirectory WordPress to the Root
This is the interesting part. It’s easy enough to find instructions on how to give WordPress its own directory, but I couldn’t find any instructions on what to do if you already had WordPress installed in the root directory.
Here’s what you do:
(First, make backups of everything.)
- Login to WordPress in your subdirectory (at example.com/wp/)
- Go to Settings > General
- Change the Site Address (URL) setting to where you want the website to display (example.com, in this case). Leave the WordPress Address (URL) as it is. Click Save.
- You’ll see a 404 error on the front end now. That’s normal.
- Go to your root folder and edit the index.php file. Change this line: require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ ); To this: require( dirname( __FILE__ ) . ‘/wp/wp-blog-header.php’ );
- Remember to update your robots.txt file so that you don’t continue blocking crawler access to the website.
Step 5 is the key. It tells WordPress to look to your subdirectory for how to display your entire website. Even though your old WordPress installation still exists in your root directory, it’s completely ignored since you’ve told WordPress to look at your subdirectory instead.
You do not have to edit your .htaccess file. If you were only installing WordPress in a subdirectory, and there was no WordPress installation ever in your root, then you would have to copy the .htaccess file from your subdirectory to your root. However, you already have an .htaccess file there, and there should be no reason to move or edit it.
I hope all of that made sense! It took me a while to figure out this process on my own. I hope it will help someone else.
Note: This post originally appeared on ZenWebThemes.com, but I’ve since taken that website offline and moved some of the popular blog content over to this website.
Posted in WordPress.