Sometimes, client requirement requires changes in the parent theme. But if the parent theme file is changed directly, we will not be able to upgrade it in the future. This is because if we upgrade the parent theme version we will lose all the changes. By creating a child theme, we will be able to retain our customization and also maintain both the original theme and the customized theme in separate folders.

What is a theme?

The theme is responsible for the appearance of the storefront. Themes use a combination of application elements, such as templates, layouts, styles, JavaScripts, and images.

What is a child theme?

The child theme is a theme inheriting all the properties from parent theme and will help to customize the existing parent theme design for our site requirement.

How to create a child theme in Magento 2?

Below steps define how to create a Magento 2 child theme.

Note: In this example, we will be using ‘Dckap’ as the vendor name and ‘luma’ as the parent theme name.

Vendor name: Dckap

Parent Theme name: luma

1. Create child theme folder named as {parent-theme-name}_child in the below-mentioned folder path.

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

Ex: Magento root folder/app/design/frontend/Dckap/luma_child

Child theme name can be anything. If the name refers parent theme name, it will be easily understandable and developer friendly.

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

Ex:

Tags mentioned in the theme.xml file

title – Title for the child theme. It will be displayed in the admin panel where we select the theme for the front end view of the site.

parent – We have to specify the parent theme name for the child. Based on the parent theme, child theme will inherit the property, layout, template files, and styles. Here we have to specify both vendor name of the parent theme and theme name.

{parent-theme-vendor-name} – It should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Magento

{parent-theme-name} – It should be same as parent theme name. Ex: luma.

preview_image – This image will refer your child theme layout and design. It will be displayed in admin panel where you can view your child theme details. And also we should place the preview.png image inside the child theme media folder.

3. Create a registration.php file for registering your child theme.

{theme-vendor-name} – It should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Dckap

Ex:

4. Create composer.json.

Ex:

  5. Create web directory inside the child theme with the below empty directories and files.

magento 2 child theme

6. The whole directory structure for the child theme.

magento 2 child theme

7. Provide access/permission for child theme directories and files.

For giving permission for the child theme directory, navigate to the child theme directory in the terminal and run the below command.

sudo chmod -R 777 *

Note: If you are working in a local or development server you can provide 777 access for both files and directories. If live server, then you have to give 755 for directory and 644 for files.

8. The created child theme will be displayed in the admin panel.

Navigate to

Magento Admin Menu->Content->Themes.

magento 2 child theme

Select child theme in admin configuration.

Navigate to

Magento Admin Menu->Content->Design->Configuration->Select Child theme->save configuration. 

Flush the cache.

magento 2 child theme

magento 2 child theme

9. Now take a backup of your pub/static folder for images, CSS, and js. Then delete the static folder and run static content deploy.

10. Navigate to the Magento root folder in your terminal and deploy static content using this command.

php bin/magento setup:static-content:deploy

11. The newly created child theme will also deploy in the pub/static folder.

12. We have created the child theme successfully. Now you can start customizing your child theme.

Hope the article was useful. Please feel free to get back to us if you have any queries.

HAPPY CODING!!!

cta_image

LOOKING OUT FOR A MAGENTO AGENCY ?

  • 20+ Magento Certified developers
  • Independent QA Team

Contact Us

Leave a Reply

Be the First to Comment!