WordPress Theme Development on Mac

Updated reading time

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

You can have an entire theme development checklist, and a 6-part guide for you on how to make your own over here.

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.

 

WordPress Theme Development on Mac

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.

Development Environment tools you can choose from:

But for now, let’s go with the most recent tool — Local by Flywheel.

 

Development Environment Setup

All of the development environment tools are free, but we’ll go with Local by Flywheel as it’s easier to begin WordPress theme development. Besides, it was built for WordPress theme development!

We’ll begin with the setup and download of Local by Flywheel.

Installing Local by Flywheel

You can download Local by Flywheel here.

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

Starting Your First Local WordPress Website

WordPress Theme Development on Mac
Local Flywheel machine starting.
WordPress Theme Development on Mac
A view of the Local Flywheel Dashboard. The ‘plus’ icon on the lower-left is to create a new WordPress project
WordPress Theme Development on Mac
Here we type the project title to use.
WordPress Theme Development on Mac
Next, we choose the domain name if we might want to make this different from the project title.
WordPress Theme Development on Mac
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.
WordPress Theme Development on Mac
Now, WordPress will need to be setup with an Admin user.
WordPress Theme Development on Mac
The project is now being created and is downloading the latest version of WordPress.
WordPress Theme Development on Mac
Your new project is now ready. On the upper-right side you can click the button ‘View Site’.
WordPress Theme Development on Mac
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.

WordPress Theme Development on Mac

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:

You can search Yeoman.io > Discovering Generators for more of these scaffolding tools.

 

WordPress Theme Development on Mac

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.

 

WordPress Theme Development on Mac

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 tool npm-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:

 

Related:  Web Development Setup on Windows 10 (Part 1)

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:

@import ../node_modules/bootstrap/scss/bootstrap

That way, you can load the entire bootstrap.scss file found there!

Anyway, the Bootstrap stylesheet comes with Normalize.

What we’ve got so far

Now, we’ve got a starter theme with Bootstrap stylesheet loaded onto it.

To begin your WordPress theme development, use the following command:

npm run watch

As defined by that Yeoman generator, this command will automatically watch your files to see if you save them, then it will reload your browser tabs that are running on the localhost:3000 proxy.

You can take it from here!

If you need any more help please reach out to me in the comments below.

 

Useful Plugin Collection (Automated)

In a recent article, it is absolutely free for you to create your own collection of WordPress plugins, so that you can install them as you wish.

This automated way of installing plugins comes from the plugin WP Core.

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 key 8WsiniJpCfxYkLLExEXN for a list of essential free WordPress plugins.

Steps to Install a Group of Plugins Easily

  1. Install the WordPress plugin WP Core.
  2. Go to the plugin’s Settings, and paste your collection key.
  3. Visit the WP Core website to find your collection key.
  4. And click ‘Save’.
  5. Afterwards, you will be prompted to install the plugins.
  6. Select which plugins to install, and click ‘Install’.
  7. Now, select what plugins to ‘Activate’ for now.
  8. And you’re done!
  9. You can delete the WP Core plugin once you are done.

 

Browser Testing (Automated for Desktop, Mobile)

You need to get your users seeing the right layout, therefore browser testing is important.

To easily get into this, browsers have a feature called Remote Debugging.

This is split between remote debugging an Android mobile device, or remote debugging an iOS mobile device.

Remote debugging an Android mobile device

Follow this guide to easily set up remote debugging on the Chrome browser, connected to your Android mobile device.

You can also check this video out:

Remote debugging an iOS mobile device

For an iOS mobile device, you can try out the instructions found here.

Note: you may want to use the Safari browser in lieu with remote debugging your iOS mobile device.

The Easiest method to testing on mobile devices

Of course, this is the easiest method, which is to simply resize your browser screen. However, this does not make it a true-users’ experience, as there are likely to be differences.

On Chrome, you can use Toggle the device toolbar to simulate the mobile user’s experience.

The good thing is that browsers are getting smarter in simulating a mobile device. Of course, nothing is truer than an actual mobile device.

But for the most part, you will do well with this.

Difference With Using the Browser’s Device Mode Compared to an Actual Mobile Device

It is difficult to imagine the overall user’s experience with the entire website on their hand.

Also, you may not see the mobile browser toolbar from which you can change its background colour.

Having an actual mobile device makes it easier to focus on the entire user’s experience, as well as empathise what a mobile user will be experiencing.

 


Conclusion

WordPress theme development comes in different environments. It’s not a one-size-fits-all approach when it comes to web development. But that is where creativity shines in the developer.

I hope that this coarse guide will get you digging into WordPress theme development. So that you can choose a setup that works best for you.

The technologies here may or may not last for long.

But what is certain is that the quest for optimum theme development keeps evolving to become simpler, more developer-friendly, and better to empathise for the User Experience.

Thank you for reading this article, and have a good day!

If you’re a digital agency, I have a gift for a FREE 6-part email course on Agency Automation for WordPress Theme Development. Please do check it out!