{"id":345501,"date":"2022-07-27T04:45:21","date_gmt":"2022-07-27T04:45:21","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=345501"},"modified":"2023-04-27T05:46:04","modified_gmt":"2023-04-27T05:46:04","slug":"best-approach-to-creating-a-theme-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/best-approach-to-creating-a-theme-in-magento-2\/","title":{"rendered":"Understanding Magento Theme: Best approach to creating a theme in Magento 2"},"content":{"rendered":"\n

Hello Friends!!<\/p>\n\n\n\n

In today\u2019s blog, I will recommend the best approach for creating a custom theme.<\/p>\n\n\n\n

We should always use best practices for theme development<\/a> to avoid conflicts and issues with
our theme after we update or upgrade our Magento instance.<\/p>\n\n\n\n

By default, there are 2 Magento themes.
Luma and Blank
Luma is a demonstration theme, while Blank acts as a basis for custom Magento theme customization.<\/p>\n\n\n\n

\n

Firstly, let’s understand the directory structure.<\/p>\n\n\n\n

\"Screenshot-2022-07-26-14_58_04\"<\/figure>\n<\/div><\/div>\n\n\n\n

Now Create a theme.xml file to initialize your theme.<\/p>\n\n\n\n

It contains the title of the theme, the preview image of the theme, the parent theme (all layouts of this theme), and CSS can be inherited by default.<\/p>\n\n\n\n

Example – <\/p>\n\n\n\n

<theme xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config\/etc\/theme.xsd">\n     <title>Custom Theme<\/title>\n     <parent>Magento\/luma<\/parent>\n     <media>\n         <preview_image>media\/theme-preview.jpg<\/preview_image>\n     <\/media>\n<\/theme><\/pre>\n\n\n\n
Create a composer.json file in your theme directory to register the package.<\/p>\n\n\n\n
\n{\n   "name": "Vendor\/themeName",\n   "description": "Custom theme in Magento 2",\n   "require": {\n     "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",\n     "magento\/framework": "100.0.*"\n   },\n   "type": "magento2-custom-theme",\n   "version": "1.0.0",\n   "autoload": {\n      "files": [\n         "registration.php"\n      ]\n    }\n}<\/pre>\n\n\n\n
Create a registration.php file in your theme directory to register your theme in Magento.<\/p>\n\n\n\n
<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n'frontend\/Vendor\/ThemeName',\n__DIR__\n);\n?><\/pre>\n\n\n\n
Now create a view.xml file to change the type and size of the image or create your own type in the app\/design\/frontend\/Vendor\/themeName\/etc directory.<\/p>\n\n\n\n
Example – <\/p>\n\n\n\n
<view xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config\/etc\/view.xsd">\n<media>\n<images module="Magento_Catalog">\n.....\n     <image id="category_page_grid" alt="preview_img" type="small_image">\n        <width>200<\/width>\n        <height>200<\/height>\n      <\/image>\n.....\n    <\/images>\n<\/media>\n<\/view><\/pre>\n\n\n\n
Base layouts –<\/strong>
Layout files provided by modules, Location :<\/p>\n\n\n\n