I recently launched a new set of tutorials on how to build a WordPress theme with Bootstrap 4 over at BootstrapWP.com. It is a great series for those looking to learn how to customize Bootstrap Sass variables and use the latest online tools all while creating a custom WordPress theme.
In this series, the user learns how to build one of my most popular WordPress themes called StanleyWP.
We start by customizing the header and footer of the WordPress theme by changing the values of some of the Bootstrap 4 Sass variables. We then get into creating custom page templates, custom post types, adding metaboxes, and how to use the WordPress Customizer to edit settings within the theme.
Enhance your Development Workflow
While creating the theme I also go over how to use tools to help enhance and speed up your development workflow.
These tools include:
A lot of people think that working with the terminal is hard, but once you learn a few commands it is actually really fun to work with. You get to a point where you would rather work within the terminal rather than using another GUI. You can just do so much in it!
For example, with just running the gulp command in our WordPress development project we get:
- a new browser tab that launches our WordPress theme with Browsersync.io
- a task to watch our Sass code for changes and automatically compiles, minifies, and refreshes our browser window
- a task that watches for any JS changes and then runs the code through JSHint, alerts us of any errors, compiles, and minifies
- a task to zip all our production ready files
While learning how to use these tools, you are also building a WordPress theme with a custom design, portfolio custom post type, custom page templates, and much more. This will give you the skill set to take a PSD file or a HTML/CSS template and convert it into a WordPress theme.
These are all great skills to have that can and will be used in any projects that you work on online.
If this is something that sounds interesting, check out BootstrapWP and sign up today.