-
Notifications
You must be signed in to change notification settings - Fork 104
Creating a b4st child theme
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-masterabove, because downloaded GitHub repositories have the suffix-masteradded to them.
And give it a name, e.g. b4st-child/
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.
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;
}
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.
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.