A Bootstrap 4 hackable WordPress ThemePosted on: Last modified: Published by: Matthew Jackowski
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 created a new, easily “hackable” theme that 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)
- 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
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”
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.