Creating a child theme in WordPress is a great way to customize your website without losing your modifications when parent theme updates. In this blog post, we will walk you through the process of creating a child theme step by step.
What is a Child Theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. By using a child theme, you can make modifications to your site without touching the core files of the parent theme. This ensures that your changes won’t be overwritten when the parent theme is updated.
Step 1: Create a Child Theme Folder
First, you need to create a new folder for your child theme in your WordPress themes directory. You can do this using an FTP client or through your web host’s file manager.
For this example, let’s say the parent theme is called “twentytwentyone”. You can name your child theme folder anything you like, but it’s a good practice to use a recognizable prefix such as “twentytwentyone-child”.
So, create a new folder called “twentytwentyone-child” in the wp-content/themes directory.
Step 2: Create a style.css File
Next, create a new file called style.css inside your child theme folder. This file will contain the information about your child theme and any custom CSS you want to add. Open the file in a text editor and paste the following code:
/* Theme Name: Twenty Twenty-One Child Theme URI: https://yourdomain.com/twentytwentyone-child/ Description: Twenty Twenty-One Child Theme Author: Your Name Author URI: https://yourdomain.com Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyone-child */
Replace the theme name, description, author, and URIs with your own information. Make sure the Template line matches the folder name of the parent theme (in this case, “twentytwentyone”).
Step 3: Create a functions.php File
Create a new file called functions.php inside your child theme folder. This file will contain any custom PHP functions you want to add or modify from the parent theme. Open the file in a text editor and paste the following code:
<?php // Enqueue parent theme stylesheet
function twentytwentyone_child_enqueue_styles() {
$parent_style = 'parent-style';
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')
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles' );
This code snippet enqueues the parent theme’s stylesheet so that the child theme inherits its styles.
Step 4: Activate the Child Theme
Now that you have created your child theme files, go to your WordPress admin dashboard and navigate to Appearance > Themes. You should see your child theme listed there. Click on the Activate button to activate your child theme.
Step 5: Customize Your Child Theme
With your child theme activated, you can now start customizing the CSS and PHP files without affecting the parent theme. Any changes you make will be preserved when the parent theme is updated.
If you want to override a specific template file from the parent theme, simply copy the file from the parent theme’s folder to the child theme’s folder and make your changes there.
Conclusion
Creating a child theme in WordPress is a great way to customize your website without losing your modifications when the parent theme updates. By following these steps, you can easily create and customize a child theme for any WordPress theme. Happy customizing!