Setting up the WordPress development environment on your new MacBook Pro (2022 edition)

A few weeks back, I shared my checklist on how I set up my new MacBook Pro.

In this post, I’ll share how I set up the WordPress development environment on my new MacBook Pro.

Set up the apps

Terminal

Shell > Edit Background Color 
View > Show Tab Bar

View > Bigger 

To increase the font size.

Shell > Use Settings as Default

When you are satisfied with the customizations on the Terminal, you can save the settings as your Default.

VSCode

For my IDE I use Visual Studio Code – I can’t recommend it enough. It is easy to use and comes with a ton of helpful extensions.

The first time you open up VSCode you will need to enable the shell command.

Press Cmd+Shift+P and then type ‘shell command’ and hit enter.

Install the following extensions:

• Editor Config for VS Code
• ESLint
• GitLens
• Highlight Matching Tag
• IntelliSense for CSS class names in HTML
• Live server
• PHP Intelephense
• phpcs
• phpcsbf
• Prettier – Code formatter
• Stylelint
• WordPress Snippet

Code > Preferences > Turn on Settings Sync 

Sign in with my Github account. This will sync up my VS Code settings on multiple devices.

FTP client

I use FileZilla. Download and install FileZilla.

If you are like me and forgot your FTP client passwords, here is a quick way of setting up the FTP site configurations on the new mac.

On my old Mac, open the Site Manager, do a quick clean up and delete all the sites that are not currently used(mostly old client site configurations). Once you are happy with the sites, close the Site Manager.

File > Export
☑️ Export Site Manager entries

Your Site Manager connection settings are now saved into an XML file.

Transfer the XML file to the new mac.
On the new Mac, Go to:

File > Import 

Select the XML file.

All the FTP connection settings are now picked up from the XML and added to the Site Manager.

MAMP

Install MAMP (MAMP Pro gets installed by default). I uninstall MAMP PRO right away as I don’t plan to buy the Pro version and know the license will expire after 14 days.

MAMP  > Preferences > General > When starting MAMP
☑️ Start servers

Local By Flywheel

I use Local by Flywheel for my WordPress development. It has simplified my development workflow and I can’t recommend It enough.

Download and install the app.

I wanted to have the minimal sites set up on the new mac. For starters, I decided to set up two of my personal sites and add more as I start working on client websites.

I found exporting sites on the Local extremely slow to the point where my old Mac froze several times. I ended up creating 2 new local sites on the new Mac. I exported the data from my online sites using the All-in-One WP Migration plugin and then imported the data into the newly created local sites.

On each of the two local sites, I turned on the One-click Admin feature from the site’s Overview Panel.

I installed two Add-ons – Link checker and Instant Reload. I find these two extremely useful when I build sites locally. Log in with your Local account to start using the Add-ones.

For the Instant Reload, make sure to turn on the setting that automatically runs Instant Reload when you start the site. Go into the Local Sites > Tools Panel to do this.

Open MAMP.

Go to MAMP > Preferences > Server. Change the Document root to where the Local Sites are installed. Click “OK” and Restart the server.

GitHub for Desktop

Occasionally I prefer to navigate Github using the GUI and I find Github for Desktop helpful enough for that. Download and install the app.

Login with your GitHub account. Clone the repositories that you work on, to your Mac.

Set up the tools

Homebrew

Homebrew is a package manager that installs all the programs on the Mac that didn’t come installed by Apple.

Run the following command on the terminal to install Homebrew.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

If your Mac doesn’t have Xcode installed (which is more than likely since this is a new mac) this will also install Xcode. You will be prompted a few times to enter the ‘admin’ password during the installation.

Once the installation is complete, run these two commands in your terminal to add Homebrew to your PATH:

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/femypraseeth/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"

Next, run the following command:

sudo chown -R $(whoami) ~/.config

This makes sure the account you’re logged in as has ownership of the homebrew folders and prevents permission errors later on.

NOTE: If you are on the Apple chip, home brew is installed on /opt/homebrew/bin
In my older Mac, it was installed under /usr/local/bin

Node/npm

Node.js is a JavaScript runtime environment and npm is a package manager. Some of the development tools and build processes I use for clients rely on these so I like to have them ready.

Download and install the packages. npm should be packaged with Node.js.

This will install the following at these locations:

• Node.js v16.13.1 to /usr/local/bin/node
• npm v8.1.2 to /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

After installation, run these two commands:

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

This will prevent permissions errors.

I installed Gulp and PostCss plugin for Gulp. Some of the legacy projects use them, so I might have it ready. Run the following commands:

sudo npm install gulp-cli -g
sudo npm i -g gulp postcss

Node Version Manager

NVM allows me to switch between different versions of Node. Some older projects are built with earlier versions of Node/npm so it’s handy to have it installed. Run the following command to install NVM.

npm install -g n

If you run into folder permission issues run this command instead

sudo npm install -g n
sudo chown -R $(whoami) /usr/local/bin/n
sudo chown -R $(whoami) /usr/local/lib/node_modules

Git

Git is a version-control system for tracking changes. It should be installed along with Xcode. To check if you have git on the system, run

which git

In my case, it was installed already. If not this guide will help with the installation. 

Git CLI and SSH

My recent favorite is Git CLI. It makes it easy and saves time when I interact with GitHub such as cloning repositories, etc.

brew install gh  

To authenticate my account in GitHub and create a token, run the following command and follow the prompts:

gh auth login

When you are prompted to ‘Enter a passphrase for your new SSH key’ type in a bunch of random strings.

Using a passphrase makes the SSH key more secure and it is highly recommended. Make sure you remember this passphrase because you’ll be prompted for it, every time you try to communicate with your Git repository.

When you are prompted for the authentication token, go into https://github.com/settings/tokens on your web browser and create a Personal access token.

Click on ‘Generate new token’.

Give a name in the ‘Note’ text box.

Select the scopes The ‘repo’, ‘read:org’, ‘admin:public_key’ and click ‘Generate token’.

Back to the terminal, copy the token you just created and you are done.

PHP

Once you have Homebrew installed, you can use it to set up PHP. Here is the command that does this:

brew install php

NOTE: PHP is installed here /opt/homebrew/Cellar/php/8.1.1

MySql

Similar to PHP, install MySql using Homebrew and then start the service.

brew install mysql
brew services start mysql

NOTE: My SQL is installed here /opt/homebrew/Cellar/mysql/8.0.27_1

Composer

This is a package manager for PHP. To install it, run these commands. The first one downloads the setup file, and the second one runs it.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php')";
php composer-setup.php

This will generate a file called composer.phar. You need to move it to the bin folder and add it to PATH, so it can be used globally.

sudo mv composer.phar /usr/local/bin/composer 
export PATH=${PATH}:~/.composer/vendor/bin

PHP Coding Sniffer (phpcs)

PHP Code Sniffer (PHPCS) is a package for syntax checking your code against a set of rules.

In the case of WordPress development, phpcs will detect PHP errors against the WordPress Coding Standards that is set as the base for the ruleset.

These errors are pointed out within the IDE (in my case VSCode). It also gives alternative ways to handle the violations. To install phpcs run the command:

composer global require squizlabs/php_codesniffer

To check if you have phpcs properly installed run:

which phpcs

This command returns the path to your phpcs install. You should see something like this:

/Users/current_user/.composer/vendor/bin/phpcs

If nothing is returned, do a quick restart.

To view a list of all available coding standards, run the following command:

phpcs -i

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend

Currently, WordPress Coding Standards are not installed.

WordPress Coding Standards

To install the WordPress Coding Standards, run the following commands:

cd ~
git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs

This uses the git clone command to download the source code from GitHub. The last parameter shows where I want to put the source code, in my case ~/wpcs.

phpcs will load all the coding standards from its built-in list, and from any directory specified under ‘installed_ paths’. We need to add the ~/wpcs directory to the installed paths. For this run the command:

phpcs --config-set installed_paths ~/wpcs  

Using config file: /Users/femypraseeth/.composer/vendor/squizlabs/php_codesniffer/CodeSniffer.conf
Config value "installed_paths" updated successfully

Add this to the composer using the following command:

composer global require "squizlabs/php_codesniffer=*"

To check if everything is installed correctly, run the following command (You should see WordPress standards in the results.) :

phpcs -i

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

Set up VS Code with the coding standards

Open VSCode and install phpcs and phpcbf extensions, if you haven’t already done that.

Do CMD+ SHIFT + P and type in settings.json to open up the settings.json file for VSCode.

Add these two lines into the JSON object:

“phpcs.executablePath”: “/Users/current_user/.composer/vendor/bin/phpcs”,
“phpcs.standard”: “WordPress”

The phpcs.executablePath should be the result of the following command:

which phpcs

Restart VSCode.

Final notes

This completes the installation and setup of everything that I use on my new MacBook Pro. It’s a fairly simple setup. I hope you find these notes useful during your Mac configuration.

I have been using the Mac for almost a month now and the performance is pretty good. The battery lasts for almost 2 days and that’s a big relief from the old one that barely made it to an hour.

Don’t forget to decorate your MacBook with some cool stickers. I started my collection with this dog mom sticker!