What is a Magento theme?
A theme is a component of Magento application which gives a comatible look and feel for whole Magento storefront or admin by using a combination of custom templates, styles, design or images It uses a combination of custom templates, layouts, styles or images development.
In this post we are going to provide a complete guide for create your own custom theme development. If you are a beginners than you are at the right place because after reading this post you will be able to create your magento 2 theme easily.
Let’s understand each step in detail
1 Create A Directory:
Go to: /app/design/frontend And create a new foler/directory with the vendor name that you want for theme package.
For example I have used name Webiators here : /app/design/frontend/Webiators
Now in our vendor directory, create our theme directory, for example – CustomTheme: /app/design/frontend/Webiators/CustomTheme/
1 | app/design/frontend/Webiators/CustomTheme/ |
app/design/frontend/
|—-Webiators/
|—-|—-|—-CustomTheme/
|—-|—-|—-|—-|————–
2 Declare Your Theme:
Now we need to create the theme.xml file for declaring that theme under app/design/frontend/Webiators/CustomTheme/theme.xml and use the code below:
1 | Path- /app/design/frontend/Webiators/CustomTheme/theme.xml |
1 2 3 4 5 6 7 | <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Webiators CustomTheme</title><!-- your theme's name --> <parent>Magento/blank</parent><!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/customtheme-image.jpg</preview_image><!-- the path to your theme's preview image --> </media> </theme> |
3 Create A Registration.php File For Registering Your Child Theme:
1 | Path- /app/design/frontend/Webiators/CustomTheme/registration.php |
1 2 3 4 5 | \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Webiators/CustomTheme', __DIR__ ); |
4 Composer Package:
1 | Path- /app/design/frontend/Webiators/CustomTheme/composer.json |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | { "name": "webiators/customtheme", "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" ] } } |
5 Directory Structure For Static Files:
1 2 3 4 5 6 | Path- /app/design/frontend/Webiators/CustomTheme/web Path- /app/design/frontend/Webiators/CustomTheme/web/css Path- /app/design/frontend/Webiators/CustomTheme/web/css/source Path- /app/design/frontend/Webiators/CustomTheme/web/fonts Path- /app/design/frontend/Webiators/CustomTheme/web/images Path- /app/design/frontend/Webiators/CustomTheme/web/js |
app/design/frontend/Webiators/CustomTheme/
|—-web/
|—-|—-css/
|—-|—-|—-source/
|—-|—-fonts/
|—-|—-images/
|—-|—-js/
6 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.
let update the image configuration for catalog product grid page.
1 2 | Path- /app/design/frontend/Webiators/CustomTheme/etc Path- /app/design/frontend/Webiators/CustomTheme/etc/view.xml |
1 2 3 4 | <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> |
In view.xml, image properties are configured in the scope of element:
1 2 3 | <images module="Magento_Catalog"> ... <images/> |
Image properties are configured for each image type defined by the id and type attributes of the element:
1 2 3 4 5 6 | <images module="Magento_Catalog"> <image id="unique_image_id" type="image_type"> <width>250</width> <!-- Image width in px --> <height>250</height> <!-- Image height in px --> </image> <images/> |
7 Declaring Theme Logo:
In the Magento store, 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:
1 2 3 | Path- /app/design/frontend/Webiators/CustomTheme/Magento_Theme Path- /app/design/frontend/Webiators/CustomTheme/Magento_Theme/layout Path- /app/design/frontend/Webiators/CustomTheme/Magento_Theme/layout/default.xml |
1 2 3 4 5 6 7 8 9 10 11 | <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/theme_logo.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page> |
8 Final Deployment:
Last but not 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:
1 | php bin/magento setup:upgrade |
And after that you have to run another command to deploy the theme files.
1 | php bin/magento setup:static-content:deploy |
If you have any query in this tutorial, then please feel free to let me know via the comments section below.
