When designing your next big project, your personal website or just your next WordPress theme; developing in the correct environment can really aid the design process and make the whole ride a lot smoother.

I used to simply add an obscurely named subdirectory to a website (such as my blog) and develop there. It seems fine, but this can lead to a few problems. First of all uploading/re-saving files can take a while, especially when batch uploading. Second, if you’re using shared hosting then chances are you don’t know how PHP is setup on that server. Finally, if you lose internet connection for whatever reason, you can’t carry on working. Let’s fix that.

Creating a Local Environment

Personally, I think the best option is to setup a local web server with all the services you need, so you can develop quickly, efficiently and wherever you are. The great thing is you don’t even need an internet connection, so when you’re using free café wifi, free internet on the train or anything else like that, you’ll still be able to work at the exact same fast pace you’re used to.

For the purpose of this tutorial, we’ll be setting up a local WordPress testing server on Mac. Of course you can just follow this tutorial up to the point we install WordPress and you’ll simply have a local way of testing your designs.

Before we jump in, we’ll need to know what we want to do. For the case of this tutorial we’ll be setting up a simple MAMP server; Mac, Apache, MySQL & PHP. Hopefully, you’ve already got Mac (and a recent edition such as Leopard or Snow Leopard at the time of writing), so let’s concentrate on the other three.

Getting Apache running

You may or not know, that the last few releases of Mac OS X come with an Apache server bundled straight in. All we need to do is enable it in order to get it running. To do that, head to System Preferences and load up the Sharing pane. Once there in the rows of tick boxes should be one labelled Web Sharing. Tick that box, if it isn’t already, and your Mac is now a fully fledged web server. Check you out.

There are two addresses, a personal address and a computer address. For this tutorial we’re going to set up our testing environment on the computer address, if you click it a web browser should launch with a message (it changes according to your version of OS X).

Now let’s find where you can edit the files on your local website. Your personal websites files are located in your home directory under Sites, however your computers website is located somewhere else. Fire up Finder and head to your top level directory (usually Macintosh HD unless you’ve renamed it). Head to /Library/WebServer/Documents and you’ll find the files for your website. Fantastic. In this directory, create a file called “test.php” and in it put the

following code;

<?php phpinfo(); ?>

Now visit http://localhost/test.php or whatever URL System Preferences gave you as your computers website. Once there you should see this;

O noes! What’s going on? You see, Mac also comes with PHP built in, however just like Apache originally was, it’s disabled. In order to get PHP up and running, we need to tell Apache that when it loads it should load it’s PHP module so it can understand and execute PHP code properly.

Getting PHP on the go

The file that controls how Apache works is called httpd.conf and is buried in a few system files. Head to Finder and open a new window. Press Command+Shift+G and a little dropdown box should appear asking where you’d like to go. Enter /etc/apache2 and hit enter.

Amongst the files you’ve found, should be httpd.conf. Since it’s in a system folder, we need to be authorized to modify it, there are a few ways of doing this (some people prefer to use Terminal to launch TextEdit with root privileges). This way is pretty simple, select httpd.conf and copy it, now paste it on your desktop. Fire it up in TextEdit and find the line (Cmd+F) that looks like this;

#LoadModule php5_module        libexec/apache2/libphp5.so

The # at the start of that line mean it’s ignored, simply delete the hash and save the file to your desktop. Now drag the file back to /etc/apache2 where you’ll be asked to authenticate. Type your password in and replace the original with your new PHP enabled version. Since Apache reads this file once it starts up, we need to relaunch Apache. This is the same as we did earlier. Head to System Preferences > Sharing and then un-tick and re-tick Web Sharing. Once you’ve done that, reload the test.php file and it should look a little more like this;

Great, what we’ve got now is an active web server running PHP. Now in order to run WordPress, we’re missing one more element; MySQL.

Installing/Configuring MySQL on Mac

Now this step is a little more difficult than the last. Unfortunately MySQL doesn’t come pre-installed on Mac, so we’re going to need to download it first. In order to do that, we need to visit the MySQL Download Page. Once there, download the version that corresponds to your machine. I’m running Snow Leopard on a 64-bit MacBook, so the correct option for me is; Mac OS X ver. 10.6 (x86, 64-bit).

Once you’ve downloaded, there should be three files and a readme file in the tar/dmg you’ve just downloaded. Install them one by one, it’s a simple installation involving you clicking Next a few times. Once you’ve finished, head to System Preferences and the new MySQL pane and enable MySQL, also enable loading on startup.

Now we need to configure MySQL, for this we use Terminal. For those unfamiliar with the command line, this may seem a bit daunting but it’s really easy. Terminal is like Finder, without the interface. So imagine right now we’re in your home directory, but the mysql and mysqladmin applications we need to use are located elsewhere, so essentially what we’re doing is creating a shortcut to these two apps. Rather than locating them every time we want to run them, we’re going to make it so we can simply type mysql or mysqladmin at the command line and begin using them.

The best way to do this is to add them to your PATH variable. To do this, type ls -a and hit enter. You should see a list of all the folders, files and hidden files in your home directory. If you’re not in your home directory, type cd ~ and you should be there. If you see a file called .profile then you already have a profile file to edit, if you do NOT see .profile, open up TextEdit and create a blank file (CMD+Shift+T to go in to plaintext mode) and save as .profile in your home directory (keep the window open though). If you DO see .profile then run the command Open /Applications/TextEdit.app .profile and TextEdit should launch.

Now add the following to your new (or old) .profile;

export PATH=”/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:$PATH”

Save it then close and relaunch Terminal. Now we’ve got a database up and running, we need to set it up so our WordPress installation that we’ll get on to later can access it. Now it’s very important to realize that in a live environment, you’d never just put a password on the root account for MySQL and have done with it. However, since this is a local testing environment, it’s not that important. MySQL root account comes with no password by default, so we’re just going to set a quick one here. Run the following command, changing the password in quotes to whatever you want;

mysqladmin -u root password ‘password’

If all goes well, then so far we should have Apache running with PHP and a MySQL installation. Now we need to create a table for our WordPress installation. This is pretty simple. Type mysql -u root -p and enter your password when requested (the one you made a second ago). Finally type CREATE DATABASE db; to make a new database called db.

Marrying PHP and MySQL

The final step before we can install WordPress is to make PHP and MySQL talk to each other nicely. We need PHP to load it’s MySQL module, then we tell it the port and socket to use. Schimples. For this step, head to Finder and press CMD+Shift+G again so we can specify where we want to go. Type /etc and hit enter. Find a file called php.ini, that’s the settings PHP read when it boots up. Like we did earlier, drag the php.ini to your desktop and fire it up in TextEdit. Search for mysql (CMD + F) and the first thing you should find is this line;

;extension=php_mysql.dll

Similar to Apache, MySQL uses a semi-colon before the line to skip it, take away the semi-colon and find the next occurrence of mysql (not mysqli). Do the same for the following line;

;extension=php_pdo_mysql.dll

Next, find the line mysql.default_port and modify it so that it looks like this;

mysql.default_port = 3306

Finally, a few lines below the default port should be mysql.default_socket. If we leave this empty, PHP will use the built-in defaults. So this line should look like;

mysql.default_socket =

Voila, we’re done with PHP and MySQL now! All that remains is to restart PHP, again simply go to System Preferences > Sharing and disable then re-enable Web Sharing. Yay!

Installing WordPress

This is where it really becomes as easy as pie. Download a copy of WordPress and unzip it in to /Library/WebServer/Documents, then visit your site in Safari. My copy of WordPress resides in http://localhost/wordpress/ so that’s where I’d head to. For the database section, the host should be localhost, the username should be root and the password should be whatever you set before. The database name should be what you created before, which in my edition was db.

If all has gone well, you should now have WordPress running locally on your machine! Now you can design, develop and test wherever you are and at full speed. If you have any questions about anything above, leave a comment below and I’ll get back to you as soon as I can.

Thanks for reading