You’re reading an article by Jay Robinson, a designer living in California.

Setting Up Your Mac For Local Development Using Coda, WordPress & MAMP

Word­Press is not just for blogs. Word­Press is a highly sophis­ti­cated con­tent man­age­ment sys­tem that you can use to develop and man­age your client’s pro­fes­sional web­sites. Best of all, it’s entirely free. To get started it helps to exper­i­ment with­out the has­sle of pub­lish­ing files to the Inter­net. With a Mac, you already have the basics for an excel­lent local devel­op­ment environment.

In this tuto­r­ial, I will describe set­ting up a folder on your Mac that you can use to prac­tice build­ing web­sites with PHP and a MySQL data­base. Before we begin you will need

  1. a Mac
  2. a text edi­tor
  3. a web browser

Let’s get started.

1) Down­load Word­Press from WordPress.org. Unzip it to find a folder called “word­press”. Rename it YOUR_PROJECT_NAME (Mine will be called “jay”). Drag it to the Sites folder in your Home direc­tory. For easy access, I’ve added the Sites folder to my Finder win­dow sidebar.

Add the Sites folder to your Finder window sidebar

2) Down­load the free MAMP soft­ware from Mamp.info and install. MAMP stands for Mac, Apache, MySQL and PHP. This app helps man­age our MySQL data­bases in a straight for­ward way.

Open the app and click “Pref­er­ences…”, then select the “Apache” tab to select our Doc­u­ment Root. We want to select the Sites folder located in your Home folder. The path should read /Users/YOUR_MAC_OS_X_USER_SHORTNAME/Sites.

Set up MAMP to use ~/Sites as the Document Root

Once you acti­vate MAMP and get the green lights, test if it is work­ing by open­ing your browser and going to http://localhost:8888/ You should see the con­tents of your ~/Sites direc­tory. Remem­ber, we’re prepar­ing a local devel­op­ment envi­ron­ment. “Local­host” means your com­puter, so no one else in the world will be able to see these files in their web browser.

Okay, MAMP is work­ing, and the MySQL is just wait­ing for us to give it some data­base tables. Go to http://localhost:8888/MAMP (must be all upper­case) and click “php­MyAd­min”. Once there, “Cre­ate new data­base” with YOUR_PROJECT_NAME. My data­base name will be “jay” to match my project.

3) Now we just have to match Word­Press with the data­base. Access the YOUR_PROJECT_NAME folder in ~/Sites and rename the wp-config-sample.php to wp-config.php. Open the file to edit the con­tent. DB_NAME means data­base name, so enter YOUR_PROJECT_NAME. The DB_USER and DB_PASSWORD are both “root”. Leave “local­host” as the server, as the server is our local computer.

Remember to change the name of this file from wp-config-sample.php to wp-config.php

4) Visit http://localhost:8888/YOUR_PROJECT_NAME and you will see the famous five minute Word­Press install. Set up the blog name and email, and you will be given a pass­word. (I copy and paste this gen­er­ated pass­word to get into Word­Press, then change it to some­thing easy to remem­ber right away. I use the same sim­ple pass­word for all my Word­Press devel­op­ment sites, since they are not live on the Internet.)

The famous five minute WordPress installation process begins

Word­Press is now con­fig­ured to work on your com­puter, but will only be acces­si­ble locally. The final step is to set up Coda to access the directory.

5) Go to Coda, enter Sites view (Com­mand 1) and “Add Site…”

Nick­name
YOUR_PROJECT_NAME
Root URL & Local URL
When devel­op­ing locally, this will sim­ply be used to gen­er­ate a thumb­nail for you to see your project in Coda. These can be the same URL, e.g. http://localhost:8888/YOUR_PROJECT_NAME
Remote Root
None
Local Root
You may use the “Set…” file browser to find your project folder in the Sites folder, or copy and paste this tem­plate: /Users/YOUR_MAC_OS_X_USER_SHORTNAME/Sites/YOUR_PROJECT_NAME/
Con­nect­ing, Ter­mi­nal and Source Control
Do not worry about these. You do not have to con­fig­ure them for local development.

Setting up your new WordPress site in Coda

Short URL: http://jwr.cc/x/1e