PART 1.2 – Custom theme

In Magento documentation you will see general structure like app/design/frontend/<Vendor>/<theme>, which is project repository approach for theme.

 

  • Structure of Magento 2’s theme 
  • Required files
    • Theme.xml
    • Composer.json
    • Registration.php
  • Additional files
    • View.xml
    • Logo.svg
  • Exercise

Structure of Magento 2’s theme 

These directory names must match exactly.

Magento is pre-configured to look for each content type (web, layout, templates, i18n) in these directories of each theme.

Required files

Theme.xml

• Contains the basic meta-information, including the theme name and the parent theme name

• Is the theme inherited from an existing theme

• This file is used by the Magento system to recognize the theme

theme.xml

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” 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>

Notice, you can specify your parent theme and preview image. Moreover as soon as you set your theme name once, you cannot change it easily, you will have to change it in database.

Composer.json

• composer.json provides theme dependency information.

• Seen only if your theme is a composer package

• Describes the theme dependencies and some meta information

composer.json

{

    “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”

        ]

    }

}

Registration.php

Declares a theme as a system component

registration.php

<?php

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    ‘frontend/<Vendor>/<theme>’,

    __DIR__

);

Additional files

View.xml

The file configures size of your images.

 

view.xml

    <image id=”category_page_grid” type=”small_image”>

        <width>250</width>

        <height>250</height>

    </image>

Logo.svg

In the Magento application, the default format and name of a logo image is logo.svg. When you put a logo.svg image in the conventional location, which is <theme_dir>/web/images directory, it is automatically recognized as theme logo. 

Exercise

Exercise 3.0

Please, create necessary files in your theme and set it up in admin panel.

In any case, you can follow documentation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s