Read More
Read More
Menu Close

    Custom Theme in Magento2

    Today, we will learn how to create a custom theme in Magento2. Let’s look through all the steps which are required to create a custom theme in Magento2.

    Create a Magento theme directory :

    Magento 2 themes are located in the /app/design/frontend folder, so First, we have to create a Vendor folder and then create a theme folder inside of it.

    E.g: app/design/frontend/Webkul/CustomTheme

    Here, Webkul is a Vendor name and CustomTheme is the theme name.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Magento theme declaration :

    First, we should create a theme.xml file in the theme root folder with the following code:

    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
      <title>CustomTheme</title>
      <parent>Magento/Luma</parent>
      <media>
         <preview_image>media/mytheme.png</preview_image>
      </media>
    </theme>

    Here, we set the theme’s title tag where we set the ThemeName and parent tag where we set the parent theme name because all unfound static files, as well as template files, will be taken from a parent theme. and In the preview_image tag, a thumbnail is defined to present a theme in the admin part.

    Magento theme registration

    To register the theme into the system, we need to create a registration.php file at the root directory of the theme folder.

    <?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::THEME,
        'frontend/Webkul/CustomTheme',
        __DIR__
    );
    

    Adding Composer.json file

    This step is not necessary, but if you want to spread a theme as a composer package then you need to create a composer.json file in the root directory.

    {
        "name": "Webkul/CustomTheme",
        "description": "This is a Custom Theme",
        "require": {
            "php": "~5.5.0|~5.6.0|~7.0.0",
            "Webkul/CustomTheme": "100.0.*",
            "magento/framework": "100.0.*"
        },
        "type": "magento2-theme",
        "version": "100.0.1",
        "license": [
            "OSL-3.0",
            "AFL-3.0"
        ],
        "autoload": {
            "files": [
                "registration.php"
            ]
        }
    }
    

    Now, run the Magento setup: upgrade and deploy commands and check our custom theme is available in the Admin area.

    Proceed to the section Content —> Design —> Themes and make sure that the created theme is on the list:

    custom theme in Magento2

    If you apply the custom theme then proceed with Content → Design → Configuration and then click Edit for the website or web store that you want to apply your theme too. Select a theme and save settings.

    custom theme in Magento2

    Creating directories for CSS, JavaScript, images, and fonts

    Let’s create folders for custom theme static files. The structure should be the following:

    app/design/frontend/<Vendor>/<theme>/

    Screenshot-from-2022-05-18-13-18-18

    Theme logo definition

    In Magento2, the logo format is SVG by default, and the logo.SVG is located in <theme_dir>/web/images

    To add a custom logo then:

    1> If the logo format is SVG then put in <theme_dir> /web/images

    2> if the logo format is different then it’s necessary to add a file <theme>/Magento_Theme/layout/default.xml.

    In this case, we extend the layout of a parent theme. Then in the layout, the data on the logo should be added.

    For customlogo.png with the size 70×40 will be declared as:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/style.css" />
        </head>
        <body>    
            <referenceBlock name="logo">
                <arguments>
                    <argument name="logo_file" xsi:type="string">images/mytheme.png</argument>
                    <argument name="logo_img_width" xsi:type="number">70</argument>
                    <argument name="logo_img_height" xsi:type="number">40</argument>
                </arguments>
            </referenceBlock>
        </body>
    </page>

    The complete file structure will be:

    custom theme in Magento2

    If the theme is applied then the front page will look as follow.

    custom theme in Magento2

    Now, you can add CSS and JS to change the styling and override the Magento Layouts for styling.

    This is a simple step for creating a custom theme in Magento2.

    Thanks !!

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top