WordPress Theme Development on Mac

Welcome to the setup of a WordPress theme development environment on a Mac!

WordPress theme development does not have a definite guide. This is what makes it [web development] a creative effort.

Think about the evolving tools of a web developer (which takes place every 2 years), the evolving technologies that a web developer has to learn, and the evolving applications that a web developer has to keep track of — like WordPress.

So with a very coarse outline, you can fine-tune the details to match your project’s requirements. What is important is that the main process and systems are kept in check.

Summary of the Steps Involved

To begin with, please see an over-head view of what’s involved:

Your Theme Development Checklist

Your Theme Development Toolbelt

Your Useful Plugins Collection

Your Theme Development Testing

I will not cover each and every detail, but in the following article I will provide a bird’s-eye view of what you will have to cover.

Checklist

I thought it would be better to turn it into an email course, so that you take learning out of it over a period of a few weeks.

The WP Theme Development Toolbelt for Mac

Development Environment

Text Editors

Theme Scaffolding tools

Useful Plugin collection (automated)

Browser testing (automated for Desktop, Mobile)

Development Environment Tools

There are new trending development environment tools almost every month, that it does prove challenging to keep the tools you currently use. But out of the many out there, these are the top of their tier based on their active communities. Please let me know your thoughts in the comments below.

Installing Local by Flywheel

Once you have downloaded Local by Flywheel, open it up. And create a web project!

Starting Your First Local WordPress Website

Local Flywheel machine starting.A view of the Local Flywheel Dashboard. The ‘plus’ icon on the lower-left is to create a new WordPress projectHere we type the project title to use.Next, we choose the domain name if we might want to make this different from the project title.If you might want to use a different version of PHP or MySQL, you can change it here. You can change these later if needed though.Now, WordPress will need to be setup with an Admin user.The project is now being created and is downloading the latest version of WordPress.Your new project is now ready. On the upper-right side you can click the button ‘View Site’.You are now taken to the new project website, running on your Local by Flywheel development environment!

Now, before we continue, we’ll have to find out what text editor to use. You can skip this part if you already have your favourite one!

Text Editor Tools

Just like the many development environments out there, we also have a lot of text editor tools to choose from. Of course, you can skip this if you already have one set up. So please choose from any of the ones below:

Text Editor tools you can choose from:

VS Code

Atom

Sublime Text 3

Vim

For now, we have chosen VS Code as it seems to be a promising community founded by Microsoft, who have recently [4 June 2018] acquired GitHub. Nevertheless, almost all text editors are equal in their nature — a text editor. It’s how the web developer finds it comfortable to use and easy to navigate which are more important than choosing the ‘best’.

Theme Scaffolding Tools

There are many ways to start out with a WordPress theme.

But first and foremost it is better to begin with a starter theme, rather than building files and setting up from scratch.

Please have a look below between the Yeoman scaffolding generators to choose from, or the Sage theme. Both of which provide you a 10,000-hour head start in theme development.

For the easy and simple builds, use Yeoman scaffolding tools

Through the power of Yeoman.io, there are many scaffolding tools for you to choose from.

Here are some of the ones for you to try and have a look for what you would like to use best:

For the ultimate theme organisation, the Sage theme

The Sage theme is the right one for you, if you require more organisation in your theme, which includes modern integrations between staging/development/production of a theme, then Sage is the right one for you.

For this professional perspective, the Sage theme is still completely free. But it does come with plugins to make your theme even more organised and more intuitive.

For the most active community, the Sage theme

This goes without saying that if you are into WordPress theme development, then the Sage theme is by far the most active community when it comes to developing WordPress themes using a starter theme.

The community here have gravitated towards the Sage theme as the hub for modern WordPress theme development. You can view the Roots community forum here.

For now, however, we will be using the Yeoman scaffolding toolnpm-wp-s-theme by mnyorba, for it’s ease-of-use and simplicity.

Setting Up Your Theme Development Files

This chosen yeoman generator/scaffolding tool is great for WordPress themes. You can check it’s ever-growing list on its github repo.

Running the Yeoman generator’s command

We’ll start setup of your theme files now.

Using your terminal, go into your /wp-content/themes/newtheme folder, and paste in the command found in the chosen Yeoman generator:

yo npm-wp-s-theme

You will now get to setup your Theme name, description, etc.

Here’s a good setup you can use:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Localhost address:localhost

Domain site:[enter key]

Theme Name:NewTheme

Theme slug:nt

Theme URI:http://newtheme.com

Author:Mic Sumner

Author URI:https://www.micsumner.com

Author email:mic@micsumner.com

Description:Arobust theme forNewTheme website.

Bug Report:https://www.micsumner.com

.gitignore file:Y

.editorconfig file:Y

.stylelintrc file:n

.npmrc file:Y

configuration:Y

Once complete, you will now have a bare-bones starter theme ready to build upon!

You may install Bootstrap if you wish, a very popular framework that provides basic styling and SCSS variables from which you can modify.

Installing Bootstrap

Very quickly, you can use the following command within your ‘newtheme’ folder:

yarn add bootstrap

That will create a node_modules/bootstrap folder for you.

Now, let’s add the entire bootstrap stylesheet into your theme’s main stylesheet. Because at the moment we only have basic WordPress CSS taken from the Underscores theme that came packaged with this Yeoman generator.

To do so, go to your scss/style.scss file, and rename the ‘Normalize’ section into ‘Bootstrap’. Also, change the path to:

Why Build Your Own Plugin Collection

That way through using the WP Core plugin, it makes it really quick for you to install many plugins.

As compared to dragging and dropping each and every one of the plugins into the ‘Upload file’ input field in the WordPress Dashboard > Plugins > Add Plugins admin page, which surely becomes a hassle for WordPress theme developers!

Through using WP Core, you simply have to install that 1 plugin — WP Core — and add your collection key. As an example, use the collection key8WsiniJpCfxYkLLExEXN for a list of essential free WordPress plugins.