Last Updated on March 31, 2017
Filed under General

Child Themes

At this point, I just want to introduce you to the concept of WordPress Child themes. If you’re familiar with Child themes in general and how they work, feel free skip all of this.

What is a Child theme?

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

WordPress Codex

The concept of Child themes is what makes WordPress theme development really fun. This can be a little confusing at first, but once it clicks, it'll be easy to master.

Basically, you can designate one of your themes as the “Parent” theme. If you’d like to make customizations to that Parent theme, you can create a Child theme that will run along side of it. The child theme will then hold all of your edits and customizations.

Why use a Child theme?

If you’re using any legitimate WordPress theme, most likely this theme will get updated over time, as any software or plugin would. So, if you edit any of your theme’s files, it’s going to be very difficult to ever update it because you’re essentially “locking” yourself in with your customizations.

So instead, you should make all of your edits from a Child theme. This will allow you to update the Parent theme in the future and also it will help to keep your edits consolidated and organized in a single area (i.e. your Child theme’s directory).

Included Child Theme

theme-zip

Each of or WordPress themes are built using the BNE Framework with complete child theme support. Because of this, we bundle a child theme example with each purchase to get you started. It includes:

  • style.css - For your CSS changes (No need to @import the parent styles, we’ve already taken care of that for you!)
  • functions.php - For your parent theme overrides, filters, actions, etc. It will already include a function to pull in the parent framework assets.
  • theme.js (commented out) - Need to add custom JS? We’ve already setup the file for you; just need to un-comment it in functions.php to enqueue it.

Simply upload both the included parent and child themes. You would then activate only the child theme version. This will save you a lot of headache as if you ever decided to edit the core files of the parent theme, those changes would be lost on the next update.

Pre-made Child Theme

Below is a basic child theme ready to use for Sweetness.

Sweetness Child Theme

Child Theme Requirements!

You do not have to use our provided child themes; however, two items are required. First, in style.css, you must declare the correct Template name.

/*
Theme Name: Sweetness Child Theme
Description: A child theme based on Sweentess by BNE Creative
Author: Your Name
Author URI: http://www.yourwebsite.com
Version: 1.0
Template: sweetness
*/

In the above example, the Parent Template is called "sweetness" which corresponds to the theme directory /wp-content/themes/sweetness/. Remember, you do not need to use the @import call to import the parent CSS, that is already taken care of.

Secondly, within functions.php, you need to include the framework functions. This call will brining in all the necessary options, settings, and hooks available to you.

<?php
require_once( get_template_directory() . '/framework/bne-functions.php' );