Magento 2 child theme, magento2

Magento 2 Create Custom(Child) Theme

It’s better to create your custom theme or just override the Magento’s default theme to make the changes on the theme. Changing in default theme is not a good practice as whenever you upgrade your Magento version or theme, your changes will gone.

Here is the way to create a child theme to override the Magento’s default luma theme.

Create Directories as given below:

app/design/frontend/
		├ <Vendor>/
			├ <theme>/
				├ registration.php
					├ theme.xml
				├ composer.json
                                ├ etc/
					├ view.xml
                                ├ web/
					├ css/
					├ js/
					├ images/
                                ├ Magento_Theme/
					├ layout/
					├ media
  • : Vendor name of your theme.
  • : The name of your theme.
  • Magento_Theme / layout: For declaring a logo for the theme.
  • media: The preview image for the theme will be placed here.
  • web: Contains CSS, images, js folders.

Declare your theme

Add or copy from an existing theme.xml to your theme directory app/design/frontend//

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
    <title>New theme</title> <!– your theme’s name –>
    <parent>Magento/blank</parent> <!– the parent theme, in case your theme inherits from an existing theme –>
    <media>
        <preview_image>media/preview.jpg</preview_image> <!– the path to your theme’s preview image –>
    </media>
</theme>

If you change the theme title or parent theme information in theme.xml after a theme was already registered, you need to open or reload any Magento Admin page for your changes to be saved in the database.

Make your theme a Composer package (optional)

To distribute your theme as a package, add a composer.json file to the theme directory

{
   “name”: “magento/theme-frontend-luma”,
   “description”: “N/A”,
   “require”: {
       “php”: “~5.5.0|~5.6.0|~7.0.0”,
       “magento/theme-frontend-blank”: “100.0.*”,
       “magento/framework”: “100.0.*”
   },
   “type”: “magento2-theme”,
   “version”: “100.0.1”,
   “license”: [
       “OSL-3.0”,
       “AFL-3.0”
   ],
   “autoload”: {
       “files”: [
           “registration.php”
       ]
   }
}

Add registration.php

<?php

    \Magento\Framework\Component\ComponentRegistrar::register(
       \Magento\Framework\Component\ComponentRegistrar::THEME,
       ‘frontend/<Vendor>/<theme>’,
       __DIR__
    );
Upload Theme Preview Image
  • Go to app/design/frontend///media and upload your preview image (preview.jpg) here.
Upload Theme Logo
  • Go to app/design/frontend///web/images and upload your logo (mytheme-logo.png) here.

Add the below code to view.xml

<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
    <body>
            <referenceBlock name=”logo”>
                    <arguments>
                        <argument name=”logo_file” xsi:type=”string”>images/mytheme-logo.png</argument>
                        <argument name=”logo_img_width” xsi:type=”number”>200</argument>
                       <argument name=”logo_img_height” xsi:type=”number”>200</argument>
                   </arguments>
            </referenceBlock>
    </body>
</page>

• Apply Your Theme

• Open the Admin panel of your Magento 2 and go to Content → Configuration.

• Now click on Edit as shown:

• Select from the Applied Theme drop down menu and click on Save Configuration.

Run below commands to refelct your changes properly
  • rm -rf var/di/*; rm -rf var/generation/*; rm -rf var/cache/*; rm -rf var/log/*; rm -rf var/page_cache/*; rm -rf var/session/*; rm -rf var/view_preprocessed/*; rm -rf pub/static/*
  • php bin/magento setup:upgrade
  • php bin/magento setup:db-schema:upgrade
  • php bin/magento setup:di:compile
  • php bin/magento setup:static-content:deploy
  • php bin/magento indexer:reindex
  • php bin/magento cache:clean
  • php bin/magento cache:flush

And you’re all done! Open the homepage of your store and you’ll see that your custom theme has been applied successfully.

Leave a Reply

Your email address will not be published. Required fields are marked *