Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.
Today, I am going to show everybody a best practice, How to create a child theme in Magento 2.
By default, Magento 2 provides us with two themes.
1. Blank theme
2. Luma theme (This is a child theme of the Blank theme)
You can see these themes here.
You can use these themes for your store, however, if you want to customize the default design or if you need to create your own theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files.
So why should you create a child theme in Magento 2?
1. A child theme is inherited from a parent theme.
2. We will be able to retain our customization and also maintain both the original theme and the customized theme in separate folders.
3. We will not be lost the changes while upgrading the parent theme.
4. We can create multiple storefronts having other interfaces, with every a child theme we will have an interface.
In this practice, I will create a child theme called Gia Phu Fashion inheriting from the Luma theme.
Let’s do this practice, you need to follow steps by step:
Step 1: Declaring the child theme
– Create the Vendor named phpcuong in the path appdesignfrontend
– Create the child theme named giaphufashion in the path appdesignfrontendphpcuong
– Create the file named theme.xml in the path appdesignfrontendphpcuonggiaphufashion to specify the parent theme inherited by the child theme.
Tags mentioned in the theme.xml file
1. title: Title for the child theme.
2. parent: We have to specify the parent theme path for the child theme.
3. preview_image: This image will refer your child theme layout and design.
– Create a registration.php file in the path appdesignfrontendphpcuonggiaphufashion for registering your child theme.
– Copy the file view.xml in the path vendormagentotheme-frontend-lumaetc to the path appdesignfrontendphpcuonggiaphufashionetc
– Copy the file preview.jpg in the path vendormagentotheme-frontend-lumamedia to the path appdesignfrontendphpcuonggiaphufashionmedia
End of the step #1 we have completed the simple steps of declaring a child theme in Magento 2.
Step 2: Install the new theme
Run the commands line following:
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f (Using for the Magento 2.2.x)
php bin/magento cache:flush
The new theme installed and show in the table named theme
Step 3: Apply the storefront to the new theme
Go to the backend, then go to the Content → Design → Themes.
Whenever you can see your theme in this list, go to Content → Design → Configuration
Apply the storefront to the new theme
End this practice, we understand, how to create a new child theme in Magento 2.
In the next lesson, I will show everybody, how to override the blocks, layouts, template phtml, adding the fonts, customizing CSS,… etc
Thank you for your watching. If you have any questions about this practice please feel free to leave a comment below.
Don’t forget to like, comment, share and subscribe to my channel for getting the latest videos.
Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.
Get the source code of this practice in the Github