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!!!

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

15 Comments on "How To Create A Child Theme In Magento 2?"


Guest
Hassan
1 month 27 days ago

Hi,

If we create a layout (redesign page) from the parent theme while child theme is active. How that design be brought in child theme if we copy files of child theme to other magento 2 installation along with parent them. So the design created on one installation could be copied to other without making any changes

Guest
Martin
2 months 14 days ago

HI, When I followed your instructions i got Something went wrong while saving this configuration: Area is already set when trying to set the child theme. Any idea’s on why?

Sreedevi
Author
1 month 20 days ago

Hi Martin,

Excuse us for the late reply.
This blog was written based on the initial version of Magento 2. If you are using the latest Magento 2 version, remove the area “frontend” which is specified in registration.php file and try to save the configuration again. Hope this will help you to save the child theme in admin.

Guest
imtiyaz ahmad
6 months 15 days ago

Hello, I am facing some issue which is related to Css. The Css is no loading in my Child Theme from the Parent Theme.

Thanks.

Sreedevi
Author
4 months 20 days ago

Excuse us for the late response,

“The Css is no loading in my Child Theme from the Parent Theme” which means you didn’t have any CSS code on the static folder or you didn’t see any CSS changes on your frontend. Please correct me if I’ve understood the issue correctly.

Guest
Olusola Olawale
6 months 22 days ago

Hello I am new to Magento, and I followed the steps in this article, I deleted the static folder and run static content deploy using the command that was specified. I saw the child theme in the pub static folder but when I went back to the dashboard and the webpage, there was no styling at all, everything was pure html.

Am I doing something wrong or I have to copy back the backed-up static folder?

Thanks.

Sreedevi
Author
4 months 20 days ago

Excuse us for the late response, anyway thanks for reaching us.

You no need to copy your static folder again. Make sure you have given correct permission for your var and pub folder. Then you can see the changes in the frontend. Worst case, you have to add .htaccess file (available in the official magento2 repository for specific version) inside the pub/static folder and you can see the changes in the frontend.

Guest
Hingora
6 months 22 days ago

Hello, I am facing some issue which is related to Css. The Css is no loading in my Child Theme from the Parent Theme.

Thanks.

Sreedevi
Author
4 months 20 days ago

Excuse us for the late response,

“The Css is no loading in my Child Theme from the Parent Theme” which means you didn’t have any CSS code on the static folder or you didn’t see any CSS changes on your frontend. Please correct me if I’ve understood the issue correctly.

Guest
pppp
7 months 25 days ago

Hi, I made a child theme from a custom theme. I follow all this steps and my custom theme works fine but my child theme is not working. I just want to override a CSS styles in that theme, but the Magento is not applying any CSS (neither magento or custom theme). Do you know what is happening? thank you

Sreedevi
Author
7 months 11 days ago

Hi,

Thanks for reaching us. Please make sure that you have enabled the child theme as your currently active theme and check whether your child theme is deploying successfully inside the pub/static folder with your CSS file.

Guest
jayaprakash
8 months 2 days ago

Hi Sreedevi,

I have created child theme and integrate the theme configured step by step,
i need your help we need copy and paste every parent-theme layout, templates and web file?

Sreedevi
Author
7 months 26 days ago

Hi Jeyaprakash,

Thanks for reaching us. You should follow the same steps which I have provided in the blog to create child theme, once successfully created the child theme, We don’t need to copy all the layout and template files. if you want to change any template, layout, or css file, then you need copy the same file into child theme along with the same folder structure.

Guest
robert
9 months 28 days ago

when i folllowed up this steps, my static blocks dissapear in header of my theme. Did i forget something?

Sreedevi
Author
9 months 3 days ago

Hi Robert,

Thanks for reaching us.
The static block might disappear in the cases when it’s called/referenced from the CMS page. In this case, checking the New Theme box from the CMS page could rectify the issue. However, let us know whether the static block is referenced elsewhere, so we could come up with a proper solution.