Our homepage is under construction, so all elements are in demo still

How To Create A Child Theme And Override The Parent Theme Using It

March 30 2020

In WordPress, a child theme is a theme that inherits the same functionalities from another WordPress theme, that called the parent theme. A child theme contains all the elements of its parent theme, and the author can make any edit and any change on it easily. People usually use a child theme to upgrade and make more changes to make it flexible for visitors or users without losing the ability to upgrade the main WordPress theme. Today, I’m going to share with you how to create a child theme and override the parent theme using it. 

Why do you need a child theme? 

Sometimes, we need to upgrade our theme ASAP and it becomes harder to lose all the customization which you’ve made over day by day. It feels awkward to lose all of your stuff and hard work. To prevent this type of tough situation, you need to create a child theme like your main theme. Here, you can keep secure all of your themes stuff and those customizations that you made. In the past time, there was no option to back up any themes, so it’s a kind of blessings to have a child theme besides the parent theme.

Facilities for using a child theme:  

  • You can make your theme modification portable and easily replicable. 
  • It will allow parent themes to be updated without destroying your modifications. 
  • You can keep your customization separate from your parent theme function. 
  • You can save on development time since you are not recreating the wheel.
  • Here, you can allow you to take advantage of all effort and testing put into the parent theme. 
  • You can make any changes to your child theme it won’t affect your parent theme. 

Live Demo: How to create a child theme and override the parent theme using it. 

I’m moving forward step by step as you can understand the process easier if you can’t get anything or you’ve any questions please let me know about it in the comment. Let’s do it. 

Step 1: To create a child theme and override parent theme by using it, firstly you’ve to install a plugin. The plugin called Child Theme Configurator by Lilaea Media. To install the plugin go to WordPress Dashboard >> Plugins >> Add new. Now search it, then install and activate it. 

plugin-install
plugin installation

Step 2: To access the plugin, you need to go to Tools >> Child Themes. Now you have to select which theme you want to make a child theme. I’m using the Twenty Twenty theme. Select the theme and click on the Analyze button

theme setting

Step 3: If you analyze the theme, here are a lot of options. Now I’m going to discuss them. Most importantly, to create a child theme and override the parent theme using it, you have to analyze the theme option.

Analyzing the theme options:

  • Select an action: Firstly, here you can select an action on which basis your child theme will be? We’re going with  CONFIGURE an existing Child Theme which is the default by the Plugin. 
  • Select a Child Theme: Here you have to select the child theme which we’ve done this a moment earlier. 
  • Analyze Child Theme: In this option, you can analyze the child theme options. 
  • Verify Child Theme directory: Here you can verify the directory of your child theme. Here you can set the directory of the child theme. 
  • Select where to save new styles: You can select which stylesheet will be the new stylesheet. We’re using the primary stylesheet of the parent theme. Otherwise, you can use a separate stylesheet. 
  • Select Parent Theme stylesheet handling: Here, you have to enqueue the parent theme stylesheet to handle the styles. We’re using the default one. You can @import your own, but it’s not recommended. 
  • Customize the Child Theme Name, Description, Author, Version, etc: You can customize the child theme, We’re going to customize our child theme a moment later. So, stay connected. 
  • Copy Menus, Widgets, and other Customizer Settings from the Parent Theme to the Child Theme: You can add the parent themes menus, widget, and the other Customized things. 
  • Click to run the Configurator: Now clicks on Configure Child Theme button to create a Child theme. You’ve made a child theme now. 

Step 4: Most importantly, you need to activate the child theme. To do that go to Appearance >> Themes. Here your child theme is activated. If you want to customize it as your own style, you can edit it.

alt

Editing the Core file of the Parent theme

Step 5: You’ve created a child theme now override the parent theme. Now we’re going to edit the core file of the parent theme. To do this, open the theme file with a suitable code editor as you prefer. Now go to the file path, wp-content >>themes >> twenty-twenty-child folder. To get the header style you’ve to open here a new file named header.php. Make sure the extension (.php) is correct. It’s a PHP file.

To get the actual view of your parent theme’s view on your child theme, you have to copy the contents of Parents theme’s Header.php and paste it all on the child theme’s header.php. After copying the elements, add some contents on it, and save the file properly. If you don’t copy the parent themes header.php, your child theme will not preview like your parent theme! Now view your child theme, refresh it. It will preview as like as your parent theme. Isn’t it amazing? 

Adding Footer

Step 6: To add and edit the footer.php you must copy the elements of the parent theme’s fotter.php. Copy the elements, go to the child theme folder, create a new PHP file, name it as footer.php. Now open the file and paste the copied elements of the parent theme’s footer.php.View the child theme, refresh it. The footer will be like the parent theme. Now we’re going to change something, we’re going to delete the To The Top button as for example. To do that go to the file, remove the text of the button, save the file. And refresh your browser. See! It’s working properly! 

Copying elements from Parents theme to the child theme:

Step 7: You already create a child theme and override the parent them using it. Now we’re going to make the child theme as like as the parent theme looks. To do that copy the files from Parents theme folder, now paste these files in the child theme folder. Save it. Now refresh your browser again. Here you will have the view of the parent themes by using the child theme. It’s really cool to have such kind of facilities. Now you can make any change, upgrade on your parent theme. It will not affect the parent theme. 

It is all how to create a child theme and override the parent theme using it. If you feel any problem with this blog please let know in the comment section. I’ll help you to get out of this. 

Related Blog: A complete guide of WordPress Template Hierarchy. 

You can catch us on: 

Facebook: https://facebook.com/webextent.net/ 

Twitter: https://twitter.com/WebExtent 

Instagram: https://www.instagram.com/webextentofficial/ 

Regards. 

Tags:

0 comments

Leave a Reply

Mohammad Rahat
about me

Mohammad Rahat Tanjid

Mohammad Tanjid is a professional WordPress Developer and Designer, he builds WP Products like WP Themes/Plugins and author of webextent.net. He has been writing code for more than 5 years now.