Skip to content

Brilliant Coding Blog

Be Brilliant

A Bootstrap 4 hackable WordPress Theme

Notes from the dev

For the Brilliant Coding blog, I built a new WordPress theme called: Brilliant Coding Alpha. Previously I had used existing WordPress themes, which were great, but lacked some of the flexibility I wanted. Instead I wanted something a little more “hackable”, after some research I found a few “theme builders” that took a similar approach.

I had a number of specific design objectives:

  • Allow for compilation of the Bootstrap libraries so I could have granular control over SASS overrides
  • Be able to test the theme design outside of WordPress (test mode uses the built-in PHP web server)
  • Disable some of the annoying WordPress defaults (ie extra header tags and Genericons -> Font Awesome)
  • JavaScript and CSS minification via a npm build process and not from a WordPress plugin
  • Integrated third-party components (Google analytics, Disqus, Tinyurl)

Bootstrap 4 support

The Brilliant Coding Alpha theme is optimized for performance.
Screenshot from GTmetrix

To support Bootstrap 4, I put the theme inside a parent “build” directory. This allows me to use the similar Nodejs tools as the Bootstrap project and avoid having to deal with issues like compiling SASS from PHP. However this does add an extra step of running some npm scripts prior to zipping up the theme. The resulting process is:
Build CSS and JS with npm → Zip the theme directory → Upload to WordPress → Active the theme

Test pages

Due to adding an extra build step, it was useful to be able to test the theme before uploading to WordPress. The theme’s design allows for this by loading all theme WordPress data into an associative array and passing that array to the PHP templates. The test pages simply mock content into that structure and a few global WordPress functions.
Depending on the type of content, the theme already loads most post content and metadata. However additional data can be added by modifying “includes/load-wpdata.php”

Future Roadmap

Next on the roadmap is to remove the specific BrilliantCoding blog design elements and instead allow the theme to be customized through the WordPress appearance menu. Also I will be adding additional layouts based on the other Boostrap 4 examples

Supporting the project

You can find additional technical information in the Github project Readme.

If you would like to support this project please feel free to add bugs, enhancements, or general recommendations to the Issues tab in Github.

Have a comment, question or correction about this article? I’d love to hear from you!
Simply reply to this article’s tweet: link to status
Or direct message me at: link to profile

A Bootstrap 4 hackable WordPress Theme