Set Up A Killer WordPress Test Environment Locally using MAMP on OSX

For the majority of articles I write, I begin with a fresh install of WordPress. It’s the best way to ensure control when you have people following along and doing exactly what you do.

It would be very tedious if for each article I wrote, I had to create an entirely new WordPress instance. That would require a fresh database, the most recent version of WordPress, a new user, etc.

The answer, of course, is WordPress Multisite. (Btw, check out our Multisite guides here.)

If you’re testing loads of CSS, you’re going to need a Windows virtual machine set up as well! Cross browser compatibility is essential, so it’s handy to have Windows versions of Chrome, Explorer, Firefox and so on at your fingertips.

The coolest part about MAMP (Mac, Apache, MySQL and PHP) is that you can basically have your own local server running (duh!) with custom domain names. These domain names aren’t accessible to the rest of the world, but when you’re constantly looking at WordPress, it’s kinda nice to not see the default “localhost:8888″ as your URL for everything. This server CAN, however, be visited by your local Windows setup.

The End Result

At the end of this article, you’ll have a nice WordPress MS site in which you can create multiple blogs (with multiple themes to test). You’ll also have a Windows Virtual Machine in which you can check out the aforementioned sites in Internet Explorer (god forbid!), and so on.

Safari and Windows Chrome running seamlessly side by side.

The Catch

MAMP has a free version, and a PRO version. For this tutorial, we’ll be using the paid version. You can use the free version if you wish, there’s just a little extra set up to go through (which I’ll point you in the right direction to later).

For Windows testing, we’ll be using VMWare Fusion. I love VMWare Fusion for its “Unity” feature- you can seamlessly have Windows windows (har har) in your OSX setup. I like this, because I really don’t like the Windows UI and hate looking at it. But that’s just me!

Both of these are paid apps. But, if like myself you’re constantly testing and creating multiple WordPress themes, they are two invaluable tools to have.

Setting up a MAMP Server

MAMP is the easy part. Thanks to MAMP PRO, setting up a multisite installation is a breeze. We can even set it up under a custom domain. WordPress.ms seems fitting.

Setting the Correct Ports

Once you’ve installed MAMP PRO, fire it up and you’ll be presented with the welcome screen- close that for now, and jump back to the MAMP PRO app.

You’ll see that Apache and MySQL are using some strange ports- 8888 and 8889 respectively. In order for our Windows box to reach our site properly (and for custom domain names to resolve correctly), we need to change these to the default Apache and MySQL ports. They are 80, and 3306.

New MAMP ports set to defaults 80 and 3306

OSX comes with a version of PHP pre-installed that’s pretty difficult to get set up. Since we’re using MAMP though, there’s no need for it. That does mean, however, we need to turn OFF internet sharing in System Preferences. Fire it up, and make sure it’s not active.

Set Up the Server

Cool. Now we’ve done that, you’re going to want to select the “Hosts” tab in the top left of MAMP PRO, and click the “+” symbol on the hosts list to the left.

Here is where we set up our brand new WordPress server. You need to set 3 things here: The Server Name (URL), Disk Location (where the files reside) and an Alias (URLs). We’re going to use the domain name “wordpress.ms” as our domain, since a quick trip to wordpress.ms will show you it doesn’t conflict with any actual live sites.

I’ve set the root directory to be ~/Sites/wordpress.ms. You can make it whatever you want, but I think it’s nice mapping file directories to URLs.

As good practice, I always make sure the Server Name mimics the first alias. Hit “Apply,” and it will ask you to restart the servers. Do so. You may be prompted to enter your password.

If you jump to your favorite browser now and visit wordpress.ms, you should be presented with the default MAMP screen. Great!

If you can’t afford the PRO version of MAMP and still want to use domain names, there’s a great tutorial about it you should definitely read up on.

Next Comes the Database

As with any website, you need a database to accompany the WordPress website. If you head back to MAMP and select the server tab (next to the hosts tab), then the MySQL sub-tab, you’ll see a button to launch PHPMyAdmin. That’s where we’ll create our database.

Once PHPMyAdmin launches, you want to go to the databases tab and enter a new database name. Call it whatever you like, wordpressms will do.

By default MAMP PRO sets your MySQL username and password as root and root. Easy enough! We use that when we’re setting up WordPress, but first we need to download it!

WordPress Setup

This section focusses on setting up and installing WordPress MS, so if you know how to do this, feel free to skip to the next section.

Head over to WordPress.org and download the latest release of WordPress. Unzip it, and drop it into the directory we set earlier- if you’re following my steps, it should be in ~/Sites/wordpress.ms (~ is your home directory!).

If you refresh your wordpress.ms site in your browser, you’ll be presented with the usual set up blog page. Enter details as usual, but make sure you specify port :3306 when you set the database host! This is essential, otherwise your site will not work.

The usual WordPress 5 Minute Install

The details following are up to you- call your site what you wish, whether it be “WordPress.ms” or “WordPress Tests” or “WordPress Development.”

All goes well, you’ll be told by WordPress that WordPress has been installed and you should login!

Multisite

 

Once logged in, it’s time to activate multisite.

Open wp-config.php in our new install, and on line 82 (just below the WP_DEBUG constant definition), paste the following.

/* Multisite */<br />define('WP_ALLOW_MULTISITE', true);

If you refresh your browser while logged in, there will be a new menu item within the Tools section called “Network Setup.”

One this page, you’ll be asked to do a little extra set up regarding your blog. You want to make sure the websites are set up under sub-directories, and once again call it whatever you like.

Upon clicking continue, you’ll be prompted to add some more code to your wp-config.php file (which you should add below the WP_ALLOW_MULTISITE constant we entered just before).

define('MULTISITE', true);<br />define('SUBDOMAIN_INSTALL', false);<br />define('DOMAIN_CURRENT_SITE', 'wordpress.ms');<br />define('PATH_CURRENT_SITE', '/');<br />define('SITE_ID_CURRENT_SITE', 1);<br />define('BLOG_ID_CURRENT_SITE', 1);

And to completely re-write your .htaccess to allow multiple blogs

RewriteEngine On<br />RewriteBase /<br />RewriteRule ^index.php$ - [L]<br /><br /># add a trailing slash to /wp-admin<br />RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]<br /><br />RewriteCond %{REQUEST_FILENAME} -f [OR]<br />RewriteCond %{REQUEST_FILENAME} -d<br />RewriteRule ^ - [L]<br />RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]<br />RewriteRule ^([_0-9a-zA-Z-]+/)?(.*.php)$ $2 [L]<br />RewriteRule . index.php [L]

You’ll then have to log in again after WordPress has properly calibrated itself for Multisite use.

Once logged in again, you’ve now got access to the Network Admin! This is great news. For all Mac purposes, you’ve got a brilliant WordPress testing ground set up for all your clients/themes/projects!

I’ve been using this set up for years, and its yet to fail me. I can have an unlimited number of test sites, using only one database and one set of WordPress code. It also means when new versions of WordPress are released, you’ve only got to update once- and it replicates across all sites.

A testing ground for an infinite number of new projects!

Facing The Dragon (Windows)

We had to get here at somepoint *sigh*, but having a Windows box is an essential tool for any front end developer. You’ve gotta know how any site you work on behaves on IE as a start, and having Windows versions of other major vendors is a huge plus too.

I’m not going to go in-depth on how to install it, as plenty of people have talked about it before.

I am however, going to show you how to set up your new Windows box to access your MAMP multisite.

An example of the Unity feature being run to show Windows Apps running side by side Mac Apps.

Once you’re set up, its a simple act of finding out your Host’s IP address (mac) and making your Windows box’s host file point to MAMP under a url.

If you’ve done this procedure before on your Mac, the process is nearly identical. MSDOS has some strange commands though, so I’ve run through it below to get it set up correctly.

Finding Your IP Address

To find your Mac’s IP address, it’s as simple as running a command in Terminal. If you’re not familiar with Terminal.app, it’s basically a console that runs commands directly to your computer. Old School!

The command you’re after is ifconfig -a. This will list all IP ports you have running, and their address as well.

When you install VMWare Fusion, a new port is opened up, which is the link between your Mac and your new Virtual Machine. After running the ifconfig function, you should see a port called vmnet# (the hash will be a number). Grab the IP Address that is listed next to “inet.” If you’re struggling to find it, refer to the image below.

Look carefully for your vmnet IP Address in Terminal

Either write this down, or copy it somewhere for later use. We use it in the Windows box’s /etc/hosts file to point to MAMP.

Taming The Dragon

Windows’s command line tool is nowhere near as nice, easy to use, or user friendly as Terminal.app. Fortunately, you can find your /etc/hosts file in C:Windowssystem32driversetchosts. You may have to right click on it, and select “Open as an Administrator.” This is the equivalent of sudo when in Terminal.

At the bottom of the file, you want to paste the IP address you just found, and then space, and then wordpress.ms:

172.16.196.1 wordpress.ms

This step is similar to setting up wordpress.ms in MAMP, except MAMP automatically edits /etc/hosts for us.

Save and close this. There’s one last step. Remember I said MSDOS is gross? We need to fire it up now, to flush the Domain Name Servers, or basically reload the hosts file for browsing.

The command for this is ipconfig /flushdns.

Once you’ve done this, open up Internet Explorer, and try hitting your wordpress.ms URL!

Boom! Instant access to MAMP’s multisite.

The ability to do this is invaluable. You’ve basically got an environment where you can test code in every and any browser. It would be worth installing all major browsers on your new Windows machine, so you can check all of them too (though we all know it’s mainly IE6 and 7 you’d want this for ;) ).

 

That’s all there is to it!

Too easy, right? You can now browse your sites in any browser you wish. Even compare them side by side!
Having this set up has been really handy to me when testing bugs in websites when a client screams, “BUT IT DOESN’T WORK IN INTERNET EXPLORER!” No, really? Save the world and update your browser!

Feel free to ask any questions in the comments below!

Comments (20)

  1. Great Tip – couldn’t have picked a better time for this!

    One question, I have the environment you outlined above setup and running, but (how) am I able to use this setup to test on tablets and smartphones?

    Building mobile-first, it’s definitely necessary to have my installs be accessible by my mobile devices for test purposes.

    Thanks in advance!

  2. Nice article.

    Would be nice if the wpmu.org site supported safari. The share social tool bar covered the article and required me to switch to chrome from Safari. not cool

    frank

  3. Can you also access this from outside of your local network if you wanted to show a site to a client? Would love to see a part 2 with instructions for that.

  4. Seems a bit involved, I use a purely Windows Dev environment using WAMP which is excellent.

    Good tips on using multi-site though!

    Now if I could only find a decent ipad emulator (calling it now, ipad is this decades IE6, so goddamn frustrating to develop for!)

  5. This is a really great article, I was using MAMP up until recently to run WordPress.

    I’m actually using a new tool now called Whippet which the lovely people I work with wrote; it’s a command line tool which is specifically built to run as many WordPress sites you want without needing anything more than a wp-content folder and a database (no core install needed).

    It also provides a load more debugging information, and any errors or warnings appear in your console rather than interfering with your theme display.

    It’s available for download on Github – https://github.com/dxw/whippet
    It’s just been built to ease our own workflow, but I think other developers could find it equally useful. I was wondering if you guys were interested in me writing a tutorial on how to use it?

  6. Great article, Harley! I am a WordPress noob and was still able to follow your directions perfectly. I have 2 questions:

    1) When adding a new site, what do I need to put under site address? Can it be anything I want to name the site?
    2) When I create a new site is there supposed to be a new folder in my root directory with the new site address, or is everything mixed together?

  7. Hello.

    I really liked your article. I’m using MAMP (the free version) and i want to access my local wordpress test site from another computer that is running windows.

    I open the browser on the windows computer at wrote at address bar my mac ip address following the port and the site folder name (example http://192.168.1.10:8888/testing).

    However it just shows some texts from the wordpress site, it can’t show the full site and graphics like it shows on mac. Why?

    Thanks,
    Miguel.

  8. I followed these instructions to create my site which went well, however, when I tried to migrate from the local multisite setup to a live server, things went horribly wrong. I was probably overly ambitious and should have stuck to a site by site install cause it is doing my head in!!

    I spent so much time building the site out. I would hate to have to start from scratch with a single local site install.

    Do you have a tutorial that continues from this one i.e. Once the site is built locally, how do you migrate that site from the local multisite setup listed here, to a live server?

Participate