Featured post

Magento® 2.x How to create basic frontend module

How to create basic frontend module in Magneto 2 ?? Step 1. Decide a name space(Extendtree) & module name(Helloworld). Ex. Extendtre...

Saturday, 3 September 2016

Magento® 2.x How to create custom theme


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

<theme xmlns:xsi=&#8221;http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:noNamespaceSchemaLocation=&#8221;../../../../lib/internal/ Magento/Framework/Config/etc/theme.xsd&#8221;> <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

{ "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

<!--php /** * Copyright &#169; 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."

3 comments :

  1. 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/

    ReplyDelete
  2. Awesome 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!
    http://newizze.com/

    ReplyDelete
  3. 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.

    ReplyDelete