How to create custom theme in Magneto 2 ??
Step 1. Create Theme Directory. Ex. magento2/app/design/frontend/extendtree/customtheme.
Step 2. Now create a theme.xml file. Directory will be like app/design/frontend/extendtree/customtheme/theme.xml
<![CDATA[
<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:noNamespaceSchemaLocation=”../../../../lib/internal/
Magento/Framework/Config/etc/theme.xsd”>
<title>Extendtree custom theme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/customtheme.jpg</preview_image>
</media>
</theme>
]]>
Note: upload theme image inside directory: app/design/frontend/extendtree/customtheme/media/customtheme.jpg
Step 3. Add a composer.json file to the theme directory : magento2/app/design/frontend/extendtree/customtheme/composer.json
<![CDATA[
{
"name": "extendtree/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": "customtheme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
]]>
Step 4. Add registration.php file in theme directory: magento2/app/design/frontend/extendtree/customtheme/registration.php
<![CDATA[
<!--php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/extendtree/customtheme',
__DIR__
);
</xmp--></strong></div></p>
<p><strong>Step 5. </strong>Add file default.xml in directory <strong>magento2/app/design/frontend/extendtree/customtheme/Magento_Theme/layout/default.xml </strong></p>
<p><div class="source-code" style="font-weight: 5px; background-color: #a5c878"><strong><xmp>
<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">/web/images/customtheme_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>
]]>
Note: custom theme logo need to upload in directory: /app/design/frontend/extendtree/customtheme/web/images/customtheme_logo
Step 6. That's it. Now your theme is fully configured with magento system. To confirm this check in backend :Admin-> Content > Design > Themes
Step 7. Now select your theme inside Admin-> Stores > Configuration > Design & clear the caches.
That's it..!!
Thank you..!!
"The easy way for everything."
Great Article but you have missed last step in which you have to run some commands in the Magento root directory. Here's a full guide: https://magenticians.com/create-custom-theme-magento-2/
ReplyDeleteAwesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
ReplyDeletehttp://newizze.com/
Thanks for sharing, I always create custom theme instead of buying any exisdting, and it is the best practice to get unique and 100% self made theme with your mind, Here's the guide that helped me while creating custom theme in Magento 2.
ReplyDeleteOf the considerable number of components of a logo, shading assumes a focal job in the allure and viability of a logo. logo design service
ReplyDeleteThere is so much in this article that I would never have thought of on my own. Your content gives readers things to think about in an interesting way. unique logo design
ReplyDelete