{"id":335675,"date":"2022-05-18T08:05:30","date_gmt":"2022-05-18T08:05:30","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=335675"},"modified":"2025-12-17T05:00:19","modified_gmt":"2025-12-17T05:00:19","slug":"custom-theme-in-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/","title":{"rendered":"How to Create a Custom Theme in Magento 2"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p><a href=\"https:\/\/webkul.com\/adobe-commerce-theme-template-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Theme Development<\/a> &amp; <a href=\"https:\/\/webkul.com\/blog\/magento-customization\/\">Customisation<\/a> \u2013 Today, we will learn how to create a custom theme in Magento 2<\/p>\n\n\n\n<p>Magento 2 provides a powerful and flexible theming system that allows developers to customize the storefront <strong>without touching core files<\/strong>.<\/p>\n\n\n\n<p>Whether you want to change styles, modify layouts, or build a completely new storefront design, creating a custom theme is the correct and upgrade-safe approach.<\/p>\n\n\n\n<p>This blog is written in a <strong>step-by-step, beginner-friendly manner<\/strong> and gradually moves toward advanced concepts.<\/p>\n\n\n\n<p>By the end, you\u2019ll clearly understand <strong>how <a href=\"https:\/\/webkul.com\/blog\/xtremo-theme-magento-2-marketplace\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 themes<\/a> work and how to build one professionally<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. How Magento 2 Theming Works (Concept First)<\/h2>\n\n\n\n<p>Before writing any code, it\u2019s important to understand how Magento 2 themes are structured.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 Theme Inheritance (Most Important Concept)<\/h3>\n\n\n\n<p>Magento 2 themes work on a <strong>parent\u2013child<\/strong> model.<\/p>\n\n\n\n<p>Instead of building everything from scratch, you usually:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a <strong>child theme<\/strong><\/li>\n\n\n\n<li>Extend an existing <strong>parent theme<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Common parent themes provided by Magento:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Magento\/blank<\/strong> \u2192 Lightweight, recommended for custom development<\/li>\n\n\n\n<li><strong>Magento\/luma<\/strong> \u2192 Demo theme built on top of Blank<\/li>\n<\/ul>\n\n\n\n<p><strong>Why is inheritance useful?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You only override what you need<\/li>\n\n\n\n<li>Core updates do not break your theme<\/li>\n\n\n\n<li>Faster, cleaner, and <a href=\"https:\/\/webkul.com\/magento-speed-optimization-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimized<\/a> development<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 What a Theme Can Control<\/h3>\n\n\n\n<p>A Magento 2 theme can be customized:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Page structure (layout XML)<\/li>\n\n\n\n<li>HTML output (PHTML templates)<\/li>\n\n\n\n<li>Styling (LESS\/CSS)<\/li>\n\n\n\n<li>JavaScript behavior<\/li>\n\n\n\n<li>Images and icons<\/li>\n\n\n\n<li>Email templates<\/li>\n\n\n\n<li>Translations<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Creating the Theme Folder Structure<\/h2>\n\n\n\n<p>Magento looks for themes inside this directory: app\/design\/frontend\/<strong>&lt;<\/strong>Vendor<strong>&gt;<\/strong>\/<strong>&lt;<\/strong>theme_name<strong>&gt;<\/strong>\/<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">app\/design\/frontend\/Webkul\/customtheme\/\n\u251c\u2500\u2500 etc\n\u2502   \u2514\u2500\u2500 view.xml\n\u251c\u2500\u2500 Magento_Theme\n\u2502   \u2514\u2500\u2500 layout\n\u2502       \u2514\u2500\u2500 default.xml\n\u251c\u2500\u2500 web\n\u2502   \u251c\u2500\u2500 css\n\u2502   \u251c\u2500\u2500 images\n\u2502   \u2514\u2500\u2500 js\n\u251c\u2500\u2500 i18n\n\u2502   \u2514\u2500\u2500 en_US.csv\n\u251c\u2500\u2500 registration.php\n\u2514\u2500\u2500 theme.xml\n<\/pre>\n\n\n\n<p>Don\u2019t worry if this looks big right now \u2014 we\u2019ll understand each file step by step.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Mandatory Theme Files (Required to Register Theme)<\/h2>\n\n\n\n<p>Magento will not recognize your theme unless these files exist.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 theme.xml (Theme Identity)<\/h3>\n\n\n\n<p>This file defines the theme name and its parent.<\/p>\n\n\n\n<p><code>app\/design\/frontend\/Webkul\/customtheme\/theme.xml<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n       xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n    &lt;title>Webkul Custom Theme&lt;\/title>\n    &lt;parent>Magento\/blank&lt;\/parent>\n&lt;\/theme>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 registration.php (Theme Registration)<\/h3>\n\n\n\n<p>This file registers the theme in Magento.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n    'frontend\/Webkul\/customtheme',\n    __DIR__\n);\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 view.xml (Image &amp; Media Configuration)<\/h3>\n\n\n\n<p>Used to define image sizes used across the storefront.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;view xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/view.xsd\">\n    &lt;media>\n        &lt;images module=\"Magento_Catalog\">\n            &lt;image id=\"category_page_grid\" type=\"small_image\">\n                &lt;width>300&lt;\/width>\n                &lt;height>300&lt;\/height>\n            &lt;\/image>\n        &lt;\/images>\n    &lt;\/media>\n&lt;\/view>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. Activating the Theme in Admin Panel<\/h2>\n\n\n\n<p>After creating files, Magento needs to register them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 Run Required Commands<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento setup:upgrade\nphp bin\/magento cache:flush\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 Apply Theme from Admin<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Admin \u2192 Content \u2192 Design \u2192 Configuration<\/strong><\/li>\n\n\n\n<li>Select Store View<\/li>\n\n\n\n<li>Choose <strong>Webkul Custom Theme<\/strong><\/li>\n\n\n\n<li>Save configuration<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Understanding Layout XML (Page Structure Control)<\/h2>\n\n\n\n<p>Layout XML decides <strong>what blocks appear on a page and where<\/strong>.<\/p>\n\n\n\n<p>Think of layout XML as the blueprint of a page.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 Global Layout Changes<\/h3>\n\n\n\n<p>File:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Magento_Theme\/layout\/default.xml\n<\/pre>\n\n\n\n<p>Example (remove compare link):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;remove name=\"compare-link\" \/>\n    &lt;\/body>\n&lt;\/page>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 Page-Specific Layout Files<\/h3>\n\n\n\n<p>Magento loads layout XML based on routes.<\/p>\n\n\n\n<p>Common examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home page \u2192 <code>cms_index_index.xml<\/code><\/li>\n\n\n\n<li>Product page \u2192 <code>catalog_product_view.xml<\/code><\/li>\n\n\n\n<li>Category page \u2192 <code>catalog_category_view.xml<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6. Overriding PHTML Templates (HTML Customization)<\/h2>\n\n\n\n<p>Templates control <strong>HTML output<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6.1 Correct Way to Override Templates<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Locate original template in:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">vendor\/magento\/module-*\/view\/frontend\/templates\n<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Copy it to your theme:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">app\/design\/frontend\/Webkul\/customtheme\/&lt;Module_Name>\/templates\/\n<\/pre>\n\n\n\n<p>Never edit files inside <code>vendor\/<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7. Styling in Magento 2 (LESS Made Simple)<\/h2>\n\n\n\n<p>Magento uses <strong>LESS<\/strong>, not plain CSS by default.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7.1 Important LESS Files<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">web\/css\/source\/\n\u251c\u2500\u2500 _variables.less   \u2192 Override default colors, fonts\n\u251c\u2500\u2500 _extend.less      \u2192 Add your custom CSS\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">7.2 Add Custom Styles<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.page-title {\n    font-size: 26px;\n    font-weight: 600;\n}\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8. Adding JavaScript in Theme<\/h2>\n\n\n\n<p>Magento uses RequireJS for JS loading.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8.1 requirejs-config.js<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var config = {\n    map: {\n        '*': {\n            customJs: 'js\/custom'\n        }\n    }\n};\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">8.2 Custom JS File<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">define(['jquery'], function ($) {\n    'use strict';\n    return function () {\n        console.log('Custom theme JS loaded');\n    };\n});\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">9. Static Content &amp; Modes (Very Important)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Developer Mode (During Development)<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento deploy:mode:set developer\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Faster<\/li>\n\n\n\n<li>No static deploy needed<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Production Mode (Live Website)<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento deploy:mode:set production\nphp bin\/magento setup:static-content:deploy\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">10. Translations (Multi-Language Support)<\/h2>\n\n\n\n<p>Create CSV file:<strong> i18n\/en_US.csv<\/strong><\/p>\n\n\n\n<p><strong>&#8220;Add to Cart&#8221;, &#8220;Add to Basket&#8221;<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">11. Email Template Overrides<\/h2>\n\n\n\n<p>You can override transactional emails.<\/p>\n\n\n\n<p>Path:<strong> Magento_Email\/email\/<\/strong><\/p>\n\n\n\n<p>Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Order confirmation<\/li>\n\n\n\n<li>Customer registration<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">12. Performance &amp; Best Practices<\/h2>\n\n\n\n<p>\u2714 Extend <strong>Magento\/blank<\/strong><br>\u2714 Prefer layout XML over template overrides<br>\u2714 Keep logic out of PHTML files<br>\u2714 Minimize JS and CSS<br>\u2714 Test in production mode<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">13. Common Beginner Mistakes<\/h2>\n\n\n\n<p>\u2716 Editing vendor files<br>\u2716 Hardcoding URLs<br>\u2716 Too many template overrides<br>\u2716 Ignoring cache\/static content<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Creating a custom theme in Magento 2 is not difficult once the fundamentals are clear.<\/p>\n\n\n\n<p>By understanding <strong>theme inheritance, layout XML, LESS, and proper overrides<\/strong>, you can build clean, scalable, and upgrade-safe storefronts.<\/p>\n\n\n\n<p>This blog gives you a complete guide for creating a custom theme in <a href=\"https:\/\/webkul.com\/magento-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Services<\/a> \u2014 from folder structure to production best practices.<\/p>\n\n\n\n<p>If you require technical support, feel free to email us at <a href=\"mailto:support@webkul.com\">support@webkul.com<\/a><\/p>\n\n\n\n<p>Additionally, explore a wide array of solutions to boost your store\u2019s capabilities by visiting our  <a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Commerce modules section<\/a> and\u00a0<a href=\"https:\/\/store.webkul.com\/Magento-2\/Marketplace-Addons.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Commerce marketplace addons<\/a>.<\/p>\n\n\n\n<p>Or looking to improve your store\u2019s speed and overall performance? Check out our\u00a0<a href=\"https:\/\/webkul.com\/magento-speed-optimization-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Speed &amp; Optimization services<\/a>.<\/p>\n\n\n\n<p>Get expert support and build <a href=\"https:\/\/webkul.com\/blog\/magento-customization\/\" target=\"_blank\" rel=\"noreferrer noopener\">customized solutions<\/a> by hiring skilled <a href=\"https:\/\/webkul.com\/hire-magento-developers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Commerce developers<\/a> for your project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Magento 2 Theme Development &amp; Customisation \u2013 Today, we will learn how to create a custom theme in Magento 2 Magento 2 provides a powerful and flexible theming system that allows developers to customize the storefront without touching core files. Whether you want to change styles, modify layouts, or build a completely new storefront <a href=\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":378,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[12784,12785,12786],"class_list":["post-335675","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-custom-theme","tag-custom-theme-magento2","tag-magento-2-theme"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Custom Theme in Magento 2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Custom Theme in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-18T08:05:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T05:00:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashish Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashish Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\"},\"author\":{\"name\":\"Ashish Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/57d23646a58691882a6bd0baf5dadc21\"},\"headline\":\"How to Create a Custom Theme in Magento 2\",\"datePublished\":\"2022-05-18T08:05:30+00:00\",\"dateModified\":\"2025-12-17T05:00:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\"},\"wordCount\":698,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"custom theme\",\"custom theme magento2\",\"magento 2 theme\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\",\"name\":\"How to Create a Custom Theme in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-05-18T08:05:30+00:00\",\"dateModified\":\"2025-12-17T05:00:19+00:00\",\"description\":\"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Custom Theme in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/57d23646a58691882a6bd0baf5dadc21\",\"name\":\"Ashish Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3ade0803c37d8f9fe88d8255d0db5361c67b2bc36a6bafa1b3e8804285115c9b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3ade0803c37d8f9fe88d8255d0db5361c67b2bc36a6bafa1b3e8804285115c9b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ashish Kumar\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ashishkumar-mg770\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Custom Theme in Magento 2 - Webkul Blog","description":"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Custom Theme in Magento 2 - Webkul Blog","og_description":"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.","og_url":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-18T08:05:30+00:00","article_modified_time":"2025-12-17T05:00:19+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Ashish Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ashish Kumar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/"},"author":{"name":"Ashish Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/57d23646a58691882a6bd0baf5dadc21"},"headline":"How to Create a Custom Theme in Magento 2","datePublished":"2022-05-18T08:05:30+00:00","dateModified":"2025-12-17T05:00:19+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/"},"wordCount":698,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["custom theme","custom theme magento2","magento 2 theme"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/","url":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/","name":"How to Create a Custom Theme in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-05-18T08:05:30+00:00","dateModified":"2025-12-17T05:00:19+00:00","description":"we will learn how to create a custom theme in Magento2. Follow the steps which are required to create a custom theme in Magento2.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Custom Theme in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/57d23646a58691882a6bd0baf5dadc21","name":"Ashish Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3ade0803c37d8f9fe88d8255d0db5361c67b2bc36a6bafa1b3e8804285115c9b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ade0803c37d8f9fe88d8255d0db5361c67b2bc36a6bafa1b3e8804285115c9b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ashish Kumar"},"url":"https:\/\/webkul.com\/blog\/author\/ashishkumar-mg770\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/378"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=335675"}],"version-history":[{"count":20,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335675\/revisions"}],"predecessor-version":[{"id":517603,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/335675\/revisions\/517603"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=335675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=335675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=335675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}