Creating a basic Magento 2.0 theme

After understanding the basic Magento 2.0 theme structure, you have the right credentials to go to the next level: creating your own theme. In this chapter, we will develop a simple theme and activate it on the Magento Admin panel. The basic idea is to give you the right directions to Magento theme development and provide you with the tools to let your imagination fly around the creation of various Magento themes!

Before starting the creation, let's disable Magento cache management. It is important when you work with Magento development to get updates in real time. You learned about cache management in Chapter 2, Magento 2.0 Features:

Open the terminal (Linux, OS X) or command prompt (Windows) and access the <your Magento install dir>/bin directory.
Then, run the php magento cache:disable command to disable all the cache systems.

Creating and declaring a theme

To create a basic theme structure, follow these steps:

Create a new vendor directory named Packt at the following path:
```
<Magento root directory>/app/design/frontend/
Packt
```
Under the Packt directory, create the theme directory named basic by executing the following:
```
<Magento root directory>/app/design/frontend/Packt/basic
```

The next step is to declare the theme information for Magento to recognize it as a new theme. Perform the following:

Open your preferred code editor (Sublime Text2, TextMate, Atom.io).
Create a new file named theme.xml under your theme directory (app/design/frontend/Packt/basic/theme.xml).

Use the following code in the theme.xml file and save the file:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Basic theme</title>
     <parent>Magento/blank</parent>
    <!-- <media>
         <preview_image>media/preview.jpg</preview_image>
     </media>-->
</theme>

This is a basic declaration for the Magento system to recognize our theme as an official theme. This code configures the theme name, parent, and preview image. The preview image is a preview for basic visualization purposes. We don't have a preview image right now, which is the why the code is commented; avoid unnecessary errors.

Once we have the basic configurations, we need to register the theme in the Magento system:

Open your preferred code editor (Sublime Text2, TextMate, or Atom.io).
Create new file named registration.php under your theme directory (app/design/frontend/Packt/basic/registration.php).

Use the following code in registration.php and save the file:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Packt/basic',
    __DIR__
);

This code simply registers our theme in the Magento system by passing a parameter of your new theme's structure directory.

Simple product image configuration

In your theme, you can configure the image properties of the products in the Magento Catalog module by creating the view.xml file. You can control this specific configuration using the id attribute of every product's HTML5 element:

Open your preferred code editor (Sublime Text2, TextMate, or Atom.io).
Create a new directory named etc under your theme directory (app/design/frontend/Packt/basic/etc).
Create a new file named view.xml under your etc directory (app/design/frontend/Packt/basic/etc/view.xml).

Then, use the following code in view.xml and save the file:

<image id="category_page_grid" type="small_image">
        <width>250</width>
        <height>250</height>
</image>

In the view.xml file, we declared the values of the width and height of the product image. The id and type attributes specified the kind of image that this rule will be applied to.

Note

For further information, visit http://goo.gl/73IQSz.

Creating static files' directories

The static files (images, .js files, .css files, and fonts) will be stored in the web directory. Inside the web directory, we will organize our static files according to its scope. Create a new directory named web under your directory app/design/frontend/Packt/basic/web theme and create the following directory structure:

With this simple structure, you can manage all the static files of your custom theme.

Creating a theme logo

By default in Magento 2.0, the theme logo is always recognized by the system by the name logo.svg. Magento 2.0 also recognizes the logo's default directory as <theme_dir>/web/images/logo.svg. So, if you have a logo.svg file, you can simply put the file in the right directory.

However, if you want to work with a different logo's name with a different format, you have to declare it in the Magento system. We will make a declaration with this new logo in the Magento_Theme directory because the new logo is a customization of the Magento_Theme module. We will override this module by taking advantage of the fallback system. As you may note, Magento has a specific pattern of declaring elements. This is the way in which Magento organizes its life cycle.

Let's declare a new theme logo by performing the following steps:

Choose one logo for the example and save the file as logo.png in the app/design/frontend/Packt/basic/Magento_Theme/web/images directory.
Open your preferred code editor (Sublime Text2, TextMate, or Atom.io).
Create new file named default.xml under your layout directory (app/design/frontend/Packt/basic/Magento_Theme/layout).

Use the following code in default.xml and save the file:

<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">
Magento_Theme/images/logo.png
</argument>
              <argument name="logo_img_width" xsi:type="number">
your_logo_width
</argument> 
<argument name="logo_img_height" xsi:type="number"> 
your_logo_height
</argument>
             </arguments>
        </referenceBlock>
    </body>
</page>

This declaration has three different arguments to manage three attributes of your new logo: filename, width, and height. Don't forget to replace the your_logo_width and your_logo_height attributes with the correct size of the logo that you choose.

The logo_file argument seems to be wrong because we created our image in the Magento_Theme/web/images directory; however, thank God this is not true. I'll explain: when we activate the new theme, Magento processes the static files and copies them to the pub/static directory. This occurs because static files can be cached by Magento, and the correct directory for this is pub. So, we need to create the web directory for Magento to recognize the files as static files.

The final theme directory structure is illustrated as follows:

Applying the theme

Once we have the theme ready to launch, we need to activate it in the Magento admin dashboard:

First, access the Magento admin area URL (http://localhost/packt/admin_packt) in your favorite browser.
Navigate to Stores | Configuration | Design.
Then, select the Basic theme option as your Design Theme value and save the configuration.

Navigate to the home page of your site by accessing the http://localhost/packt URL to see the final result:

Table of Contents for Magento 2 - Build World-Class online stores