Localhost WP: MAMP, CodeKit, LiveStyle, Sublime – 01

by | Jun 8, 2016 | technology | 0 comments

I’ve been tinkering my website development workflow for quite some time, and this is the latest iteration of it (but it’s still missing the versioning part of it, which I might discuss on a separate post once i get it all figured out, still can’t seem to find the most suitable flow for that particular part). This localhost setup works best for me, specially for live editing and preview of the CSS styling, which is very important for me since most of my work are related with WordPress theme customisation (I usually work using Divi theme from Elegant Themes, which I’ll definitely post in another time).

As mentioned on the title, for this setup I use:

  • MAMP (local server environment)
  • CodeKit (its main feature is a compiler, but I use it mostly for cross device preview )
  • Sublime Text (text editor)
  • Emmet LiveStyle (I use this Chrome Extension, combining it with Sublime I can view my styling as I go)
  • WordPress

For some people, having CodeKit and LiveStyle might be a bit redundant as they both are able to preview across device, but with LiveStyle I can edit CSS & view it on my browser as I type (without hitting save), so that’s a feature that’s missing from CodeKit, and LiveStyle is a free chrome extension (but remote view will be a paid service in the future), so why not? As for CodeKit, well that’s probably because I already purchased that before I knew the existance of LiveStyle (and that’s why for remote/device preview I use CodeKit instead of LiveStyle) 😀

Honestly, this is probably the first time for me to write up a “how to” post, so bear with me a bit. For this setup I’m using a macbook pro running OSX. Here goes whatever goes here!

A. How to setup MAMP for local WordPress development:

You’ll need follow these four-part process to get WordPress on localhost (assuming this will be a fresh install of WordPress):

  1. Download & install MAMP
  2. Define & activating MAMP local server
  3. Create a database for your WP install
  4. Install WordPress

So let’s start!

Download & install MAMP

If you haven’t download MAMP from the link above, go do it now! 😀

Define & Activate MAMP local server

mamp01

Once you have MAMP installed, now it’s time to setup your server. You’ll need to set your ports to 80 in the “General” tab (just click the button 😀 ) , then type in your computer’s password (you’ll need to type your password every time you start MAMP server).

mamp02

Next step is to define your local server address, I usually start with something like dev.websitename.com , you can do this by clicking the plus icon ( + ) at the bottom of the list. You’ll also need to define your “Document root” folder, this is where you’ll install WordPress. For this guide I’ll be using dev.howtolocalwp.com , you can also adjust the PHP version if you like, I usually set it to mimic my live server PHP version from my hosting.

Once that’s done, you can hit save and start your server, you’ll be prompted to input your password. That’s done for the server, now let’s hit that WebStart icon and move on to the next process.

mamp03

Create a database for your WP install

Now that you’re directed to the MAMP window inside your browser, click the phpMyAdmin, as shown below:

mamp04

Once that’s open, click the Databases tab on top to create a new database:

mamp05

Type your database name (for this example I’ll use localwp) and click the create button and that’s it! Simple, right? 😀 On to the last step, the WordPress install itself!

Installing WordPress

Once you’ve downloaded the latest WordPress installer from the link above, you’ll need to unzip it to the folder you created earlier when defining your Document root folder (for this example I named it “howto”). You can rename your wordpress folder into something else, or keep it as is. I’ll be keeping it as wordpress for this example.

Open up your browser and type http://dev.howtolocalwp.com/wordpress (this is the server address, followed with the WordPress folder name that you unzipped earlier), you’ll see the language selection screen for you to choose you’re WordPress language, like this:

wordpressintall01

Select your language and click the Continue button.

The next screen will tell you what you’ll need to continue with the install, just click the “Let’s go!” button and continue to the next step.

Third screen, you’ll need to input the database info to the fields:

wordpressintall02

Database Name: localwp (or other name that you gave for the database)

  • Username: root
  • Password: root
  • Database Host: localhost
  • Table Prefix: wp_

Now that you’ve inserted the database info, you can click the Submit button, and you’ll be presented with a screen that will check whether you’ve inserted the correct info or not, if it’s correct then you can click Run the install button:

wordpressintall03

Next screen will ask for you to the site details, type the details like you’ll normally would for any WordPress install:

wordpressintall04

 

That’s it! You’ll be presented with a success screen and you can click the Log In button , followed with a login screen.

wordpressintall05

Your localhost WordPress install is now ready to use! All done!

wordpressintall06

 

That’s it for now, quite a long post!

On the next post I’ll continue the Workflow setup for localhost WordPress development using MAMP, CodeKit, Sublime and LiveStyle.