How to Set Up a Killer WordPress Testing Environment Locally

If you’re a heavy WordPress developer like me, you might find that you need to create a new installation for each site that requires a strange structure or specific posts, instead of using your uniform local test WordPress installation. Cue WordPress Mu. WordPress Multi User is a platform created by the geniuses at Automattic that is basically a WordPress installation that allows multiple blogs to run using the same software.

In this tutorial, I’m going to show you how to set up WordPress Mu locally so that it can be viewed in VMWare Fusion too, a piece of software that allows for cross-browser testing on Microsoft XP and Vista. Mac only, sorry, however I’m sure something similar can be done with the PC versions of MAMP.

Preface

Unfortunately this tutorial requires a few paid things, so it can get expensive. You’ll need MAMP PRO, Microsoft XP and VMWare Fusion- Only MAMP PRO is essential if you don’t need to cross-browser test. MAMP PRO has some functionality on MAMP that we need when defining our new developer site. Download WordPress MU as well, we’ll need that!

Note: MAMP PRO comes with MAMP- just stick both of them in Applications because you need the two.

Run Down

OK, so if you don’t know completely what we’ll be doing, I’m going to break it down further. If you use WordPress to develop your websites, then each time you create a new website you need to download a new installation of WordPress, install it, and go through that entire process just for a new site. This takes time AND hard drive space. What we’ll be doing, is setting up a type of WordPress installation that allows you to use the same WordPress files, and set up a new WordPress site via wp-admin instead of going through the famous 5 minute install.

At the end of the tutorial you’ll be able to visit http://wordpress.mu/ to see your local WordPress MU installation. You’ll also be able to open the same page in VMWare Fusion, which will be running Windows XP. This means you’ll be able to see it in ALL major browsers- IE5.5-8, Chrome, Safari Mac, Safari PC, Firefox Mac, Firefox PC, etc. The list goes on.

Step 1 – Changing Ports on MAMP PRO

Once you’ve installed MAMP PRO, open it up and the servers should start running. We need to change the ports. Ports are basically the ‘door’ that a server tells the browser to go through. You might be familiar with CPanelX’s port 8082. CPanel has told your server that to get to the CPanel, you need to go through door 8082. By default, MAMP PRO likes to have it’s own ports- 8888 for apache and 8889 for MySQL. We need to change this back to the default settings. You can either turn it to 80 / 3306 manually or simply click ‘Default Ports’

MAMP PRO will then tell you that the servers need to restart in order for changes to take effect. Click OK and let it do it’s thing. If it tells you that Apache’s failing to restart, check that ‘Web Sharing’ is un-ticked in your Sharing Prefs pane. You should now be able to visit http://localhost:80 to see either the ‘If you can see this page Apache is successfully installed’ page or the default MAMP index page. Great.

Step 2 – editing httpd.conf

httpd.conf is what Apache reads when it looks at what hosts or URLs to run on. You can find httpd.conf in ~/Applications/MAMP/conf/apache/httpd.conf

Scroll down to the very bottom, and you will probably find this:

<VirtualHost *>
	DocumentRoot "/Applications/MAMP/htdocs"
	ServerName localhost
</VirtualHost>

or nothing at all. We are going to add this, or change it to the following code. We’ll also be adding our own Virtual Host, which will be wordpress.mu (Just a side note, when doing this it’s important to never pick a URL that will conflict with an actual site, because while the settings are like you’ll never be able to visit your local site’s url online. e.g. if I set my host to be example.com, example.com would always resolve to my local machine as opposed to example.com online). So like I said, add this (or change the default one)

<VirtualHost *>
	DocumentRoot "/Users/YOU/wordpres.mu"
	ServerName localhost
</VirtualHost>

<VirtualHost *>
	DocumentRoot "/Users/YOU/Sites/wordpress.mu"
	ServerName http://wordpress.mu/
</VirtualHost>

Don’t forget to change YOU to your user name. This will also require a restart of the Apache and MySQL servers. You’ll probably notice that wordpress.mu doesn’t exist in your sites folder- so create it!

Step 3 – editing /etc/hosts

This file, hosts is the configuration for exactly that, the hosts. So httpd.conf set the hosts for your mac! This requires some Terminal work, but I promise you it’s as easy as copying and pasting the command, and then typing a single line!

Open Terminal (it’s in Utilities in the Applications folder) and type:

sudo pico /etc/hosts

And hit enter. sudo means it’s an admin action, pico is the Terminal’s editor (which you’ll soon see) and /etc/hosts is the path to what we want to edit. You’ll be prompted for your password, so type it in. You should now see this screen:

That last line may or may not be there- if it isn’t don’t worry we’ll be changing it anyway. Put the cursor at the bottom (clicking doesn’t work) and where that last line of code is, change localhost to wordpress.mu. It should read:

127.0.0.1 wordpress.mu

127.0.0.1 is the computer’s way of saying ‘me’. Save the file by pressing ctrl+o (o for write out and then ctrl+x to quit pico.

Step 4 – Adding a host for MAMP PRO

The final piece of the puzzle is to create a host alias in MAMP PRO. Now that the hosts are all set up, we need to tell MAMP PRO that it’s actually there. In MAMP PRO click on the ‘Hosts’ tab. You need to add an alias. Click the little plus in the bottom left. You need to set a few things. Server name: wordpress.mu, port: 80, Disk Location: /Users/YOU/Sites/wordpress.mu, and add an alias in the bottom right of wordpress.mu.

Click apply, and once again restart the servers

Step 5 – WordPress MU

Grab your wordpress-mu Download and rename it to wordpress.mu. Stick it in your sites folder. Hey presto, you can go through with the installation! Unfortunately I found no easy way to use sub-domains on a local server, so I just stuck to sub-folders as the structure. Great! You can now use WordPress mu on your local computer! Go ahead with the 5 minute install, and then you can add blogs under the ‘Admin Menu’. I wont go too much into the actual functionality of WPMU, but I’ll explain how I use when working at the end.

VMWare Fusion

I’m not going to go into depth on this topic, because there are many tutorials on it. I will however explain how to modify a brand new installation (even if you’ve used it for ages there probably isn’t a lot that will have changed anyway). Start up VMWare Fusion, and activate Unity if you so please. Unity allows you to run Windows XP windows natively in your mac- see screenshot below!

Step 6 – \etc\hosts (windows)

The /etc/hosts file in XP needs editing too. You can find it in C:\Windows\system32\drivers\etc\hosts. Open it up with Notepad, and we’re about to put our line in. We need to grab an IP address first. Open a new terminal window and type ifconfig -a. You will get a whole lot of junk back- scroll down a bit until you can see ‘vmnet8′. Grab that IP address, the one I’ve highlighted in the image below.

Then go back to your \etc\hosts file in windows, and at the bottom, paste that IP address in followed by wordpress.mu.

Step 7 – flushdns

Sadly, windows needs to be slapped for it to noticed that a change has taken place, so you now need to open Command Prompt. It is in Accessories in the start menu. Simply type ipconfig /flushdns. What this does is flush all the DNS names (localhost mainly) so that it recognises the updated hosts file.

Voila!

You are now able to visit your MAMP running WordPress MU installation on every windows browser there was- looks like I have a bit of work to do!

A practical use for it

So as promised, I said I’d tell you how I use it. What I’ve done is gone ahead and downloaded every browser I need/support and installed it into my XP install. This way I can compare my WordPress sites window beside window and easily have access to modify whatever I need to, without having to save it and refresh an online installation!

Take a Wrap

So there you have it. The ultimate guide to the ultimate WordPress setup. It feels like I haven’t put enough emphasis on WordPress MU itself, but it is just an install tutorial. WordPress MU saves loads and loads of disk space by taking all your separate WordPress blogs and putting them into 1- you have a universal theme folder/manager which makes it super easy to quickly swap between editing sites.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.