MOKUJI—collection of
notes by Zac Fukuda

Host Wordpress on MAMP with a Unique Domain Name

012
Apr 23, 2016

Although nowadays there are several ways to host the Wordpress website locally, perhaps MAMP might be best fit for web designers or those who doesn’t have distinct knowledge in coding to do so, since it doesn’t require any technological skill or knowledge, and most of processes can be done by GUI.

In this article, I’m going to walk you through how to set up the local Wordpress website on OS X using MAMP with the unique hostname, i.e. the domain name, enabling the support of Apaches’s virtual host. This time I use wp.example.dev as an example of domain name.

These are steps:

  1. Install MAMP
  2. Setup MAMP
  3. Download Wordpress
  4. Create a database
  5. Modify httpd.conf
  6. Modify httpd-vhosts.conf
  7. Add hostname to hosts file
  8. Modify wp-config.php
  9. Restart MAMP
  10. Follow Wordpress Installation Wizard

Install MAMP

If you haven’t installed MAMP yet, just go to its official website and download it. Unlike usual app, MAMP is to be in Application folder with all its files contained in the folder. Maybe the Installation Wizard will handle this for you.

Setup MAMP

After installation, start MAMP by clicking MAMP.app. Every time you start MAMP, it requires you to enter your OS X user’s password. I don’t know what PHP version is supported by the latest MAMP by default, so it is better to check if MAMP is set up correctly to host Wordpress. Click the setting and set up as follows:

  • Apache Port: 80
  • Nginx Port: 80
  • MySQL Port: 3306
  • PHP: 5.6.xx

According to Wordpress official website, current Wordpress, version 4.5, requires PHP version 5.6 or greater. Perhaps by the time you read this article MAMP may support PHP version 7. However, since most of rental server services only support PHP version 5, please choose 5.6.xx and click OK.

Download Wordpress

Go to https://wordpress.org/download/ and download Wordpress zip file. After the download, please unzip the file, copy it to htdocs folder, which is located under the MAMP application folder, and rename it to wp-example for convenience.

Create a database

Wordpress uses MySQL, the most used free open-source relational database, for the place where all data is stored. As running MAMP, open the browser and type localhost/phpMyAdmin/ in URL field. If this is the first type you access to phpMyAdmin, it redirects to the login page. The information is as follows:

  • Username: root
  • Password: root

On the admin page, click New at the sidebar, and then let us create database called wp_example. Keeping collation in the select input, type the name wp_example and click Create button.

phpMyAdmin Screenshot

The new database will show up in the list of the sidebar and if you can check that, you can close the phpMyAdmin.

Modify httpd.conf

In order to activate the Apache’s virtual hosting function, we need to modify httpd.conf, in which all configuration for Apache is written. httpd.conf is located in MAMP > conf > apache folder. Open the file using your favorite text editor, modify the line as follows:

# LoadModule vhost_alias_module modules/mod_vhost_alias.so
LoadModule vhost_alias_module modules/mod_vhost_alias.so

You can easily find the line by using the Find feature of your text editor. After the modification, do not forget to save the file.

Modify httpd-vhosts.conf

In addition to the httpd.conf, we also need to add some lines to httpd-vhosts.conf, which is located in MAMP > conf > apache > extra folder, to create a virtual host for our Wordpress project. Before editing the file, it is safer to make a copy of it with the name such as httpd-vhosts.conf.origin in case that we will want to refer the original file in future. Please do not make the extension of the back-up file .conf because all .conf file will be loaded to the main configuration file. Now open the file and at the bottom of the file add the line below.

<VirtualHost *:80>
    DocumentRoot /Applications/MAMP/htdocs
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/wp-example"
    ServerName wp.example.dev
    <Directory "/Applications/MAMP/htdocs/wp-example">
        AllowOverride All
    </Directory>
</VirtualHost>

Here the path of /Applications/MAMP/htdocs/wp-example should match the path of folder we just placed in htdocs. Save the file and close it.

Add hostname to hosts file

To be able to access to our website with a unique domain name, which is running on our virtual host, we have to edit one of OS X system file, hosts. You cannot access to this file using Finder, so we must use Terminal application. Terminal is located in Application > Utility. Opening Terminal, please execute the next command:

sudo vi /etc/hosts

After executing sudo vi /etc/hosts, it asks for the super user’s password. If you are not sharing your PC with somebody else, this is your user password, so type in the password and hit the enter. If you haven’t used Vi editor before, I assume it is quiet hard to use it, so just simply please do I say.

  • Press key i, and you see -- INSERT -- at the status bar of Terminal.
  • Move your cursor to the very bottom.
  • Copy and paste lines below by pressing Command + v at the same time.
# Wordpress Example
127.0.0.1 wp.example.dev
dscacheutil -flushcache
  • Press etc key and type :wq, then hit the enter. This saves the file and quit Vi editor.

You don’t need Terminal anymore after editing the hosts file, so close it.

Modify wp-config.php

To enable Wordpress to communicate MySQL, you must define MySQL’s information in Wordpress file. This file is called wp-config.php, however, that file doesn’t exist by default, instead there is wp-config-sample.php. So rename that file to wp-config.php and open it with a text editor. You must define valuables as follows.

define('DB_NAME', ‘wp_exmaple');
define('DB_USER', ‘root');
define('DB_PASSWORD', 'root');

Other than that you don’t need to edit anything, so close the file.

Restart MAMP

After done all these steps, you are ready to start your own Wordpress website. Restart MAMP so that all modifications affect.

Follow Wordpress Installation Wizard

Open the browser and type wp.example.dev in the URL field. It will open the Wordpress Installation Wizard, so just fill the fields. Don’t forget to keep the username and the password to avoid any trouble in future. click “Install Wordpress” and it will start to install Wordpress to your server. After install, it will display login page, so type in the info you just created, and you’ll see Wordpress dashboard.

Wordpress Installation Process

Congratulation

That’s it. You can access to the dashboard at wp.example.com/wp-admin/ from next time. Now you learned how to host Wordpress website on MAMP with the unique domain name.