Magento is one of the most popular and widely-used eCommerce platforms. Magento announced the launch of Magento 2 in July 2015 promising an extraordinary feature-rich eCommerce platform including bug fixes from Magento 1.
Now about the themes. A theme is a component of the Magento 2 application that provides a consistent look and feel (visual design) for the entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles, and images.
By default, you get two themes when you install Magento 2 – Luma and Blank – which you can see after installing Magento 2 successfully. Luma is a demonstration theme, while Blank is a basis for custom theme creation. The Luma theme is derived from the blank theme, so ultimately, Magento blank theme is the skeleton for any future custom theme development in Magento 2.
In Magento 2, if you want to customize the default design or if you need to create your own theme, you have to create a custom theme. Magento strongly recommends not to change or edit the default Luma and Blank theme files.
This guide (part 1 and part 2) will help you develop your own custom theme in Magento 2.
Here Are The List Of Steps You Need To Follow For A Custom Theme Development:
- Create a directory for the theme
- Add a declaration for the theme
- Add a composer.json file
- Add registration.php
- Create directories for CSS, JavaScript, images, and fonts
- Configure your theme in the Admin panel
- Final Deployment
Requirements For Theme Development
It is also essential to check whether your server meets the minimal Magento 2 requirements:
Apache: 2.2 or 2.4
PHP: 5.5.x or 5.6.x
MySQL: 5.6.x
Also, we assume that you have some knowledge of Magento 2 and Magento 2 installed on your server and on your local computer to test this new theme development.
1. Create a directory for the theme
Go to: <your Magento 2 root directory>/app/design/frontend and create a new directory with the vendor name you want for the theme package,
For example, I have used the name Bizspice here: /app/design/frontend/Bizspice
Now in your vendor directory, create your theme directory, for instance – Mytheme:n
/app/design/frontend/BizSpice/Mytheme/
2. Add a declaration for the theme
Once you have created the directory structure of your theme, now we have to declare that theme by creating the theme.xml file to declare it.
theme.xml defines basic theme configuration, including at least the title and usually the parent theme that’s being extended as well.
Create the theme.xml file under app/design/frontend/Bizspice/Mytheme/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>Mytheme</title>
<parent>Magento/Luma</parent>
<media>
<preview_image>media/mytheme-theme-image.jpg</preview_image>
</media>
</theme>
3. Add a composer.json file
To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server.
Use app/design/frontend/Bizspice/Mytheme/composer.json to register the package on a packaging server. This file is provided in the theme dependency information.
"name": "Bizspice/Mytheme",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"Bizspice/Mytheme": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
4. Add registration.php
To register your theme in the Magento system, you need to create a registration.php file in your theme directory: app/design/frontend/Bizspice/Mytgeme/registration.php and use the following code in your registration.php:
<?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ComponentRegistrar::THEME, 'frontend/<Bizspice>/<Mytheme>', __DIR__ );
5. Create directories for CSS, JavaScript, images, and fonts
The theme package consists of many types of files: styles, fonts, JavaScript, and images. Each one has to be stored in its own sub-directory of web in theme directory:
app/design/frontend/Bizspice/Mytheme ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
Tip:
In Magento 2, theme or extension development, when you update any files in app/design/frontend/Bizspice/Mytheme/web folder, you have two static folders located at pub/static and var/view_preprocessed. Therefore, you will need to compile and recreate static files. Otherwise, you will see no change in the frontend.
Directory Structure in Magento 2 Theme Development
At this point, you can see what your theme directory should look like. I am using my own Vendor and directory name.
app/design/frontend/Mycompany/
├── default/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images/ │ │ │ ├── logo.svg │ │ ├── css/ │ │ │ ├── source/ │ │ │ │ ├── _theme.less │ │ ├── fonts/ │ │ ├── js/ │ ├── registration.php │ ├── theme.xml │ ├── composer.json
6. Configure your theme in the Admin panel
Step 1: Go to Magento 2 backend, then to Content > Design > Themes. And make sure your theme appears on this list.
Step 2: Go to Store => Configuration => Design => Choose your newly created theme from those shown in the image below.
Step 3: Select Mytheme from the Applied Theme drop-down menu and click on Save Configuration.
After selecting your theme, click on the “Save Config” button.
Clear the cache.
7. Final Deployment
Open the SSH terminal and go to the root directory of your Magento 2. Now run all these commands one by one:
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/* php bin/magento setup:upgrade php bin/magento setup:db-schema:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento indexer:reindex php bin/magento cache:clean php bin/magento cache:flush
Great job! You’re all done! Open your store’s homepage and you’ll see that your custom theme has been applied successfully.