Blog / Child Themes in WordPress and how to create them

Child Themes in WordPress and how to create them

by SW Team

Child Themes in WordPress and how to create them

If you've ever wanted to customise your WordPress site without losing your changes after a theme update, a child theme is the perfect solution. A child theme allows you to modify the design and functionality of your website without touching the code of the original theme. In this guide, we will show you step by step how to create and configure a child theme in WordPress.

What are the advantages of a Child Theme?

A child theme is a theme that inherits all the features and functionality of another theme, known as the parent theme. When the parent theme is updated, your customisations in the child theme remain intact.

Steps to Create and Configure a Child Theme

1. Create the Child Theme Folder

  1. Access your WordPress installation directory via FTP or your hosting service's File Manager.
  2. Navigate to wp-content/themes/.
  3. Create a new folder for your child theme. Give it a representative name, for example: twentytwentyfour-child. Remember that it must inherit the name of the parent theme, in this case twentytwentyfour.

cta:hosting_wordpress

2. Create the style.css file

Inside your child theme folder, create a file called style.css and add the following header:

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    http://yourdomain.com/twentytwentyfour-child
 Description:  Theme child of Twenty Twenty-Four
 Author:       Your Name
 Author URI:   http://yourdomain.com
 Template:     twentytwentyfour
 Version:      1.0.0
*/

/* Here you can add your personalised styles (CSS) */
  • Theme Name: The name of your child theme.
  • Template: The name of the parent theme folder (must match exactly).

3. Create the functions.php file

In the same folder as your child theme, create a file called functions.php. This file will be used to enqueue the stylesheet of the parent theme and any other functionality you wish to add.

<?php
function twentytwentyfour_child_styles() {
    // Binding the stylesheet of the parent theme
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    // Binding the child theme's stylesheet
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'twentytwentyfour_child_styles');
?>

4. Activate the Child Theme

  1. Go to your WordPress administration panel.
  2. Navigate to Appearance > Themes.
  3. You should see your child theme in your theme list. Click "Activate".

5. Customise the Child Theme

Now that your child theme is active, you can start customising it. Here are a few ideas:

Adding Custom Styles

You can add your custom styles directly into the style.css file of your child theme that you created earlier where you defined the template data.

/* Here you can add your own custom styles (CSS) */
/* Change the background colour of the body */
body {
    background-color: #f0f0f0;
}

Overwrite Parent Theme Templates

If you need to modify a parent theme template, copy the parent theme file to your child theme folder and edit it there. For example, to modify header.php:

  1. Copy header.php from the parent theme to your child theme folder.
  2. Make your modifications to the copy of header.php in your child theme.

6. Testing and Debugging

It's important to test your child theme thoroughly to make sure everything is working properly. Here are a few things you can chec:

  • Make sure all styles and scripts load correctly.
  • Check that custom templates work as expected.
  • Check your site on different browsers and devices to ensure compatibility.

Conclusion

Creating and setting up a child theme in WordPress is a great way to customise your website without the risk of losing your changes with theme updates. By following these steps, you can create a child theme and start making your own modifications safely and effectively. By following these steps, you can create a child theme and start making your own modifications safely and effectively - feel free to experiment and give your WordPress site a unique touch!

If you have any questions or need more help with your child theme, leave us a comment and we'll be happy to hear from you!

cta:domains

i