Magento2 – Theme Basics

In this blog post we will see how setup a new theme in magento2

Setting up a new theme is very easy in magento2. Theme name is magento is divided in two parts company name and actual theme name.e.g the pre existing themes like Magento_Luma or Magento_Blank.

If you used the “magento2-community-edition” repository to setup your magento2 then you will find theme files in “vendor/magento/theme-frontend-luma” . But if you used to the “magento2” repository existing theme are located in “app/design/frontend”

Step1

So to create your own theme go to folder app/design/frontend and make a new folder
Excellence (company name) and then first (theme name)
so your directory structure would be app/design/frontend/Excellence/first

Step2

Create a file name theme.xml inside your theme directory and add the following code
app/design/frontend/Excellence/first/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Excellence First</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/preview.jpg</preview_image>
     </media> -->  <!-- Here you can put a preview image of your theme. If you don't have a preview image comment it else it gives an error -->
    
 </theme>

Step3

Create a file name registration.php inside your theme directory

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Excellence/first',
    __DIR__
);

Step4 – Optional

Create a componser.json file and add the following code

{
    "name": "excellence/first",
    "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"
        ]
    }
}

Step5

At this stage, and empty theme should have been installed which can be seen in magento admin.
Stores -> General -> Design -> Design Theme

Your theme should be visible here

Troubleshooting: If you get any errors make sure all permissions are correct and you have followed the post installation blog

The post Magento2 – Theme Basics appeared first on Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer.