Magento2 theme integration

Magento2 theme integration

Theme integration is the necessary to learn first in magento2. After magento installation,to create or customize any page in website you need to work on theme files only. Magento2 theme integration have various difference comparing to magento 1. The first step of theme integration create the vendor
directory and theme name directory. For example for your reference, lets have the vendor name as ‘Explorer’ and theme name as ‘test’. The below things are the steps for magento 2 theme structure.

Theme.xml(Magento2 theme integration)

After the directory creation, the next step is to declare a theme. Theme.xml was the first mandatory file in magento 2 theme structure which tells about the theme name, parent theme name. Optionally you can give the preview image of the theme here.

<!-- File: app/design/frontend/Explorertheme/test/theme.xml -->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
	<title>Explorer Theme</title>
	<parent>Magento/blank</parent>
	<media>
		<preview_image>media/explorer.png</preview_image>
	</media>
</theme>

composer.json

To make your theme as a package in your packaging server, create a compser file in your theme.

{
    "name": "magento/explorer",
    "description": "N/A",
    "require": {
        "php": "~5.4.11|~5.5.0",
        "magento/framework": "0.42.0-beta1",
        "magento/magento-composer-installer": "*"
    },
    "type": "magento2-theme",
    "version": "0.42.0-beta1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "extra": {
        "map": [
            [
                "*",
                "frontend/Magento/blank"
            ]
        ]
    }
}

registration.php

Registration.php also plays a vital role in magento 2 theme development. To register your theme in the system, create a registration file in the theme directory

<?php
#File: app/design/frontend/Explorertheme/test/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Explorertheme/test',
    __DIR__
);

view.xml

To configure the changes of storefront configuration in your theme, you need to do on the view.xml file.
i) create a ‘etc’ directory in your theme folder
ii) copy the file ‘theme.xml’ from your parent theme etc directory.
iii) Change the configuration settings as per your requirement, for example to change the size of small image in page grid.

 <!-- File: app/design/frontend/Explorertheme/test/etc/view.xml -->
    <image id="category_page_grid" type="small_image">
        <width>250</width>
        <height>250</height>
    </image>

overriding core layout files

Next important steps in theme integration is overriding core layout files. In magento1 to modify the the template/layout file for core module we just copy the file from the base theme and place it on our theme. The same thing we are going to do here, with the following.

1. copy the module template/layout from the folder {magento root}/vendor/magento/theme-frontend/blank

2. paste in your theme with the same directory structure.

For example to modify the logo of the site we need to override the Magento_Theme layout files

<!-- File: app/design/frontend/Explorertheme/test/Magento_Theme/layout/default.xml -->
<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/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>

vi) Use css and images
To add style and images to your theme, create a directory web in your theme folder. This folder replacing the skin folder functions of magento1.
—web
—–css
—–fonts
—–images
—–js

Now you are set! 🙂 Confirm your theme registration in Admin->content->design. Activate your magento 2 custom theme in admin->store->configuration->general->design.

No Comments yet, your thoughts are most welcome