As a follow up to the first WordPress development environment post, I wanted to offer a solution for running a WorPress network locally.
My decision to run a local website using the real domain is crucial here. As opposed to using http://localexample/ we’ll utilize http://example.com locally where example.com is also the live domain. Many tutorials suggest setting up WP networks locally using subdirectories, but if you’re going to use subdomains in production why would you do something different locally? So the purpose behind this technique is to replicate a production website on a local machine without exception.
Most of the content in this tutorial is applicable to any operating system, but it is written for Windows users and some parts will need to be amended for Mac users.
Editing your hosts file for subdomains
This is a snippet from the first post on how to edit your hosts file, and its still very pertinent for what we need to achieve:
Use your real domain
One of the most annoying things about local development is that most tutorials have you setup
http://localyourdomin/. That means when its time for production you have to find and replace all occurrences of that in your database and files. Lots of room for error there. So let’s just use your real domain:http://example.com(obviously, replace all instances of example.com with your domain).1. Edit your HOSTS file
In Windows, use Notepad to open
C:\Windows\System32\drivers\etc(be sure to “Run as administrator”) . Mac instructions.Add to the bottom of the file:
# 127.0.0.1 example.com #local # 123.4.5.6 example.com #production
- The
#(pound sign) denotes a comment. So everything following the pound sign is ignored. So this example won’t change anything once you add it to the file.127.0.0.1is the IP address of your machine. Replace123.4.5.6with the IP address of your remote server (the one your website is hosted on).#localand#productionare just comments to signify which server goes where.Now, if you un-comment the local server when you try going to example.com your browser will look to your local machine.
NOTE: You can get browser extensions to quickly switch between hosts. Since I do most of my development in Firefox I use HostAdmin.
Use what we did above to create a new line in your hosts file and simply add:
127.0.0.1 aaa.example.com 127.0.0.1 bbb.example.com 127.0.0.1 ccc.example.com
Repeat this for each subdomain on your network for which you’d like to view locally.
Modify Apache for local subdomain access
Copying from the original post, a single domain needs to be added to Apache for it to recognize your domain as a website:
Your computer now knows that
example.comis hosted on your machine, but your server needs to know where your local website is located. Open uphttpd.conf(varies depending on which software you installed, but in WAMP its inC:\wamp\bin\apache\Apache2.2.17\conf). Add to the bottom of the file:<VirtualHost 127.0.0.1> ServerName example.com DocumentRoot "C:/wamp/www/example_com" ServerAdmin you@example.com <Directory C:/wamp/www/example_com> Order Allow,Deny Allow from all </Directory> </VirtualHost>
Since subdomains in WordPress are actually virtual (i.e. no physical directory exists for the subdomain) the subdomains in the Apache file need only to point to the same location as the parent site.
In the Apache configuration file, httpd.conf, we need to add a ServerAlias line that specifies which subdomains should resolve at a specific physical location. Since our VirtualHost is using the same DocumentRoot as our subdomains we just need to add our ServerAlias line to the same VirtualHost. Take what we have above and modify to look like so:
<VirtualHost 127.0.0.1> ServerName example.com ServerAlias example.com aaa.example.com bbb example.com ccc.example DocumentRoot "C:/wamp/www/example_com" ServerAdmin you@example.com <Directory C:/wamp/www/example_com> Order Allow,Deny Allow from all </Directory> </VirtualHost>
The only new line above is: ServerAlias example.com aaa.example.com bbb.example.com ccc.example
Save the file and restart Apache. You can now visit your domain and each specified subdomain locally (comment/uncomment your hosts file as necessary or use the FireFox addon mentioned above).
Let us know how you have your local WordPress network setup or any questions you have.
Very interesting, I’ve always set up my local domains like this:
clientname.dev
…but that just causes headaches down the road and more data to make sure gets changed over. Never thought about simply using the .com!
Exactly! Save yourself the time searching for bad paths in the database.
We do this all the time! :) Except for the domain name, I often use .loc for my local install. Especially if I don’t have to sync things, just test.
It certainly makes things easier to use a different domain or TLD like you are, because I’m constantly switching between hosts to compare local/staging/production. I think its worth it though.
Wow. I literally was coming back to the first post today to ask about this very issue in the comments and here’s the answer. I need to implement this this weekend and you’ve made it infinitely more likely I’ll succeed with some hair left.
Thanks!!
A few questions:
1. Should bbb example.com ccc.example actually be bbb.example.com and ccc.example.com?
2. Does this technique work with subdirectories?
3. Would this work with the domain-mapping plugin so example2.com could map to example2.example.com
4. What if any additional migration hassles are added from this approach to what is describe in the original post?
All there is to it: Server Switcher
https://addons.mozilla.org/en-us/firefox/addon/server-switcher/
a little comment:
you must modify httpd.conf file to enable custom permalinks, really?
it´s an important step that gave me lot of headaches.
i actualliy use appserv
- file is in :C:\AppServ\Apache2.2\conf
- find the line : LoadModule rewrite_module modules/mod_rewrite.so
- delete #simbol
Restart the service
Bye; (sorry my english!)
Thanks for pointing that out. Using permalinks requires
mod_rewriteto be enabled. Most default server configurations have it off, so following these steps will enable it and you’ll be on your way to pretty pretty permalinks.Just found a WP plugin that automatically updates the hosts file when you create or delete a subdomain:
http://www.code-styling.de/deutsch/entwicklungen/wordpress-plugin-wp-xampp-multisite-subdomains
The description is all in German and it says it’s for xampp, but it should work just as fine with wamp. Haven’t used it so far, but will try it when the next multisite project comes round.
[...] How to setup subdomains for a local WordPress network (DevPress) [...]
Instead of having to comment out the # in the hosts file, why not just
use
http://localhost.example.com when you want to see locally
and
http://example.com when you want to see your ‘real’ site.
WordPress does not save the ‘localhost.” in the database..
@Jazz, indeed I am also interested in understanding your suggestion better; would you elaborate please?
Thanks!
@yazz interesting… please explain further. With an example of a prod.site and a local site.