Creating a b4st child theme - SimonPadbury/b4st GitHub Wiki

Do you need to create a WordPress child theme in order to use b4st? No. In and of itself, b4st is a Bootstrap 4 starter theme, for Wordpress. Hence the name b4st.

But if you prefer or need to work off of a child theme, this tutorial will give you a minimum child theme with the following folder/file structure:

b4st-master        <== The b4st master theme, as downloaded from GitHub

b4st-child/
  |
  ├── css/
  |    └──b4st-child.css
  |
  ├── functions.php
  └── style.css

This tutorial assumes that you downloaded b4st and have not renamed it. So you see the reference to b4st-master above, because downloaded GitHub repositories have the suffix -master added to them.

1. Create a child theme root folder

And give it a name, e.g. b4st-child/

2. Create a base stylesheet with front matter

This stylesheet must be named style.css and it must be placed in your child theme root folder.

The base stylesheet is necessary for instructing WordPress. In you are following this tutorial exactly, then begin with the following front matter. (You can change it up later.)

/*
Theme Name:   b4st Child
Template:     b4st-master
Version:      1
Text Domain:  b4st_child
*/

However, as with b4st, this is not where you will compose your own styles in here.

3. Create a stylesheet folder and create your working stylesheet within it

E.g. css/b4st-child.css

I usually place a test style in here, so that I can prove that the enqueuing is really happening later.

body {
  background-color: yellow;
}

4. Create a functions file

WordPress themes don't do much unless they have a functions file. Your functions file must be named functions.php and it must be placed in your child theme root folder.

In the functions file, add an enqueue pointing to your working stylesheet:

<?php

function b4st_child_enqueues() {

  wp_enqueue_style( 'b4st_child',
    get_stylesheet_directory_uri() . '/css/b4st-child.css', false, null);

  /* Enqueue your own styles in here */

  /* Enqueue your own scripts in here */

}
add_action('wp_enqueue_scripts', 'b4st_child_enqueues', 101);

Notice that the 'add_action' line ends with 101? This guarantees that the child stylesheet (bst-child.css') is added to the webpage <head> after the parent theme stylesheet. Because in the b4st enqueues file, the add_action function ends with 100.

5. In the WordPress admin for your (development) website, select and activate your child theme

Assuming that you had the master theme b4st already installed and activated, you will see no error messages, and only one change in the frontend when you refresh the browser: the <body> turned yellow. Just as you hoped it would.

If you've come this far, then you know where you're going from now on.