Magento 2 – Create custom Theme step by step

Create Magento 2 custom Theme step by step process. In Magento 2 has by default Luma and Blank themes – that you can see after installing Magento 2 successfully. Magento 2 default demonstration theme is Luma theme, and Blank is basis for custom theme creation.

We can create custom theme by call parent Luma or Blank theme. In this article I will discus create new theme by Luma parent theme.

Theme Folder and Files structure

app/design/frontend/Extendfeature/
├── ultimate/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

To create a theme directory for your Magento 2, you need to go: app/design/frontend directory. Under frontend directory, create a new directory according to your theme vendor name: app/design/frontend/Extendfeature directory, I have choose Extendfeature for my theme vendor name under your theme vendor directory, create a directory for your Magento 2 theme: app/design/frontend/Extendfeature/ultimate I have choose ultimate for my theme name directory.

After creating files and folder structure, we need to declare name/title your Magento 2 theme, So that Magento knows it exists and we can set your theme as the current store theme in your Magento 2 backend.

Declare your Magento 2 theme

Now you need to create the theme.xml file under app/design/frontend/Extendfeature/ultimate/ directory and use the code below:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:nonamespaceschemalocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>ExtendFeature Ultimate</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

In <title> tag enter the name of your theme, and in the <parent> tag you can specify parent theme for fallback purposes. I am using the Luma theme. In the <preview_image> tag I declare a theme preview image.

Make Your Theme a Composer package

PHP dependency management tool is composer. it allows declare the libraries your project depends on and composer will manage install/update them for you and distribute theme as a package, we need to add a composer.json file to the theme directory.

{
    "name": "Extendfeature/ultimate",
    "description": "N/A",
    "config": {
        "sort-packages": true
    },
    "require": {
        "php": "~7.1.3||~7.2.0",
        "Extendfeature/ultimate": "100.0.*",
		"magento/framework": "*",
		"magento/theme-frontend-blank": "*"
    },
    "type": "magento2-theme",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Register your Magento 2 Custom theme

Add registration.php to register your Magento 2 Custom theme in your theme directory: app/design/frontend/Extendfeature/ultimate/registration.php and add the following content in your 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/Extendfeature/ultimate',
    __DIR__
);

Creating web static files, folders

For theme design view, we need to many static files such as javascript, css, images and fonts. Magento 2 are stored in separate folders in web of theme package.

Here are the structure

app/design/frontend/Extendfeature/ultimate/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

Configure storefront images size

Copy the view.xml file from the vendor/magento/theme-frontend-luma/etc directory of an existing theme (for example, from the Luma theme) to your theme app/design/frontend/Extendfeature/ultimate/etc directory. And let update the image configuration for storefront catalog product grid and others template page.

<images module="Magento_Catalog">
	.........
	<image id="category_page_grid" type="small_image">
		<width>240</width>
		<height>300</height>
	</image>
	<image id="category_page_list" type="small_image">
		<width>240</width>
		<height>300</height>
	</image>
	<image id="product_page_image_medium" type="image">
		<width>700</width>
		<height>700</height>
	</image>
	<image id="product_page_image_small" type="thumbnail">
		<width>88</width>
		<height>110</height>
	</image>
	<image id="product_page_main_image" type="image">
		<width>700</width>
		<height>560</height>
	</image>
	.........
</images>

Configure Magento 2 Custom Theme via Admin panel

Run following commands and check your newly created theme is working.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:flush

After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your magento store. Login into Magento 2 admin panel, then go to Content > Design > Themes. And make your sure your theme title appears on this list.

Theme Configuration, When you can see your theme in this list, go to Content > Design > Configuration, select your newly created theme from those shown in the image below. After change your theme, click on “Save Config” button.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE