Magento 2 Basic Theme Development

Magento 2 Theme development and customization can be categorised in different level depending on the different developer’s skills. Different level of customisation are:

• If a developer just wants to change the colour, images or other small changes on his website, then it can be achieved only with the knowledge of CSS. Developer can use Magento default CSS and make his required changes in it.
• If a developer wants to make some more changes other than CSS, like some changes in the HTML generated through PHTML file. Then the developer can achieve it if he has a little knowledge of PHP and HTML.
• If a developer wants to make changes in the website structure, like: placing one block to another place, adding new block or completing moving a block to a different page. This can be achieved if the developer also have the knowledge of XML.
• Finally, if the developer have complete knowledge as mentioned in above three points, then developer can design his own theme.

Pre requisites

• Previous Magento coding experience
• Some knowledge of Magento 2
• Magento 2 fully installed and running smoothly, access to the frontend & admin.

Theme Development:

Similar to the Magento 1, themes are stored inside app/design/frontend directory. Inside this we need to create Vendor directory with your Vendor_name and inside vendor directory we need to create a new directory which your Theme_name. Both name should not have space between them. So after this the structure will be:

app/design/frontend/Vendor_name/theme_name

Now your structure is in place, you need to declare your theme so that Magento knows it exists and you can set it as an active theme in the admin. Create a theme.xml file within the theme folder, on the root. You can use the code inside of the Blank or Luma theme folders. You can also use the code below. Just insert the name of your theme in the <title> tags. You can also specify a parent theme for fallback purposes.

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

This is the minimum code you need, but you can also declare a theme image. This is a thumbnail image which shows in the admin on your theme page so you can see a preview of what your theme looks like. To add one of these, add the code below in-between the XML nodes, underneath the theme declaration.

<media> <preview_image>media/theme-screenshot.jpg </preview_image> </media>

Change the name of the thumbnail image to that of your filename. Place the image in the following location:

/app/design/frontend/Vendor_name/theme_name/media/theme-screenshot.jpg

If you don’t have this file in the correct location when you visit your theme page in the admin, you’ll get an error – so make sure your image is in the right place and named correctly.

Theme Registration File:

The last part in declaring your theme is to add a registration.php file to your theme’s root.

/app/design/frontend/Vendor_name/theme_name/registration.php

Add below code in your registration file:


<?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_name/theme_name,
__DIR__
);


Theme Basic Structure:

In a design, there are many static files such as javascript, css, images and fonts. They are stored in separate directories in web of theme package. In Magneto 2, there is no skin directory as Magento 1. So all this static files are kept in web folder inside theme root directory. Here are the structure

app/design/frontend/Vendor_name/theme_name/
├── etc/view.xml
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/


The etc/view.xml file is where you can configure the Magento Catalog image sizes and other things. Copy the etc/view.xml file from one of the default theme’s and edit as necessary.

The last thing you can do before activating your theme, is to add you logo and declare it. The image file can be added to the web/images folder which you created not long ago. This can be whatever file type you like, in this case I’ve used an svg. So to actually tell the theme to use your logo, you create the Magento_Theme/layout folders and add the following code to a default.xml file. Edit to match your requirements.

<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.svg <argument name="logo_img_width" xsi:type="number">300 <argument name="logo_img_height" xsi:type="number">300 </arguments>
</referenceBlock>
</body>
</page>


Composer File:

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. { "name": "vendor_name/theme_nameultimate",
"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"
]
}
}

Activate your Theme

Now everything is in place for you to activate your theme. Browse to the admin of your Magento 2 store, and go to Content > Design > Themes. Make sure your theme appears in this list – if it doesn’t, it hasn’t been declared correctly.
When you can see your theme in the path above, browse to Stores > Configuration > Design. Select the right store scope and then change the theme to your newly created theme.