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.
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.
wp-content/themes/
.twentytwentyfour-child
. Remember that it must inherit the name of the parent theme, in this case twentytwentyfour
.cta:hosting_wordpress
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) */
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');
?>
Appearance > Themes
.Now that your child theme is active, you can start customising it. Here are a few ideas:
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;
}
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
:
header.php
from the parent theme to your child theme folder.header.php
in your child theme.It's important to test your child theme thoroughly to make sure everything is working properly. Here are a few things you can chec:
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