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.

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.

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: