Create custom theme for frontend magento 2
high level steps required to add a new theme


  1. Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>.
  2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.
  3. Add a composer.json file.
  4. Add registration.php.
  5. Directory Structure.
  6. Configure your theme in the Admin panel.

Step 1 - Create a directory for the theme

  1. Go to <your Magento install dir>/app/design/frontend.
  2. Create a new directory named according to your vendor name: /app/design/frontend/<Vendor>.
  3. Under the <vendor> directory, create a directory named according to your theme.
For example - /app/design/frontend/Denish/customtheme

Step 2 - Declaration of theme in theme.xml

  1. Add or copy from an existing theme.xml file to your theme directory app/design/frontend/<Vendor>/<theme>.
  2. Configure it using the following example:
 <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
      <title>Custom theme</title> <!-- your theme's name -->
      <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
 </theme>

Step 3 - add composer.json file

{
    "name": "Denish/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": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 4 - add registration.php file

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Denish/customtheme',
    __DIR__
);

Step 5 - Directory Structure

/app/design/frontend/Denish/customtheme/theme.xml /app/design/frontend/Denish/customtheme/registration.php /app/design/frontend/Denish/customtheme/composer.json /app/design/frontend/Denish/customtheme/media /app/design/frontend/Denish/customtheme/media/customtheme-image.jpg /app/design/frontend/Denish/customtheme/web /app/design/frontend/Denish/customtheme/web/css /app/design/frontend/Denish/customtheme/web/css/source /app/design/frontend/Denish/customtheme/web/css/fonts /app/design/frontend/Denish/customtheme/web/css/images /app/design/frontend/Denish/customtheme/web/css/js /app/design/frontend/Denish/customtheme/etc /app/design/frontend/Denish/customtheme/etc/view.xml /app/design/frontend/Denish/customtheme/Magento_Theme /app/design/frontend/Denish/customtheme/Magento_Theme/layout /app/design/frontend/Denish/customtheme/Magento_Theme/layout/default.xml

Step 6 - Configure in admin panel

1. In Admin, go to CONTENT > Design > Configuration. A Design Configuration page opens. It contains a grid with the available configuration scopes. 
2. In the configuration record corresponding to your store view, click Edit. The page with design configuration for the selected scope opens.
3. On the Default Theme tab, in the Applied Theme drop-down, select your newly created theme.
4. Click on save configurations.
5. Clear cache and load frontend.
Refer - 
https://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html


Experienced Magento Certified Developer with a demonstrated history of working in the information technology and services industry. Skilled in SQL, PHP, XAMPP, jQuery, and Microsoft Office. Strong engineering professional with a Master of Computer Applications

0 comments:

Post a Comment

Popular Posts

Have You Any Questins Let Us Know.

Contact Us
DENISH VACHHANI
Ahmedabad India