Dark Mode On / Off

How to Create a WordPress Child Theme?

How to Create a WordPress Child Theme? 1

Thanks to WordPress and its contributors that have made making a website a lot easier. With tons of free themes and resources online, you can quickly get your site build in a couple of hours. WordPress developers have added the ability to create child themes so you can quickly make sub-themes with the characteristics of a parent theme. You can customize any parent theme using the WordPress child theme.

What is WordPress Child Theme?

A child theme lets you modify a parent theme without affecting the parent theme. A child theme inherits all the functionality and style of its parent and can easily override it. A WordPress child theme depends on its parent theme to work.

Why should you use WordPress Child Theme?

While handling the theme support tickets, I have come across many users who want to tweak the theme functionality to suit their needs. Some users even modified the theme files and lost the changes after the update. Any modifications done to the theme directly are lost once the theme is updated, so creating a child theme to retain the changes is the best thing to do.  A child theme can save lots of your efforts and provides you the flexibility to customize the theme according to your needs. If you know HTML, CSS, and PHP, you can customize the theme as you want.

Here are a few reasons why you should create and start using a child theme.

1. Easy to Customize

With a child theme, you can modify the existing parent functionality and even add your own. For example, you can change the order of comment section on your single post, add social sharing buttons, remove footer copyright, and so on. You can timely update the child theme on your own to add the features you want without breaking the parent theme. If you aren’t satisfied with your customizations, you can disable the child theme anytime and switch back to the parent theme.

2. Update Resistant

Theme updates are crucial for your website. So, it is highly recommended that you keep your theme updated to the latest version as theme developers release frequent updates with added features, security updates, and bug fixes.

As mentioned above, if you make any direct changes to your parent theme, all your changes will be lost after the update. On the other hand, if the changes are done in the WordPress child theme, your changes will be still there even when you update the parent theme. The child theme inherits the updated codes from the updated parent theme.

3. Saves Time and Money

Creating a WordPress child theme can be intimidating at first, but with a little bit of knowledge of HTML, CSS, and PHP, you can customize your website as you want. You don’t need to hire a developer to do the customization and can save your time and money.

How WordPress Child Theme Works?

A child theme resides in a separate directory, and every child theme needs at least two files, style.css, and functions.php. The codes to customize the theme styling, i.e., CSS codes are added in style.css and the codes that modify the theme functionality are added in functions.php. You can also add additional files such as template files if you want to override the parent template file or enqueue the JavaScript file to add your customization.

So, how does the child theme overrides the parent? The WordPress child theme loads on top of the parent theme. Therefore, when a user visits your website, at first the child theme loads and then it inherits the missing styles and functions from the parent theme. That’s is why the child theme cannot function on its own.

Creating a WordPress Child Theme

To create a child theme, you can either manually create the above files (style.css and functions.php) or use a free WordPress plugin. I will be using a free WordPress plugin called Child Theme Configurator to create a child theme. The one significant benefit of using this plugin is that it automatically analyzes the theme, and create the essential files for the child theme. You can refer to this article, to install a WordPress plugin easily.

If you are a WordPress developer and prefer a manual method, you can refer to the official documentation here.

If you don’t have any prior experience, you can follow my lead and create a WordPress child theme along with me.

Let’s start.

Step 1: Login to your WordPress Admin Panel.

Step 2: Go to Plugins > Add New

Step 3: Search for Child Theme Configurator plugin. Install and activate the plugin.

How to Create a WordPress Child Theme? 2

Step 4: Once the plugin is activated, go to Tools > Child Themes

Step 5: Select the parent theme( the theme whose child theme you want to create) and click on the Analyze button.

It will take a couple of seconds to analyze the theme if it is suitable for a child theme or not.

Step 6: Once the analysis finishes, enter the desired name for the child theme and leave all the default settings. Finally, click on “Create New Child Theme

How to Create a WordPress Child Theme? 3

When the child theme is successfully created, you will see the following message.

Step 7: To activate the child theme, go to Appearance > Themes and click on “Activate

How to Create a WordPress Child Theme? 4

Now, you have successfully created and activate the child theme. If you visit the site, you won’t find any changes since we haven’t done any. The plugin automatically adds the necessary codes in functions.php file to load the parent theme styles. Now go ahead and modify the child theme files as you want.

Editing WordPress Child Theme

You can make the changes directly to the child theme within your WordPress Dashboard. To edit the child theme files:

Step 1: Go to Appearance > Editor

Step 2: From the drop-down at the right, select the child theme you created.

How to Create a WordPress Child Theme? 5

As you can see in the screenshot above, at the right all your child themes files will be listed, and in the center, the code editor is available where you can add your codes.

Tips for WordPress Child Theme

Working on the live site may not be a good idea because your website may break if you didn’t code accurately. So, I suggest you work under maintenance mode or on the localhost. The primary benefit of working on the localhost is that you can test the child theme quickly, add files if needed, and when ready, you can upload the child theme to your site.

Bonus

You have already created the files needed for the child theme. So, let me guide you to tweak some of the features of the parent theme ( Blossom Feminine ) using the child theme you just created.

Changing the category link style

If you look at the image below, the category is a plain link.

How to Create a WordPress Child Theme? 6

Let’s add some styling to make it stand out. So, how we proceed to modify this? Follow these given steps:

Step 1: Right-click on the category link and select Inspect.

As shown in the above image, it will open the developer console and provides us with the necessary information to modify this. On the right, you can see the selector that we can use to modify this category.

How to Create a WordPress Child Theme? 7

Step 2: Copy the selector and paste in your style.css file. Add some of your stylings (if you know CSS ), or you can add the one provided below.

#primary .post .text-holder .entry-header .cat-links a{
    padding: 5px 10px;
    background: #FEEAE3;
    border-radius: 5px;
    color: #000;
}

After adding the above code, the category will look something like this:

How to Create a WordPress Child Theme? 8

You don’t have to create a WordPress child theme if your requirement is only to modify the theme styling. You can add your CSS code in Additional CSS in Customizer to apply your own custom CSS.

Changing the order of sections on Single Post

If you look at this demo of a single post, you can see the post section followed by the author section, newsletter section, post navigation section, related posts section, and comment section. With the child theme you created, you can easily reorder them as you want.

If you have a better understanding of WordPress theme files structure, then you can quickly modify the codes without breaking it. Nevertheless, the single post codes are located in the single.php file. If you open this file, you will see something like this –

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Blossom_Feminine
 */

$sidebar_layout = blossom_feminine_sidebar_layout();

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

		<?php
		while ( have_posts() ) : the_post();

			get_template_part( 'template-parts/content', get_post_format() );

			/**
             * 
             * @hooked blossom_feminine_author        - 15
             * @hooked blossom_feminine_newsletter    - 20
             * @hooked blossom_feminine_navigation    - 25
             * @hooked blossom_feminine_related_posts - 30
             * @hooked blossom_feminine_comment       - 35
            */
            do_action( 'blossom_feminine_after_post_content' );

		endwhile; // End of the loop.
		?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
if( $sidebar_layout != 'full-width' )
get_sidebar();
get_footer();

Modifying the hooks priority will help to achieve what we want. To modify the sections order, we need to add these codes in functions.php:

add_action( 'init', 'wphelpguide_remove_my_action', 100);
function wphelpguide_remove_my_action() {
	remove_action( 'blossom_feminine_after_post_content', 'blossom_feminine_author', 15);
	remove_action( 'blossom_feminine_after_post_content', 'blossom_feminine_newsletter', 20 );
	remove_action( 'blossom_feminine_after_post_content', 'blossom_feminine_navigation', 25 );
	remove_action( 'blossom_feminine_after_post_content', 'blossom_feminine_related_posts', 30 );
    remove_action( 'blossom_feminine_after_post_content', 'blossom_feminine_comment', 35);	
}

add_action( 'init', 'wphelpguide_add_my_action', 101);
function wphelpguide_add_my_action() {
    add_action( 'blossom_feminine_after_post_content', 'blossom_feminine_comment', 15);
	add_action( 'blossom_feminine_after_post_content', 'blossom_feminine_newsletter', 20 );
	add_action( 'blossom_feminine_after_post_content', 'blossom_feminine_related_posts', 25 );
	add_action( 'blossom_feminine_after_post_content', 'blossom_feminine_author', 30);
	add_action( 'blossom_feminine_after_post_content', 'blossom_feminine_navigation', 35);
}

At first, I removed the hooks at the time of loading and then again hooked it according to the order I want using the priority. I know this is a little confusing for a beginner, but you can always contact the theme support team if you need any help.

Now the sections order looks like this:

How to Create a WordPress Child Theme? 9

Wrapping Up

The WordPress child theme is a powerful way to extend/modify the functionality of a parent theme without affecting it. A little knowledge of HTML, CSS, and PHP is all you need to customize the child theme as you want. A child theme provides flexibility and a wide range of possibilities. So, next time, whenever you need to modify the parent theme even for a single line of code, create a child theme.

If you need any help, you can let me know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recommended Articles