Create Child Theme in WordPress

/in /by

Do you want to create a child theme in WordPress?

A child theme is a WordPress theme that inherits the functionality of another WordPress theme, with additional customizations option.
Many users create a child for their current theme so that they can safely customize their website design without losing changes when the theme developer releases an update.

You can make many changes to your theme’s appearance using Styles, custom CSS and plugins. If you’d like to go further and make changes to your theme’s underlying code, then you could consider creating a child theme.

This guide will explain how to develop a child theme, which is an advanced process that requires knowledge of HTML and PHP.

Methods of creating Child Theme in WordPress.

1- Create a Child Theme Manually

First, you need to open /wp-content/themes/ in your WordPress installation folder.

For this you can do this by using your WordPress hosting’s file manager or an FTP client. We find the first option to be much easier, so we will use that.

If you are a Hostgator customer, then you can log in to your hosting account dashboard and navigate to the Tools and then go to File section and click on File Manager. After then you can see the public_html and then go to /wp-content/themes/ folder.

For this tutorial, we will just use the folder name twentytwentyfour-child as we will use Twenty Twenty Four as our parent theme. Once done, create a new folder and give your child theme a name, for example, twentytwentyfour-child. It is recommended that the name of your child theme directory is appended with ‘-child’. Make sure that there are no spaces in your child theme directory name.

Copy and paste the style.css and functions.php files from your original parent theme (twentytwentyfour) into your new child theme (twentytwentyfour-child).

In your new child theme, open up your style.css file using a text editor, such as Notepad, Atom, Sublime Text, or any other text editor of your choice. Empty the file by clicking command+A > delete on Mac or CTRL+A > deleteon Windows.

Afterward, copy and paste the below lines of code:


/*
Theme Name: Twenty Twenty Four Child
Theme URL: http://example.com/twentytwentyfour-child/
Description: Twenty Twenty Four Theme
Author: WordPress.org
Author URL: http://example.com
Template: twentytwentyfour
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
Text Domain: twentytwentyfour
*/

In your new child theme, open up your functions.php file using the same text editor. Empty the file by clicking command+A > delete on Mac or CTRL+A > delete on Windows.

Afterward, copy and paste the code below and replace the $parent-style value with the name of your theme with a -style added (in this case, it’s twentytwentyfour-style).

Make sure to save this file after the changes have been made.


function my_theme_enqueue_styles() {
$parent_style = 'twentytwentyfour-style'; // This is 'parent-style' for the Twenty Twenty Four theme.
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', 'my_theme_enqueue_styles' );

2- Creating a Child Classic Theme With a Plugin

3- Create a Child Theme Using the Create Block Theme Plugin