4 Step to Create a WordPress Child Theme

Child Theme WordPress: Creating a WordPress child theme is a great way to customize the appearance and functionality of a WordPress website without losing the ability to update the parent theme. In this article, we will walk you through the step-by-step process of creating a child theme on WordPress.

But First We need to know

A parent theme is a complete theme which includes all the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.

As indicated in the overview, a child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customizations you’ve made to your site.

Child themes:

• make your modifications portable and replicable;
• keep customization separate from parent theme functions;
• allow parent themes to be updated without destroying your modifications;
• allow you to take advantage of the effort and testing put into parent theme;
• save on development time since you are not recreating the wheel; and
• are a great way to start learning about theme development.

Create a Child Theme Step by Step

Step 1

Create a new folder Create a new folder on your computer with the name of your child theme. This name should be lowercase and without spaces.

Step 2

Create a style.css file Inside the folder you just created, create a new file named style.css. In this file, you will define the basic information about your child theme, such as the name, description, and author.

Add the following code to the style.css file:

/*
Theme Name: Your Child Theme Name
Theme URI: http://example.com/
Description: Your Child Theme Description
Author: Your Name
Author URI: http://example.com/
Template: parent-theme-folder-name
Version: 1.0.0
*/

Replace “Your Child Theme Name“, “Your Child Theme Description”, “Your Name”, and “parent-theme-folder-name” with your own information.

Step 3

Create a functions.php file Inside the folder you created, create a new file named functions.php. In this file, you will add the code that will load your child theme’s styles and scripts.

Add the following code to the functions.php file:

<?php
function your_child_theme_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', 'your_child_theme_enqueue_styles' );
?>

This code loads the parent theme’s style.css file first and then loads the child theme’s style.css file. The child theme’s style.css file is loaded as a dependency of the parent style, which ensures that it is loaded after the parent style.

Step 4

Upload your child theme Compress your child theme folder into a zip file and upload it to your WordPress website. You can do this by going to Appearance > Themes in the WordPress dashboard, clicking the “Add New” button, and then selecting the “Upload Theme” button.

Step 5: Activate your child theme Once you have uploaded your child theme, you can activate it by going to Appearance > Themes and selecting your child theme from the list of available themes.

Congratulations, you have now created and activated your own WordPress child theme! You can now customize your child theme by adding new CSS and JavaScript files, modifying existing files, or adding new functionality using the WordPress API. Remember that any modifications you make to the parent theme should be made in the child theme to ensure that your changes are not lost when the parent theme is updated.

Note: This article is provided as a general guide and should not be used as a substitute for official WordPress documentation. Make sure to read and follow the instructions provided by the parent theme’s developer and the WordPress Codex when creating and modifying WordPress child themes.

Read More: “Solving Rest API CORS Issues in WordPress as a Headless CMS”, WordPress walker_nav_menu: Basic Usage of walker_nav_menu, 5 Steps to Enhance WordPress Search with Autocomplete and AJAX, Easy Floating Share Button – Social Share WordPress Plugin, How to Create WordPress Plugin from Scratch – Step-by-Step Guide