https://github.com/stevepolitodesign/wordpress-bootstrap-starter-theme

A blank starter theme for WordPress using WPGulp, Underscores and Bootstrap 4.
https://github.com/stevepolitodesign/wordpress-bootstrap-starter-theme

Last synced: about 17 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/stevepolitodesign/wordpress-bootstrap-starter-theme
• Owner: stevepolitodesign
• License: gpl-2.0
• Created: 2019-04-20T19:34:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T20:03:55.000Z (over 1 year ago)
• Last Synced: 2023-03-06T00:22:00.939Z (over 1 year ago)
• Language: CSS
• Homepage: https://stevepolito.design/blog/create-a-bootstrap-theme-for-wordpress/
• Size: 2.02 MB
• Stars: 11
• Watchers: 2
• Forks: 3
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WordPress Bootstrap Starter Theme

A blank starter theme for WordPress using [WPGulp](https://github.com/ahmadawais/WPGulp), [Underscores](https://underscores.me/) and [Bootstrap 4](https://getbootstrap.com/).

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](https://raw.githubusercontent.com/stevepolitodesign/wordpress-bootstrap-starter-theme/master/screenshot.png)

## Initial Setup

This theme uses [WPGulp](https://github.com/ahmadawais/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.

1. Run `npm i` in the same directory as this theme.

1. 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](https://underscores.me/). 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](https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults)

## Automatic Form Styling

Bootstrap does not style form elements be default. Instead, a developer must manually add the [correct classes](https://getbootstrap.com/docs/4.3/components/forms/#form-controls) 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](https://codex.wordpress.org/CSS#WordPress_Generated_Classes) and therefore should be included in a WordPress theme. These, and other WordPress specific styles generated by [Underscores](https://underscores.me/) are located in `assets/css/base/_wordpress.scss`.