The theme is a component of Magento 2 which gives a consistent look and feel to your whole store. It gives an improved look to areas like Magento 2 Admin and Storefront by utilizing a combination of custom templates, designs, styles or images development.
By default, there are 2 Magento themes – Luma and Blank – that you can see after installing Magento 2 successfully. Luma is a demonstration theme, and Blank is a basis for custom theme creation.
In Magento 2, there are no restrictions on using the Luma theme for your live store. However, if you want to customize the default design or if you need to create your own theme, Magento strongly recommends not to change or edit the default Luma and Blank theme files. Many people ask why Magento does not allow to change or edit Luma and Blank theme files? The answer is: when you change or edit the default files, your changes can be overwritten by the latest version of the default files during your Magento 2 upgrades.
This Magento 2 theme development series is for beginners, and I am going to cover the basic of frontend Magento 2 theme development. If you are an advanced Magento developer, this may not be of much help to you.
Let’s start.
Before developing your own theme for Magento 2, make sure these requirements are fulfilled:
- You have little bit of Magento coding experience
- You have some knowledge of Magento 2
- Magento 2 is installed on your local host and running smoothly, and you have access to the frontend & backend.
If you don’t yet have Magento 2 running, then you can easily have it thanks to Cloudways Managed Magento Hosting. Launch your Magento 2 store in a matter of few clicks and start creating your store from scratch.
To create a directory for your Magento 2 theme, you need to go: <your Magento 2 root directory>/app/design/frontend. Under frontend directory, create a new directory according to your theme vendor name: /app/design/frontend/Cloudways (I choose Cloudways for my theme vendor name) under your theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/Cloudways/m2-theme.
After creating this structure, you need to declare your Magento 2 theme so that Magento system knows it exists and you can set your theme as a current theme in your Magento 2 backend.
Now you need to create the theme.xml file under app/design/frontend/Cloudways/m2-theme/theme.xml and use the code below:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>m2-theme</title>
<parent>Magento/Luma</parent>
<media>
<preview_image>media/m2-theme-image.jpg</preview_image>
</media>
</theme>
In <title> tag insert the name of your theme, and in the tag you can specify parent theme for fallback purposes. I am using the Luma theme.
In the <preview_image> tag I declare a theme image. This is a thumbnail image which shows in the Magento 2 admin on our theme page so we can see a preview of what our theme looks like. Thumbnail image is located in app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg. Make sure you have this thumbnail in the correct location. If you don’t have this file in the correct location, you will get an error when you visit your theme page in Magento 2 admin.
- Make Your Magento 2 Theme a Composer package
Add a composer.json file in your theme directory: app/design/frontend/Cloudways/m2-theme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information. Magento default public packaging server is https://packagist.org/. Use this following code:
{
"name": "Cloudways/m2-theme",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"Cloudways/m2-theme": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
- Add registration.php to register your Magento 2 theme
To register your theme in the Magento system, you need to create registration.php file in your theme directory: app/design/frontend/Cloudways/m2-theme/registration.php and use the following code in your 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/Cloudways/m2-theme',
__DIR__
);
After complete theme declaration and registration, you need to create the directory structure for your theme layout, styles and template files. Below, you can see how your theme directory should look like. I am using my own Vendor and directory name.
/app/design/frontend/Cloudways/m2-theme/theme.xml
/app/design/frontend/Cloudways/m2-theme/registration.php
/app/design/frontend/Cloudways/m2-theme/composer.json
/app/design/frontend/Cloudways/m2-theme/media
/app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg
/app/design/frontend/Cloudways/m2-theme/web
/app/design/frontend/Cloudways/m2-theme/web/css
/app/design/frontend/Cloudways/m2-theme/web/css/source
/app/design/frontend/Cloudways/m2-theme/web/css/fonts
/app/design/frontend/Cloudways/m2-theme/web/css/images
/app/design/frontend/Cloudways/m2-theme/web/css/js
/app/design/frontend/Cloudways/m2-theme/etc
/app/design/frontend/Cloudways/m2-theme/etc/view.xml
/app/design/frontend/Cloudways/m2-theme/Magento_Theme
/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout
/app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout/default.xml
The web folder will be created where our theme’s CSS, js, fonts and images is located. If Magento 2 doesn’t have a skin folder, these files go in here.
We have created view.xml file under the etc directory, with the view.xml file. We configure the Magento 2 Catalog images size and other things.
After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your store. Go to Magento 2 backend, then go to Content > Design > Themes. And make your sure your theme appears on this list.
When you can see your theme in this list, go to Stores > Configuration > Design, select your newly created theme from those shown in the image below.
- After you select your theme, click on the “Save Config” button.
- Clear the cache.
Note: This is the first of this Magento 2 theme development series. I hope now you have a working Magento 2 theme which you’ve configured and created by yourself. In this first part of this series, I have covered the basics of Magento theme development. In the next part Finalize Custom Theme In Magento 2, I am going to include the following:
- Configuring images
- Declaring logo
- Configuring image properties
- Styling and Editing & Overriding templates
- Locate layouts, templates, and styles
Keep looking out for this space for my upcoming posts in the series. If you have any issues in this tutorial, then please feel free to let me know via the comments section below.