How to Create a HireBee Child Theme

When wanting to modify HireBee to suit specific needs of your website, the best practice is to create a child theme. Using a child theme ensures that the changes you create aren’t deleted when you update your theme.

What is a Child Theme?

A child theme inherits its functionality from a parent theme. A child theme is used when you need to customize an existing theme although need the ability to update the theme. In the case of this documentation, the parent theme is ‘HireBee’.

What You Will Need to Know

To create a child theme for HireBee you will need to have:

A basic understanding of PHP, HTML and CSS
Some knowledge of child themes for WordPress
The ability to add files to your hosting site

Step 1) Creating a Child Theme Directory

On your localhost HireBee site (/wp-content/themes/), create a new folder named “hirebee-child”. If you’re working remotely, you’ll need to sftp or ssh to the server first and create it there.

Step 2) Creating a Style Sheet File

Inside the new child theme folder, create a file called, “style.css”. It’s where we’ll place any style changes you want to make. The stylesheet must begin with the following code so copy and paste it.

/*
Theme Name: Hirebee Child Theme
Version: 1.0.0
Description: A child theme for Hirebee.
Author: Your Name
Author URL: http://www.your-url.com
Text Domain: hirebee-child
Template: hirebee
*/

Further Steps

Replace the “Author” and “Author URL” with the details relevant to you
The “Template” entry refers to the directory name of the HireBee parent theme

Note:

If you renamed the default ‘hirebee’ theme folder, you’ll need to change the “Template” entry to match it.

Step 3) Creating a Functions File

Inside the same child theme folder, create a file called, “functions.php”. Copy and paste in the code snippet below. This will load your child theme “style.css” file that we created in the previous step.

<?php
/**
* Registers the stylesheet for the child theme.
*
*/
function hirebee_child_styles() {
    global $hrb_options;

    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
    wp_enqueue_style( 'hrb-color', get_template_directory_uri() . "/styles/$hrb_options->color.css", array(), HRB_VERSION );
}
add_action( 'wp_enqueue_scripts', 'hirebee_child_styles', 999 );

Step 4) Activating Your Child Theme

Now you’re ready to enable your new child theme on your website. Once you log in to your site, you should see your child theme listed and ready for activation.

Log in to your site’s admin panel
Go to “Appearance” => “Themes”
Click the “Activate” button

Visit your website once you’ve activated it. Guess what? Nothing looks different at all! That’s because you’ve just setup the skeleton child theme. From here, you can add page templates, different styles, override default functions, and more.

Adding a New Font

To get you started, let’s add a custom style to override the default HireBee font.

Open your style.css and paste in this code below the header comments.

body {
  font-family: "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

Here’s what it should look like afterwards:

/*
Theme Name: HireBee Child Theme
Version: 1.0.0
Description: A child theme for HireBee.
Author: Your Name
Author URL: http://www.your-url.com
Text Domain: hirebee-child
Template: hirebee
*/
 
body {
  font-family: "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

Visit your website and then refresh your browser window. It’s only a subtle change so you might not even notice it. Again, this is just a simple example of how to change something via css.

Unregister Parent Stylesheet

In some cases, you’ll want to completely start from scratch and not inherit any of the default HireBee styles. In order to do that, you’ll need to `dequeue` the HireBee “style.css”.

Add the following two lines in your functions file within the existing first function you already added.

// Disable the HireBee default styles.
wp_dequeue_style( 'hrb-styles' );

Here’s what it should look like afterwards:

<?php
/**
 * Registers the stylesheet for the child theme.
 *
 * @since 1.0.0
 */
 function hirebee_child_theme_enqueue_styles() {
   wp_enqueue_style( 'child-style', get_stylesheet_uri() );
 
   // Disable the HireBee default styles.
   wp_dequeue_style( 'hrb-styles' ); 
 }
 add_action( 'wp_enqueue_scripts', 'hirebee_child_theme_enqueue_styles', 999 );

Now if you reload your website, you’ll see all the styles gone (except for your font change). You’ve basically got a clean canvas to work from but that means there’s a whole lot of work for you to do! Again, this is just an extreme example. Most people leave the stylesheet and just override certain elements.

Adding a Screenshot to Your Child Theme

hirebee-child-theme-image It’s pretty boring not having a screenshot to identify your child theme. To create your own after your child theme is completed, you’ll need to know the following:

The screenshot should be named “screenshot.png”
The image size should be 1200×900 (to support HD displays)
Place it in the root of your child theme directory

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: none

Rating: 5 - 1 vote