How to Create a Child Theme to Customize Your WordPress Website

BoldGrid works on top of WordPress as a website builder to make the CMS more intuitive. While you can customize almost everything within your BoldGrid Dashboard, there are some cases where you would want to use a child theme. If you modify a theme’s files directly, and the theme author releases an update, then your modifications will be lost. Using a child theme will ensure this does not happen.

If you have knowledge of PHP, HTML and CSS, a child theme can be used to do things like customize your page, header and footer templates, add additional widget areas or sidebars, and much more. This guide will explain the basics of creating a child theme using one of our existing themes, Hydra.

A child theme is made up of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create. We have included these files in the example provided. Since your child theme style.css will contain CSS code, the example uses functions.php to enqueue it, as well as the parent style. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Here is the code that is used in the example functions.php file:

<?
function boldgrid_enqueue_styles() {
    $parent_style = 'boldgrid-hydra';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ),
    wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts','boldgrid_enqueue_styles' );
?>

Your child theme also needs to contain a file called style.css, which will use the Template slug to point to the parent folder name. Here is the example CSS header, required by WordPress to be used at the top of the file:

/*
 Theme Name:   Hydra Child
 Theme URI:    https://www.boldgrid.com
 Description:  BoldGrid Hydra Child Theme
 Author:       BoldGrid Support
 Author URI:   https://www.boldgrid.com
 Template:     boldgrid-hydra
 Text Domain:  boldgrid-hydra-child
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:       
*/

You should already have the parent theme installed if you are attempting to modify it. The following step by step guide will explain the process to install an example child theme for BoldGrid, and activate it. If you are using another BoldGrid theme and wish to modify it, changing the $parent_style variable in functions.php, and the Template: tag in style.css to point to the appropriate parent theme folder name are the only changes that you would need.

Installing the Child Theme for BoldGrid

1. Download the Hydra Child Theme Example.
2. In your BoldGrid Dashboard, select Customize > Change Themes
3. Select Add New
4. Select Upload Theme
5. Select Browse
6. Open the directory you saved the Child theme Example in to locate the actual file on your computer
7. Select Open
8. Select Install Now
9. Select Activate

Congratulations! You now know how to install and activate a child theme for BoldGrid. Feel free to use the GitHub example we shared as a base for creating a child theme for your own use, and ensure you change the corresponding code in functions.php and style.css to match the parent theme you are targeting.