The theme has been updated to v1.81. The Download Page is updated with links. The WordPress Theme directory version has been updated as well.
About this Update:
- Updated Bootstrap version to 4.3.1
- Update Fontawesome Free version to 5.7.2
The theme has been updated to v1.81. The Download Page is updated with links. The WordPress Theme directory version has been updated as well.
About this Update:
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.
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!
The theme has been updated to v1.71. The Download Page is updated with links. The WordPress Theme directory version has been updated as well.
About this Update:
The theme has been updated to v1.7. The Download Page is updated with links. We skipped v1.6 this time as I wanted to try and get it submitted to the Theme Directory before I actually generated a release. My Theme Reviewer had more changes and Bootstrap 4.1 has become available, so it is time for a new release.
About this Update:
WordPress Theme Directory Status
Could v1.7 be the one that gets us finally listed?! Only the Shadow Knows…
We made it. Officially listed! https://wordpress.org/themes/devdmbootstrap4/
The theme has been updated to v1.5. The Download Page is updated with links.
About this Update:
WordPress Theme Directory Status
We are close. These changes should be what we need to get officially listed.
The theme has been updated to v1.4. The Download Page is updated with links.
About this Update:
This update is fairly straight forward.
WordPress Theme Directory Status
Still no traction on our approval ticket. I have submitted this version of the theme. I will poke them again.
A new theme update wills itself into existence today, v1.3. Head on over to the Download Page to grab it.
About this Update:
WordPress Theme Directory Status
A lot of the code changes in this update were the result of v1.2 being shutdown for admittance to the WordPress Theme Directory. I guess it has been a while since I have played that game. Some new tools have emerged that are automating a lot of the Theme Checks. One such tool called, “Theme Sniffer” https://github.com/WPTRT/theme-sniffer was actually really helpful and there were clearly some security flaws with the Theme that needed to be addressed. I have submitted version 1.3 to the Theme Directory but it is missing our SEO tweaks and latest Bootstrap 4 update. Things don’t move very fast over there. I anticipate v1.4 of the Theme to be in sync with the Theme directory. If we get approved. Maybe I can re-submit v1.3 as it is on GitHub. I’ll try.
Knowledge Base
We have a new tab at the top here called Knowledge Base. This is where I will post my fielded questions from Twitter and email danny@devdm.com.
“In brightest day, in blackest night, No evil shall escape my sight. Let those who worship evil’s might Beware my power –Green Lantern’s light!”
A new theme update hits today, v1.2. Head on over to the Download Page to grab it.
About this Update:
Introduction of the devdmbootstrap4-scss-child theme.
The default child theme devdmbootstrap4-child doesn’t include any of the SCSS code. It is just a simple child theme to get you started coding outside of the parent. This new child theme includes the full suite of SCSS and compiled CSS used by the parent theme devdmbootstrap4. So you are getting the entire Bootstrap 4 SCSS code and the additions for WordPress that devdmbootstrap4 brings to the table. This child theme’s functions.php actually dequeues the parent stylesheet and enqueues the compiled CSS bundled within itself.
This translates to COMPLETE control for the savvy developer who wants to get in there to tweak, extend, and compile their own version of a Bootstrap 4 WordPress compatible theme.
WordPress Theme Directory Submission.
I’ve submitted the theme officially to the WordPress theme directory. I will update with any news as it becomes available.
The theme documentation on the site here is being worked on daily.
I’m still working through all the different theme file pages but most of the important stuff is fleshed out to give you any assistance you might require when developing your child theme.
As always, my office is open! Leave a comment here, email me danny@devdm.com or dm me on Twitter.
It is time true believers, to open the gates and get WordPress into the Bootstrap 4 world.
I’ve been working on DevDmBootstrap4 since Bootstrap 4 Alpha was announced. With the success of DevDmBootstrap3 I wanted to make sure I was ready when Bootstrap 4 officially came out of Beta, and here we are. Bootstrap 4 release blog post announcement.
I have had to rebuild and retool some things on the migration from Bootstrap 3.x to Bootstrap 4.x, but those who are familiar with DevDmBootstrap3 will find that DevDmBootstrap4 follows the same file patterns and code structure as its predecessor.
I’ll be working on bringing up more child-themes and fleshing out the documentation on the site here in the coming months.
You can sign up for the Newsletter on the sidebar to get updates. I’m going to be sending those around the 1st of every month to give a state of the theme, what new content is available and what has been updated. I’ve got BIG plans for child-themes this year, including full Gutenberg support.
We are not on the WordPress Theme Directory yet but you can find everything on GitHub or the Download page.
If you have any feedback or questions my office is always open! Leave a comment here, email me danny@devdm.com or dm me on Twitter.