logomichael sumner
Contact
AWWWards Nominee — Michael Sumner
Special Kudos Award Badge

Setup a New WordPress Theme Using Yeoman Generator

Following up on an article about WordPress Theme Development basic know-hows. Particularly on how to set up a theme using a Mac OS.

Let’s get a scaffolded WordPress theme prepared in 5 minutes!

Installing the WordPress Yeoman Generator

If you haven’t yet, install Local by Flywheel. You can download the Local by Flywheel Windows version here. The video below was on a Mac, but instructions are almost the same.

Once you’re done installing Local, go over to the Installation guide for the WordPress starter theme generator.

You’ll install the Yeoman generator first, by changing directory until you find your theme folder, for example:
cd example-site/wp-content/themes/example-theme

See this video for reference on installing the Yeoman generator:

Once you have installed the starter theme, you’ll go through some common setups like: installing your framework of choice, and excluding certain SCSS files to reduce CSS bloat file size.

Installing Bootstrap on a WordPress Theme

Once you’ve completed installing your WordPress starter theme using the Yeoman generator-npm-wp-s-theme, the next step will be to get your CSS routine set up, before you begin customising the style files.

You’ll install the Bootstrap framework first, by changing directory until you find your theme folder, for example:
cd example-site/wp-content/themes/example-theme

Once you’re in your theme folder, enter the following command:
yarn add -s bootstrap

This will install Bootstrap and save it as a dependency for our project. Anyway, it’s being saved in the node_modules folder where all these files will not be used when you launch the website, since they will be compiled as style.css.

What you need from the Bootstrap framework are its SCSS files to work with, as well as its useful mixins, and a ‘framework’ from which you can easily built out a custom theme, to name a few.

Finally, you need to append the bootstrap.scss stylesheet onto our theme’s stylesheet.

Go to your sass/style.scss file, and replace this Normalize section:

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@import "normalize";

With the Bootstrap stylesheet below:

/*--------------------------------------------------------------
# Bootstrap
--------------------------------------------------------------*/
@import "../node_modules/bootstrap/scss/bootstrap";

Since Bootstrap already comes with Normalize, you don’t need another one!

It is a standard not to edit any of the node_modules files because you may need to re-install those files in the future. So to be sure, you make it a rule to only ‘include’ these files, and tamper with them on our own stylesheets.

That is the installation of bootstrap under 1 command, and including it onto our theme’s SCSS stylesheet file.

Now you need to remove any more unnecessary lines of code that came part of the Yeoman scaffolding generator. Please read on.

Excluding SCSS Files on a WordPress Theme

As you now have the Bootstrap framework part of your theme stylesheet, it looks like there are some style codes that are the same as the ones you have on the Bootstrap framework.

Here are a few processes you can go through.

    • check for any duplicate styles set up by the Yeoman scaffolding tool. Here is an example:

    • remove any unused styles like these _buttons.scss default lines of code, e.g. since you already have them on the Bootstrap framework:

Thank you for reading! These 3 tips will get you started on your next WordPress theme, using the WordPress Yeoman scaffolding tool by mnyorba.

Please feel free to comment for any questions, or if you would like more tips on using Yeoman scaffolding tool for WordPress theme development.

If you liked this article you might want to find out more about WordPress Theme Development on Mac.