A WordPress theme changes the look of your website. When building or choosing a theme, you have got many options to select from. For example, the theme can have a one, two, or more column layout. It can identify which devices or user actions make content visible. It can have custom typography and design elements. WordPress theme can display content, including images and videos, anywhere you would like.
To understand why that’s imperative, it’s important to first understand the link between parent and child themes.
Parent Theme: The parent theme is an original complete theme. It includes the WordPress template files and assets mandatory for the theme. The index.php and the style.css files (the main template and style files) are the only required template files but most of the themes also include PHP files, localization files, graphics, Javascript, and/or text files. All themes are considered parent themes apart from child themes. Let’s take a look at what a child theme is and the benefits it offers site owners below.
Child Theme: As described in the overview, a child theme takes over the look and feel of the parent theme and all of its functions, but we can use it to make modifications wherever you want in the theme. In this way, customizations are different from the parent theme’s files. In other words “A child theme allows you to modify small aspects of your site’s appearance yet still maintain your theme’s look and functionality”. Using a child theme permits you to upgrade the parent theme without influencing the customizations you have made to your site.
Benefits of Creating a Child Theme
- Most importantly, creating a child theme permits you to upgrade the parent theme without losing your customizations in WordPress. Without a child theme, you need to edit your theme files directly and any time you upgrade the theme, your modifications would be lost. As a result, you would be faced with an impossible choice, either don’t keep your theme up to far, which could be a high-security risk or lose your customizations and the time you invested in creating them.
- It also enables you to start learning about and debugging theme development in a low-risk environment. If you start to customize your child theme and something goes wrong or you are not satisfied, you can just disable the child theme. This will restore the parent theme and your website as it has been working since its inception.
- It is not always recommended by scholars to create a child theme, however. If you’re frequently adding custom CSS, then creating a child theme is good. But if you’re making extensive customizations to the theme’s functionality, then it’s better to creating a parent theme or selecting an option that has an existing child theme that you can then edit immediately.
Now that we understand child themes and the benefits of using a Child Theme, Now we are going to discuss steps to create a child theme.
Steps To Create Child Theme:
- First You need to create a child theme folder. We need to name this folder using the parent theme’s name and add “-child” to the end. For Example, we created a child theme of Twenty Twenty-One, Then the name of the folder is “twentytwentyone-child”. This is the directory for our child theme. Here is the directory location where we need to create the child folder “/wp-content/themes/”.
- After creating the child theme folder we need to create a “Stylesheet”. This Stylesheet file will contain all of the CSS rules and declarations of the child theme and we name it “style.css”. After that, we need to add some required header comments. This comment will let us know that it is a child theme of the parent theme. Here is an example that you need to add.
/*
Theme Name: Twenty Twenty-one
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Twenty Twenty-one Child Theme
Author: John Doe
Author URI: http://example.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
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentyonechild
*/
From the above-mentioned comment two things are required:
Theme Name – It needs to be unique to our theme.
Template –This is the name of the parent theme directory. The parent theme in our example is the Twenty Twenty-one theme, so the Template will be twentytwentyone.
- Now We need to create the Function file where we need to Enqueue the parent and child themes’ stylesheets. So we need to create a file and name it “function.php” and add the following code to the file.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
The above code will work. That way, once you add custom CSS and otherwise change your child theme, these modifications will replace certain styles and functions of the parent theme. - Now it’s time to install and activate the theme. You can do this in two ways First you can upload it From FTP and install it from Admin. Another way is you can perform both actions from our WordPress dashboard. We need to click on Appearance > Themes > Upload. Then, choose the child theme directory and then click on Activate.
- That’s it you have activated your child theme now you can do any customizations to your child theme. Like you can start by adding CSS to the style.css file in the child theme. To change the functionality of the parent theme, you need to add functions to the functions.php file in your child theme’s directory.
jQuery presents a tree-like structure of all the elements on a webpage simplifying the syntax and further manipulating such elements. The jQuery Certification exam by StudySection will secure your fundamental knowledge and a basic understanding of jQuery as an asset to improve your skills.
