Version 1.2
https://github.com/SimonPadbury/b5st
b5st is a simple, Gutenberg-compatible WordPress starter theme loaded with Bootstrap 5 and Bootstrap Icons — using node-sass for preprocessing its SCSS into CSS.
-
UNLICENCE (open source).
-
Simple, intuitive, clean code. Theme CSS and JS, functions and loops are organized into different folders.
-
A starter CSS theme –
/theme/css/b5st.css
, enqueued. (Note: do not put your styles instyles.css
, because that is not enqueued.) -
b5st.css
is generated from SCSS usingnode-sass
. The SCSS files are also included. -
A starter JS script –
theme/css/b5st.js
– unrequired but present as a starter (and with a commented-out enqueue). -
Dimox breadcrumbs (http://dimox.net/wordpress-breadcrumbs-without-a-plugin/). Inserted using an action hook.
-
Long read prose (paragraphs etc) in single posts has increased font size for wide viewports, using CSS
clamp()
.
-
WordPress. 😎
-
Served from a CDN:
- Bootstrap v5.0.2 CSS
- Bootstrap v5.0.2 bundle JS
- Bootstrap Icons v1.5.0
-
Optional (see “Preprocessing SCSS Files” below):
- NodeJS
- node-sass
Bootstrap Sass is not included. But you can follow the instructions at https://getbootstrap.com/docs/5.0/customize/sass/ to bring Bootstrap Sass into your project.
-
Bootstrap navbar with WordPress menu and search.
- Navbar dropdowns (child menus) are handled by a custom walker nav menu class.
-
Bootstrap customized comments and feedback response form.
-
Gutenberg editor stylesheet – into which has been copy-pasted the typography styles from Bootstrap 5’s Reboot CSS plus a few extras.
-
b5st has a centered narrow single-column layout, so that it can make use of Gutenberg’s extra-wide and full width blocks. In the front-end CSS, these are handled by a variation on Andy Bell’s full bleed utility.
I recommend you do not simply use b5st as-is, and then do all your designing in a child theme.
b5st is only a meant to be a place to start a WordPress/Bootstrap 5 project. It is easier and better to directly rebuild b5st to suit your design needs. Besides, future improvements to b5st may make it not compatible with your child theme -- so, you may not be able to “upgrade” your project to a newer version of b5st simply by swapping it out.
With that said, you can develop child themes based off your (b5st-based) project. After you have taken and made b5st your own, modifying its layouts, styles etc. to create your own theme, and then deployed it on a live website, then you can later make child themes from what will then be your (client’s) website theme. For example, for special occasions you can make a child themes with alternate colors and backgrounds, seasonal layout changes, etc.
To aid you at that point, b5st has the following child-theme friendly features:
-
Many functions are pluggable.
-
Theme hooks – paired before and after the navbar, post/page main, (optional sidebar) and footer. Parent theme hooks are able to recieve actions from a child theme.
-
Also, the navbar brand, navbar search form and sub-footer “bottomline” are inserted using pluggable hooks. So, a child theme can override these.
In the theme/
folder there is a scss/
folder containing all the SCSS files that have been used to create the file theme/css/b5st.css
.
You can (beautify and) edit b5st.css
directly — or you can preprocess the SCSS files using whatever you prefer to use. A simple way is to do the following:
-
Install b5st (this theme) into your WordPress (local) development environment.
-
Download and install NodeJS, if you don’t have it already.
-
In your terminal,
cd
into theb5st
folder. Just donpm install
so thatnode-sass
gets installed as a dev dependancy (see the b5stpackage.json
). -
You can then run
node-sass
in the terminal usingnpm run scss
, and stop it usingctrl+C
.node-sass
will look for changes in SCSS files inside theb5st/theme/scss
folder and output the CSS file(s) in theb5st/theme/css
folder. -
Initially, only
b5st/theme/css/b5st.css
is enqueued infunctions/enqueues.php
(after the Bootstrap 5 enqueue). You can add more enqueues the same way. -
Your WordPress (local) development server likely has no live-refresh for when CSS files are modified in this way. So, manually do a browser refresh ↻ whenever you want to see your CSS changes.
See the LOG.md