WordPress

Setting up Virtual Hosts

Go to MAMP > Preferences > Ports and set Apache Port to be 80

Open the hosts file in VS Code:

cd /etc
code hosts

Add the urls you want to use:

127.0.0.1 your-site.test

(you may need to sudo save, VS Code makes this easy for you)

Add the virtual hosts to the end of /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf:

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

<VirtualHost *:80>
  ServerName your-site.test DocumentRoot "/Users/username/Sites/directory"
</VirtualHost>

(notice how we are re-setting up the main localhost first) And make sure the NameVirtualHost is set to:

NameVirtualHost *:80

Then in /Applications/MAMP/conf/apache/httpd.conf Uncomment this line:

# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Find this line:

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

and change it from None to All: Lastly find these two instances:

Listen 8888
ServerName localhost:8888

and change them to:

Listen 80
ServerName localhost:80

and then it should work!

If you find your site feels a little sluggish compared to using localhost you can speed up the lookup time by adding it as an alias. So in /etc/hosts:

127.0.0.1 localhost your-site.test
Updated: 6 February 2022

Altering Site Address and WordPress Address

When switching to virtual hosts from a localhost setup the site address and wordpress address general settings were causing some issues. You may find you can't access the admin, because its setup for a different url, so here's how to fix that.

Open your projects wp-config.php file and after the “define” statements (just before the comment line that says “That’s all, stop editing!”), insert a new line:

define('RELOCATE',true)

Now if your site is at http://www.yourdomainname.com your need to go to http://www.yourdomainname.com/wp-login.php (notice how we are manually accessing the wp-login.php file)

Login in as normal and make the changes in General > Settings

Make sure to remove define('RELOCATE',true) after successfully changing the urls.

Updated: 6 February 2022