DevDmBootstrap4

Twitter Bootstrap 4 WordPress Starter Theme for Developers

Creating a WordPress Theme using the Bootstrap 4 Blog Template Example

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!

Download the Blog Template Example Child Theme

4 Comments

  • Can’t wait for the next post! This is exactly what I’ve been meaning to do for my blog with this template.

  • Amazing blog! Do youu have any hepful hints
    for aspiring writers? I’m planning to start myy own website soon but I’m
    a little lost on everything. Would you propose starting with a free platform like WordPress or
    go for a paid option? Theree are so many options out there that I’m totally overwhelmed ..
    Any recommendations? Thanks a lot!

  • I would like to thank you for the efforts you’ve put in penning this blog.

    I’m hoping to check out the same high-grade blog posts by you later on as well.
    In fact, your creative writing abilities has inspired me to get my own,
    personal website now 😉

  • The best in class, Depoxito provide you high-end experience
    that direct the see and vibes of authentic VIP standarts,
    we present you the best enthralling to high-level experience
    of VIPs expect in any top end casino, grand conscious casino royale provide you the further
    studio design element including the grand blackjack, offering our VIP Customer the best experience of a Salon privee table.

    New style table afterward feature across the room similar to grand roulette upgraded
    on our provider playtechs mini prestige roulette which delivering more
    engaging and richer playing experience. The
    extra experience contains a sum of seven tables including five
    blackjack tables, one roulette table and one baccarat table.
    Grand stir casino royale has been high hand-engineered to fit the needs of our
    customer to using it, and contains unique elements that is specially meant to maximize the impact value we got from our customers and diversify it to the existing network.

    Soon, Depoxito will produce an enlarged certainty technology upon breathing
    casino for our VIP member, these most protester technology ever seen in stimulate casino including
    this enlarged reality. Which permit players to experience products on an entire new level which is
    never seen past literally leaping out of the game and taking
    the blackjack, baccarat, roulette and other game into the total entire
    level.
    Depoxito VIP Baccarat, we have the funds for you the entirely exclusive alive VIP Baccarat that is played afterward occurring to 7 players at the thesame table and our very trained lovely
    conscious baccarat dealer. And of course our VIP fanatic will character as if they were really sitting at one of the
    top casino baccarat table. This immersive gaming experience creates a
    hugely daring space that our VIP players will find hard to surpass.

    Here is the list of stir casino game that depoxito provide,
    we provide the widest range of bring to
    life casino games upon the shout from the rooftops including
    : blackjack unlimited, blackjack prestige, roulette, baccarat, poker, hi-lo, sic bo,
    and grand enliven casino royale such as Grand Baccarat, Grand Blackjack and Grand Roulette for our VIP member.
    And of course as a believer of Depoxito you can enjoy all the games that we offer to you, every you infatuation to pull off is
    just visit our site http://www.depoxito.com and register it solitary takes going on to 3 minutes and later youre good enough to play in any game
    that you want.
    Be our VIP, visceral our VIP fanatic of course
    arranged you the best facilitate you can get from us every you
    need to be a VIP supporter is enormously easy. every you need is just keep playing upon our site, accumulation and put-on past a VIP later than the amount that our company had written, keep
    playing and our customer support will entre you that you are
    promoted to become a VIP aficionada upon our site.


Leave a Reply

Your email address will not be published. Required fields are marked *

  • Dev Updates?

    Follow DevDmBootstrap4 Theme development with email updates.

  • Recent Posts

  • Recent Comments

  • Archives

  • Categories

  • Meta