{"id":4592,"date":"2018-08-03T17:03:51","date_gmt":"2018-08-03T17:03:51","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2018\/08\/03\/how-to-create-a-boldgrid-child-theme\/"},"modified":"2021-08-16T22:26:55","modified_gmt":"2021-08-17T02:26:55","slug":"how-to-create-a-boldgrid-child-theme","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/boldgrid\/how-to-create-a-boldgrid-child-theme\/","title":{"rendered":"How to Create a BoldGrid Child Theme"},"content":{"rendered":"

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<\/strong>.<\/p>\n

For our child theme, we’re going to customizing and extending the BoldGrid Hydra<\/a> theme.<\/p>\n

What Are Child Themes?<\/h2>\n

A child theme is like a customizable theme built under a parent theme. You take the original code and add anything you want.<\/p>\n

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.<\/p>\n

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

Level Up Your BoldGrid Site<\/h2>\n

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.<\/p>\n

Starting with a Directory and Two Files<\/h2>\n

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

~\/wp-content\/themes\/parent-theme<\/pre>\n
~\/wp-content\/themes\/parent-theme-child<\/pre>\n
As seen above, you need the parent and child theme in the main theme directory.<\/p>\n
Insert this code into the functions.php<\/code> file:<\/p>\n
\n
<?php<\/span> function<\/span> boldgrid_enqueue_styles<\/span>() {     $parent_style<\/span> = 'boldgrid-hydra'<\/span>;     wp_enqueue_style<\/span>( $parent_style<\/span>, get_template_directory_uri<\/span>() . '\/style.css'<\/span> );     wp_enqueue_style<\/span>( 'child-style'<\/span>, get_stylesheet_directory_uri<\/span>() . '\/style.css'<\/span>, array<\/span>( $parent_style<\/span> ),     wp_get_theme<\/span>()-><\/span>get<\/span>('Version'<\/span>) ); } add_action<\/span>( 'wp_enqueue_scripts'<\/span>,'boldgrid_enqueue_styles'<\/span> ); ?><\/span><\/pre>\n<\/div>\n
And insert this code into the style.css<\/code> file:<\/p>\n
\n
\/*<\/span>  Theme Name:   Hydra Child<\/span>  Theme URI:    https:\/\/www.boldgrid.com<\/span>  Description:  BoldGrid Hydra Child Theme<\/span>  Author:       BoldGrid Support<\/span>  Author URI:   https:\/\/www.boldgrid.com<\/span>  Template:     boldgrid-hydra<\/span>  Version:      1.0<\/span>  License:      GNU General Public License v2 or later<\/span>  License URI:  https:\/\/www.gnu.org\/licenses\/gpl-2.0.html<\/span>  Tags:       <\/span> *\/<\/span><\/pre>\n<\/div>\n
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.<\/p>\n
Downloading and Installing the Hydra Child Theme Example<\/h2>\n
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<\/a> from the BoldGrid Github Page and install it<\/a> just as you would any other WordPress theme downloaded from the Internet as a compressed file.<\/p>\n
Create Your Own Page Templates and Styles<\/h2>\n
Now that you have a child theme, you can do the following easily:<\/p>\n