WordPress Bootstrap Starter Theme

A blank starter theme for WordPress using WPGulp, Underscores and Bootstrap 4.

This theme has minimal styling, and serves as a blank slate for developers. The only assumption this themes makes is that you want to use Bootstrap. Use as little or as much of the framework as you see fit.

Initial Setup

This theme uses WPGulp for "An advanced & extensively documented Gulp WordPress workflow".

To start developing your theme follow these instructions:

1. Open wpgulp.config.js and edit the projectURL variable.
2. Run npm i in the same directory as this theme.
3. Run npm start.

Once these steps are complete, you only need to run npm start moving forward.

Assets

Styles

• assets/css/style.scss is the main stylesheet that contains all partials. This is compiled into style.css.
• assets/css/bootstrap contains the Bootstrap core .scss files and should not be edited. Instead use assets/css/base/_bootstrap_overrides.scss to override the default variables.
• Feel free to add additional partials to this theme.

Javascript

• assets/js/custom contains any custom javascript files. By default it comes with two scripts generated by Underscores. All files in this directory are compiled into assets/js/custom.js and assets/js/custom.min.js. By default the themes loads assets/js/custom.min.js.
• assets/js/vendor contains any vendor javascript files. This is also where bootstrap.js is loaded. All files in this directory are compiled into assets/js/vendor.js and assets/js/vendor.min.js. By default the themes loads assets/js/vendor.min.js.

Images

• Place any images into assets/img/raw. From there, they will be optimized and placed in assets/img.

Overriding Bootstrap Variables

If you wish to override Bootstrap's default variables, do so by redeclaring those variables in assets/css/base/_bootstrap_overrides.scss. Use assets/css/bootstrap/_variables.scss as a reference for all existing variables, but DO NOT update this or any other file located in assets/css/bootstrap/.

More information on variable defaults

Automatic Form Styling

Bootstrap does not style form elements be default. Instead, a developer must manually add the correct classes to each form element.

In an effort to streamline this process, this theme automatically styles all form elements by extending the .btn class on these elements. These styles are located in assets/css/base/_forms.scss.

Base WordPress Styles

Some css classes are required by WordPress and therefore should be included in a WordPress theme. These, and other WordPress specific styles generated by Underscores are located in assets/css/base/_wordpress.scss.