How to create a child theme in Magento 2?
How to create a child theme in Magento 2?
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 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.
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: Pipl
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/Pipl/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.
<theme
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>{Child Theme Name}</title>
<parent>{parent-theme-vendor-name}/{parent-theme-name}</parent>
<media>
<preview_image>media/preview.png</preview_image>
</media>
</theme>
Example :
<theme
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Luma Child</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.png</preview_image>
</media>
</theme>
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.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/{theme-vendor-name}/{parent-theme-name}_child',
__DIR__);
?>
{theme-vendor-name} – It should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Pipl
Example :
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Pipl/luma_child',__DIR__);
4. Create composer.json.
{
"name": "{theme-vendor-name}/theme-frontend-{parent-theme-name}-child",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"{parent-theme-vendor-name}/{parent-theme-name}": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "2.2.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
Example :
{
"name": "pipl/theme-frontend-luma-child",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/luma": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "2.2.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
5. Create web directory inside the child theme with the below empty directories and files.
6. The whole directory structure for the 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.
Select child theme in admin configuration.
Navigate to
Magento Admin Menu->Content->Design->Configuration->Select Child theme->save configuration.
Flush the cache.
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 comm
php bin/magento setup:static-content:deploy