Customising WordPress with Child Themes

Published on
June 1, 2024

Overview

A child theme in WordPress is a sub-theme that inherits the functionality, features, and style of its parent theme. Using a child theme isa safe way to modify a WordPress theme without losing your changes when the parent theme is updated. This guide will explain how to create and customise a child theme for your WordPress site hosted on HSJ.HOST, ensuring that your customisations are preserved through updates.

Prerequisites

  • A WordPress site hosted on HSJ.HOST.
  • Administrative access to your WordPress dashboard.
  • Access to your site's files via FTP or the File Manager in your hosting control panel.
       
       

Procedure

1. Understanding the Importance of Child Themes

  • Modifications made directly to a parent theme's files can be overwritten and lost during theme updates. A child theme allows you to apply and maintain customisations separately.
       
       

2. Creating a Child Theme

  • Step 1: Create a new directory in your /wp-content/themes/ directory for your child theme. Name it appropriately, usually based on the parent theme's name (e.g., twentytwentyone-child).
  • Step 2: Inside the child theme directory, create a style.css file. At the top of this file, add the following header information, customising it for your child theme:
       
       

css code

/* Theme Name: Twenty Twenty-One Child Theme URI:http://example.com/twenty-twenty-one-child/ Description: Twenty Twenty-OneChild Theme Author: Your Name Author URI: http://example.com Template:twentytwentyone Version: 1.0.0 */

Replace Template: with the name of your parent theme directory.

  • Step 3: Create a functions.php file in your child theme directory. Add the following PHP code to enqueue the parent and child theme stylesheets:
       
       

php code

<?php add_action( 'wp_enqueue_scripts','my_child_theme_enqueue_styles' ); function my_child_theme_enqueue_styles() {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') ); }

3. Activating Your Child Theme

  • Log into your WordPress dashboard and navigate to Appearance > Themes. You should see your child theme listed among the available themes. Activate your child theme by clicking the ‘Activate’ button.
       
       

4. Customising Your Child Theme

  • You can now safely make customisations to your child theme without affecting the parent theme. Common customisations include:
     
  • Adding custom CSS to the style.css file.
  •  
  • Overriding parent theme template files by copying them from the parent theme’s directory to your child theme directory and then modifying them.
  •  
  • Adding custom PHP functions to the functions.php file.
         
         

5. Maintaining Your Child Theme

  • Keep your parent theme updated to ensure compatibility and security. Since your customisations are in the child theme, they will be preserved through updates.
       
       

Conclusion

Creating and using a child theme is a best practice for customising your WordPress site. It allows you to take advantage of the robust features of a parent theme while making and keeping custom changes that make your site unique. By following these steps, you ensure that your customisations are sustainable and maintainable, providing flexibility and stability for your WordPress site on HSJ.HOST.

Join our newsletter

Unlock Exclusive Offers Subscribe to Our Newsletter!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.