Using the included example child theme
All of our themes come with a sample child theme included in your download package, which you can activate, and get going with, right away. However, if you’d like to dive in further and understand the ins-and-outs and how we’ve set it all up, you can continue reading this article.
Additionally, here’s a video that will walk you through the sample child theme included and how it works.
Basic Child Theme Setup
In setting up a child theme, the first step is to set it up as WordPress requires. If you’re completely new to the concept of WordPress child themes, you should start here: http://codex.wordpress.org/Child_Themes
Create a Child Theme Directory
The first thing you need to do is create a theme folder and place it with the rest of your WordPress themes. This new directory will end up being located here on your server:
/wp-content/themes/your-child-theme/
Create a style.css File
And inside that, you need to create a style.css file with this at the top:
/* Theme Name: Your Child Theme Description: Child theme for the Theme Blvd framework Author: Your Name Template: jumpstart */
This style.css file is needed for WordPress to actually register the child theme and link it to the parent theme. You can find more information specifically about what you can do with your child theme’s style.css here.
Template: jumpstart
The above line is crucial, as it actually links your child theme up to the parent theme located within your WordPress themes directory. This parameter should match the name of the directory your parent theme exists in. So, for example, here we’re referencing the Jump Start theme located here on your server:
/wp-content/themes/jumpstart/
Create a functions.php File
If you plan to make any PHP customization, creating a functions.php will be the important next step. This will end up being located here on your server:
/wp-content/themes/your-child-theme/functions.php
Include the Theme Blvd Framework at the Top
At the top of your Child theme’s functions.php, you’ll want to place this line.
require_once( get_template_directory() . '/framework/themeblvd.php' );
With this line at the top of your functions.php, you can continue with your action and filter modifications below. However, you can also think of this line as a sort of divider if you plan to edit any pluggable functions.
/* Framework pluggable function overrides go here. */ require_once( get_template_directory() . '/framework/themeblvd.php' ); /* Actions and filters go here. */
So, why do we have this line at all in our Child theme? —
Good question, sir. Truth be told, this is not actually required but will make your life a little easier. We’ve actually gone out of our way to make it so this is possible. This makes it a bit easier to modify actions and filters of the parent theme, and utilize the framework’s API functions.
Let’s take the example of editing a framework’s action. For example, let’s say you want to remove the parent theme’s default logo function setup from the theme options and replace it with it your own function. Without our included framework line shown above, you’d have to do something like this:
function my_header_logo(){
// show my logo ...
}
function my_hooks(){
remove_action( 'themeblvd_header_logo', 'themeblvd_header_logo_default' );
add_action( 'themeblvd_header_logo', 'my_header_logo' );
}
add_action( 'after_setup_theme', 'my_hooks' );
Because WordPress includes the functions.php of the child theme before that of the parent theme, any action modifications won’t work unless we then hook them in to happen later. So, by including the framework at the top of your child theme, you can accomplish the above example like this instead:
function my_header_logo(){
// show my logo ...
}
remove_action( 'themeblvd_header_logo', 'themeblvd_header_logo_default' );
add_action( 'themeblvd_header_logo', 'my_header_logo' );
Conclusion
This article was meant to explain how the child theme is constructed, but remember all themes we sell comes with an example child theme already setup for you. Don’t be intimidated… Give it a whirl! Assuming you have the parent theme already uploaded to your site, simply upload the child theme also, and activate it. Remember to also edit its style.css, and give it a name and author.