InMotion Hosting Support Center

Are you ready to take your BoldGrid creativity to the level? In this article, we're going to show you how you can create a child theme for a BoldGrid site.

For our child theme, we're going to customizing and extending the BoldGrid Hydra theme.

What Are Child Themes?

A child theme is like a customizable theme built under a parent theme. You take the original code and add anything you want.

Meanwhile, when an update to the parent theme is released, it's absorbed without affecting the extra work you've done. This is the power of the child theme.

You can extend any WordPress theme using the parent/child theme inheritance system. This makes WordPress virtual infinite as far as customization goes.

Level Up Your BoldGrid Site

Why not level up? With WordPress, you have the power to do virtually anything. Creating a child theme helps you learn valuable skills with HTML, CSS, JavaScript, and PHP. These are the foundational languages that WordPress is built on, and you can use them to build any site you can imagine.

Starting with a Directory and Two Files

In order to get started, you will only require a directory named after your child theme and two files with the directory: style.css and functions.php.

~/wp-content/themes/parent-theme
~/wp-content/themes/parent-theme-child

As seen above, you need the parent and child theme in the main theme directory.

Insert this code into the functions.php file:

<?php
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' );
?>

And insert this code into the style.css 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
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:       
*/

If you'd like to use a different theme, you can update the theme information in either of these files to use a different BoldGrid theme.

Downloading and Installing the Hydra Child Theme Example

BoldGrid has made it even easier to get going with a child theme starter kit. All you need to is download and install the Hydra child theme example from the BoldGrid Github Page and install it just as you would any other WordPress theme downloaded from the Internet as a compressed file.

Create Your Own Page Templates and Styles

Now that you have a child theme, you can do the following easily:

With page templates, you can create your own custom pages, no longer limited to the page layouts BoldGrid provides by default. And while creating, your own page, you'd be best advised to copy and page the original page templates from BoldGrid and change them as you see fit.

Was this article helpful?

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

n/a Points
2018-09-30 4:32 pm

Which is the correct directory?  style.css or styles.css?

Staff
3,151 Points
2018-10-01 10:56 am
The directory would be something similar to the following:

~/wp-content/themes/parent-theme-child/

That directory would contain the two files:

~/wp-content/themes/parent-theme-child/style.css
~/wp-content/themes/parent-theme-child/functions.php

I have updated this guide to correct the misspelling in the file name. Our apologies, thanks for bringing this to our attention!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

2 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!