Themes in Magento 2 defines the look and feel of your store. Having the graphics and appearance details, the parent theme customization is not advisable.
Hence, the theme inheritance!
(Note: There is no limitation for the level of the theme inheritance)
If you want to customize the appearance, it is sane to create child theme in Magento 2 rather than implementing the changes in the parent theme. Because, if the changes are directly implemented in the parent theme, upgrading the Magento version results in loss of theme changes in the parent theme.
To easily extend the theme and minimize the maintenance tasks, create child theme in Magento 2 and customize it. By definition, the child theme is a theme that inherits all the properties of the parent theme. It is useful to customize the existing parent theme design as per the requirements.
Lets us create a child theme so our all custom themes in Magento 2 goes here:
Before following these steps, note that “Webiators” is the vendor name and “luma” is the parent theme name.
Step-1: Create a child theme folder named as {parent-theme-name}_child in the following folder path.
|
1 |
Magento root folder/app/design/frontend/Webiators/luma_child |
Name your child theme related to the parent theme. It can be anything that is developer friendly!
Step-2: Create file theme.xml inside the child theme to specify the parent theme inherited by the child theme
Example:
|
1 2 3 4 5 |
<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> |
Step-3: Create a registration.php file for registering your child theme.
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, ‘frontend/{theme-vendor-name}/{parent-theme-name}_child’, DIR ); |
{theme-vendor-name} should exactly match the vendor folder name. Vendor name should be capitalized. Ex: Webiators
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, ‘frontend/Webiators/luma_child’, DIR ); |
Step-4: Create composer.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ “name”: “{theme-vendor-name}/theme-frontend-{parent-theme-name}-child”, “description”: “N/A”, “require”: { “php”: “~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0”, “{parent-theme-vendor-name}/{parent-theme-name}”: “100.0.*”, “magento/framework”: “100.0.*” }, “type”: “magento2-theme”, “version”: “100.0.1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “autoload”: { “files”: [ “registration.php” ] } } |
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ “name”: “Webiators/theme-frontend-luma-child”, “description”: “N/A”, “require”: { “php”: “~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0”, “magento/luma”: “100.0.*”, “magento/framework”: “100.0.*” }, “type”: “magento2-theme”, “version”: “100.0.1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “autoload”: { “files”: [ “registration.php” ] } } |
Step-5: Create web directory inside the child theme with the following empty directories and files. The whole directory structure for the child theme is:
Step-6: Provide access/permission for child theme directories and files. Go to child theme directory in the terminal and run this command to give permissions for the child theme directory: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.
Step-7:
The admin panel shows the created child theme.
- Login to admin panel
- Go to Content > Themes
- Save
- Flush the cache
Step-8: Take a backup of pub/static folder for images, CSS, and js. Also, delete the static folder and run static content deploy.
Step-9: Go to the Magento root folder in your terminal and deploy static content using the following command:
|
1 |
php bin/magento setup:static-content:deploy |
Step-10: The newly created child theme will also deploy in the pub/static folder.
That’s all for creating a Magento 2 child theme! You can now go on with customizing your child theme.
