When using Bootstrap 4 as a basis for WordPress one of the biggest work items is the integration with different plugins, widgets and template pages. This work usually requires a lot of filters and rolling your own bespoke methods to manipulate the WordPress output to use Bootstrap 4 HTML markup. I don’t say this as a negative, that IS the game with WordPress and Bootstrap: you can do whatever you want, with whatever you want and DevDmBootstrap4 wouldn’t be possible without it.
Looking at the Bootstrap 4 examples page, you can see there is a whole showcase of examples showing you “what is possible” for a motivated individual with Bootstrap 4 at their finger tips. This is easy stuff if you have a static website. However, folding these examples into WordPress is a little more involved and takes some knowledge of WordPress systems to create something that is actually usable.
You can guess my goal here: Show you how to make these Bootstrap 4 examples into actual functioning WordPress child themes using DevDmBootstrap4. I say this with the caveat that these will NOT be perfect. I will however get you to something functional. I encourage you to take the reigns, make it your own, expand on what I have done, share it for others and help us all be better developers.
The first example we will start with is, The Blog Template.
Step one in the conversion process is to study the Bootstrap 4 example but imagine it was powered by WordPress instead of being static HTML. With the Blog Template example it was clear this was going to be the Home Page of the WordPress site, there is need for a featured post system, a sidebar, a text widget with a background option for the sidebar and a custom nav walker to get the nav bar links to be powered by a WordPress menu.
Fortunately for us DevDmBootstrap4 is built EXACTLY for this type of work. A simple view source in our browser will give us everything we need to break this example down and create a WordPress theme that actually works. So sit back and let’s take a journey through the process of creating a child theme for DevDmBootstrap4. We are going to touch a lot of different areas of the WordPress development skill set: widget areas, filters, hooks and the customizer API just to name a few.
In this blog series I will walk you through the thought process and what I did to create the final child theme, which you can download here.
Let’s get started…
First I downloaded a new devdmbootstrap4-child theme to get started. I changed the Theme Name and Description in the meta tags of style.css to reflect the project. I saw that the Blog Template example was using a blog.css file so I copied the entire contents and just pasted it into style.css. You could download blog.css and send it through the enqueue system. You should, if this is going to be a production level project.
The first tricky bit was the Google font in the HTML header.
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">I choose to add this as an @import in the style.css so I wouldn’t have to mess with the header.php at all from the original devdmbootstrap4 parent theme.
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700,900');Remember, this (parent / childtheme relationship) is a system that is 100% centered around duplicating files from the parent devdmbootstrap4 into a childtheme to override it. The less we have to do, the better. You can enqueue Google fonts as well but I wanted things to be simple.
Here is a full guide on Google Font integration into WordPress that I have used in the past.
https://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/
In the next post we will talk about building the HTML header and footer from the Blog Template Example. In the mean time download the completed child theme and take a look for yourself and try it out.
Leave a comment below with any questions, email me danny@devdm.com or subscribe for updates in the sidebar of this site to get notified when the next post goes live. Good luck!
