magento-2-child-theme

The Beginner Guide: How to Create Magento 2 Child Theme?

Have you ever felt you’d like to create a theme from the theme you’ve bought on your own in goals to support the original themes without any changes directly in the original?

If yes, then it’s time to explore the child theme and especially Magento Child Theme.

You might have a vague idea of the child theme. However, you might not know what it exactly is, why and how to use it.

In this beginner guide, we want to solidify your knowledge of the Magento child theme and how they support Magento Parent Theme

There are 3 main points we want to discuss: 

  • Definition of Child Theme
  • Top Reasons for Using A Child Theme
  • How to Create a Magento 2 Child Theme

Keep following to find out.

Why You Need to Setup Magento 2 Child Theme

what-is-magento-child-themes

>>> Must kn0w: Every Child Theme Should Be Magento RWD Theme!

In a basic understanding, child themes occur when you are want to adjust something in the theme that you are using.

A Magento Child Theme for 2.x version is a theme that inherits the functionality and styling of another theme, called the parent theme. Otherwise, child themes in Magento are the preferred way to change a theme.

The child theme is the recommended way of modifying an existing theme. There is no limit to the number of inheritance used. The Magento 2 system is using Theme inheritance on the fallback mechanism.

This means that if a view file’s styling is not found in the current theme, the system searches in the ancestor themes, module view files or library for a replacement.

In the next part, let’s we classified for you some advantages when using a child theme.

Top Reasons for Using A Child Theme

advantage-of-child-themes

>>> Don’t miss this: A List of Magento 2 PWA Theme Reviews in 2020!

One of the most popular reasons that you should use Magento Child Theme is whenever the parent themes are being updated, the child themes will not be deleted.

On the other hand, it can be said like, you can retain your adjustments by using Child Theme, and still get the update’s innovative features.

When using themes, we prefer to make changes to the theme directly, such as changing the CSS, changing the code inside. This is extremely dangerous if you upgrade themes later on to the current version as the changes would be lost due to the overwritten new version files.

Using Child Themes saves a considerable amount of time in creating the theme.

Using Child Themes ensures the clarity of each theme. Child themes add to your website’s overall security. They also make theme customization much simpler and allow theme customization available to designers who don’t code otherwise

Just like if you modify the website, you would use a backup. If you update your website’s theme, you use a child theme. There are a few advantages when using this child theme:

  1. Easy Restore – When the child theme is filled with so many bugs that you simply do not want to fix anymore, you can revert to the parent theme in just a few clicks. This saves development time.
  2. Easy Tracking – It easily finds all the changes have made in the parent theme in the child theme folder, therefore, make easily manage cases where you are impersonated to modify your themes, thus contributing to website security. 
  3. Easy Update – When the Magento Parent Theme is updated, the modification made to the child theme remains.

Whenever you build a child theme, if you transfer a file to the child theme folder in the parent theme folder, the file will be executed in the child theme folder, if any files are missing throughout the child theme folder, the file will be executed in the parent theme folder.

Next, we will show you step-by-step of how to create a child theme from a parent theme in Magento 2 as well as how to use a child theme in Magento 2.

How To Create A Child Theme from The Magento 2 Parent Theme.

step-by-step-to-create-child-themes

>>> Also read NOW:How to Install Magento Theme Manually?!

The only difference between creating a Magento Child Theme and a Magento Parent Theme (or brand new theme) is the <parent> tag in theme.xml.

  • If you want to create a child theme, declare the parent theme by <parent> tag.
  • If you want to create a brand new theme, simply exclude <parent> tag in theme.xml.

For more detailed information, please click Magento Child Theme Documentation.

In the short guide above, we also suggest you create a child theme with Blank as a parent theme.

Moreover, you can take some detailed steps FireBear offers below:

Step 1: Create a Magento Child Theme folder named as {parent-theme-name}_child

Magento root folder/app/design/frontend/{theme-vendor-name}/{parent-theme-name}_child

Step 2: Create a file theme.xml inside the child theme to specify the parent theme inherited by the child theme

Magento root folder/app/design/frontend/{vendor-name}/{theme-name}/theme.xml

Step 3: Create file registration.php for registering the child theme

Magento root folder/app/design/frontend/{vendor-name}/
how-to-create-magento-child-themes

>>> Also check: All Magento 2 Pro Themes by BSS Themes to beautify your website!

Step 4: Create composer.json

Magento root folder/app/design/frontend/{vendor-name}/{theme-name}/composer.json

Step 5: Create web directories inside the child theme with the below empty files and folder

Magento root folder/app/design/frontend/{vendor-name}/{theme-name}/web

Step 6: To run your child theme you have to run the following command:

  • Permit Magento root folder
  • Deploy static content
  • PHP bin/Magento setup:static-content:deploy

Step 7: Your child theme is created Successfully

Step 8: You can see your created child theme in Magento admin panel

Go to your admin panel >> Content >> Theme

If you intend to use your child theme developed in-store, then:

Go to admin panel >> Content >> Design >> Configuration >> Select child theme >> Save Config

To sum up

To end this article, we would like to affirm that Child Theme is a wise choice to help you create more themes from the initial themes, as well as a secure option for modifying or updating the theme.

Above the detail of step-by-step to create a new child theme and a few certainly advantages of child themes that might get you some concern, hope you guys enjoy this article.

Hopefully, this short share will help you understand the Child theme better and add it to your own to modify the theme, preventing the loss of the personalized edition when updating the theme.

If you have any questions, please feel free to leave a comment below. We’d love to connect with you as well.

About Brandon Allen

A most-welcomed guest author came from Missouri. Brandon is a website & plugin developer expert in the field of eCommerce platforms like Wordpress, Magento, etc. "Dash of dad. Pinch of web tinkerer. Splash of Southern boy. Whole lotta awesome."
Previous How to Install Magento: A complete guide for beginner
Next Magento Theme Customization Tutorial: Step by Step

Check Also

printshop-theme

Printshop: Magento Print Theme Review & Installation Guide

Want to run an online store in the printing market? Magento Print Theme will help …

Leave a Reply

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