What is a Magento theme?
A Theme is a component of Magento application which provides a consistent look and feel (visual design) for entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles or images.
Themes are designed to override or customize view layer resources, provided initially by modules or libraries.
In this guide we will help you to create a simple Magento 2 theme which can be useful as a base to create your own custom Magento 2 visual experience and easily customize design layout of all pages.
Follow below step by step guide for Magento 2 theme development & customization
Disable Cache
Before you start, Please make sure that your Magento cache is disabled so that you don’t need to clear the cache every time you make changes in the theme. This will save you a lot of time in development process
To disable cache, go to Admin → System → Cache Management → select all cache types and disable them
Developer Mode
Ensure that your Magento store is in developer mode so that all changes are reflected in real time and you can view any errors you come across while doing coding.
Ti enable the developer mode, you would need to run commands from terminal using SSH access. Login to your Magento store SSH account and go to Magento root directory and run below command:
php bin/magento deploy:mode:set developer
Create theme
Here are the list of steps you need to follow for theme development:
1. Create a directory for the theme
2. Add a declaration for theme
3. Add a composer.json file
4. Add registration.php
5. Create directories for CSS, JavaScript, images, and fonts
6. Setup theme logo
7. Customize theme layout
8. Configure your theme in the Admin panel
Let’s understand each step in detail
Create a directory containing theme
Go to: /app/design/frontend And create a new directory with the vendor name you want for theme package,
For example i have used name Mageice here : /app/design/frontend/MageIce
Now in your vendor directory, create your theme directory, for example – Icecube: /app/design/frontend/MageIce/Icecube/
app/design/frontend/ ├──/ │ │ ├──... / │ │ │ ├── ...
Declare your theme
Once you have created directory structure of your theme, now we have to declare that theme by creating theme.xml file which contains theme name and the parent theme name if it’s inherited from another and if you like you can also specify theme preview image
MageIce Icecube Magento/blank media/preview.jpg
Composer package
Magento 2 themes are distributed as Composer packages so it will be registered as a Package on server. Add a file composer.json which is optional
{ "name": "mageice/icecube", "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" ] } }
Adding registration.php
Now to register your theme in the system, add a file registration.php in your theme directory with the below content:
Creating directory structure for Static files
Theme package consists of many types of files: styles, fonts, JavaScript and images. Each one have to be stored in its own sub-directory of web in theme directory:
app/design/frontend/mageice/icecube ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/Configure images
Product image sizes and other properties used on theme are configured in a view.xml which is a configuration file. It is required for a theme, but is optional if exists in the parent theme. Create the etc directory as above and copy view.xml from the etc directory of an existing theme.
250 250 Declaring Theme Logo
In the Magento application, the default format and name of a logo image is logo.svg. You can use a logo file with a different name and format, but you might need to declare it. You have to create a file default.xml in your theme’s layout directory and below code if you theme_logo.png is in size of 300×300:
images/theme_logo.png 300 300
Customize Theme Layout
Once your basic theme structure is created, now you can customize or override any layout and setup new design layout for your new theme.The layouts for different application components can be distinguished by below:
- Base layouts: Layout files of modules
Page configuration and generic layout files: Magento_Catalog/view/frontend/layout
Page layout files: Magento_Catalog/view/frontend/page_layout
- Theme layouts: Layout files of themes.
Page configuration and generic layout files: app/design/frontend/mageice/icecube/Magento_Catalog/layout
Page layout files: app/design/frontend/mageice/icecube/Magento_Catalog/page_layout
Create a theme extending file
Instead of using complete page layout file of Magento and modifying its code, you can just create a file which extends layout with changes you want. So if you want to customize layout of Magento_Catalog/view/frontend/layout/catalog_product_view.xml, you can add a layout file with same name in your custom theme: app/design/frontend/mageice/icecube/Magento_Catalog/layout/catalog_product_view.xml
Configure the theme in Magento admin panel
Next step is to apply the custom theme you created from Magento Admin so it’s available on your front site. To apply theme go to Admin->Content->Design->Configuration
Click Edit on your store view and a page with design configuration will open and on Default Theme tab, in the Applied Theme drop-down, select your newly created theme and Click Save Configuration.
Final Deployment
Last but not the least, we have to run one command to deploy the files we have created for theme so that it’s visible on Magento store front.
Login to your Magento store SSH account and go to Magento root directory and run below command:
php bin/magento setup:upgrade
And after that you have to run another command to deploy the theme files.
php bin/magento setup:static-content:deploy
That’s all, If you have any further questions about magento 2 theme development or if need any help from our expert magento 2 developers, contact us now for free consultation
The post Step by Step Guide on Magento 2 Theme Development & Customization appeared first on IceCube Digital.
This post first appeared on Why Magento Is The King Of All ECommerce Platforms Available In The Market, please read the originial post: here