Skip to content
A blank starter theme for WordPress using WPGulp, Underscores and Bootstrap 4.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
inc
languages
template-parts
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
404.php
LICENSE
README.md
archive.php
comments.php
footer.php
functions.php
gulpfile.babel.js
header.php
index.php
package-lock.json
package.json
page.php
phpcs.xml.dist
readme.txt
rtl.css
screenshot.png
search.php
sidebar.php
single.php
style.css
style.min.css
wpgulp.config.js

README.md

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.

Screenshot of WordPress Bootstrap Starter Theme

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.

You can’t perform that action at this time.