Magento How to create a Theme


Magento 1


There are three themes in Magento - base, default, and RWD. To meet the latest design trends or client requirements we may need to customize the front-end design. We are going to create a child theme of rwd theme which is responsive.

Magento 2


There are number of improvements to the way themes are managed and set up in Magento 2. In this example, our theme is based on Magento Blank Theme. The name of it in this example will be Seasons, locate in MgaeCheck Module.


Step 1: Create theme.xml


Magento 1


File path: app/design/frontend/MageCheck/MCTheme/etc/theme.xml

<?xml version='1.0' ?> <theme> <parent>rwd/default</parent> </theme>

Magento 2


File path: app/design/MageCheck/Seasons/theme.xml

<theme xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='urn:magento:framework:Config/etc/theme.xsd'> <title>MageCheck Seasons</title> <parent>Magento/blank</parent> </theme>

Step 2: Configure Theme


Magento 1


File path: app/design/frontend/MageCheck/MCTheme/layout/local.xml

<?xml version='1.0'?> <layout version='0.1.0'> <default translate='label' module='page'> <reference name='root'> <reference name='head'> <action method='addItem'> <type>skin_css</type> <name>css/myStyle.css</name> </action> <action method='addItem'> <type>skin_js</type> <name>js/myScript.js</name> </action> </reference> </reference> </default> </layout>

Magento 2


File path: app/design/MageCheck/Seasons/layout/default.xml

<?xml version='1.0' encoding='UTF-8'?> <page xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='urn:magento:framework:View/Layout/etc/page_configuration.xsd'> <body> <referenceBlock name='logo'> <arguments> <argument name='logo_file' xsi:type='string'>images/custom_logo.png</argument> <argument name='logo_img_width' xsi:type='number'>300</argument> <argument name='logo_img_height' xsi:type='number'>300</argument> </arguments> </referenceBlock> </body> </page>


Step 3: Create Additional Files


Magento 1


Now go to skin/frontend/ and create your package's skin folders and files as follows:

skin/frontend/MageCheck/MCTheme/css skin/frontend/MageCheck/MCTheme/css/myStyle.css skin/frontend/MageCheck/MCTheme/images skin/frontend/MageCheck/MCTheme/js skin/frontend/MageCheck/MCTheme/js/myScript.js

There you can configure the css file and javascript file to improve your custom theme design.

Magento 2


File path: app/design/MageCheck/Seasons/registration.php

<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/magecheck/seasons', __DIR__ );

File path: app/design/MageCheck/Seasons/composer.json

{ 'name': 'magecheck/seasons', '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' ] } }

Step 4: Change Admin Settings


Magento 1


Now login to Magento admin panel and go to System > Configuration > General > Design and update the current theme with your new custom theme.

Go to System -> Cache Management and flush Magento cache. Open the storefront in order to see your new the applied.

Magento 2


To apply the new custom theme, you have to go in the admin panel, under Stores > Configuration > Design. On the Design Theme tab, select your newly created theme in the Design Theme drop-down.

To put your custom images in Seasons Theme, you'll have to create the following structure: app/design/MageCheck/Seasons/web/images.


And these are the basic files for creating a custom theme in Magento!