Magento 2 Creating a theme

Introduction

In this guide, I will cover the steps to create your own custom theme in Magento 2, including the folder structure and necessary files. This should help you get started with theme development in Magento 2.

Theme Folder Structure

To create a custom theme, you need to set up the following folder structure in app/design/frontend/:

app/design/frontend/Somename/Somename1/

Within this directory, you need to include the following subdirectories and files:

• Magento_Theme/layout/ – For your layout.xml files.
• Magento_Theme/templates/ – For your template.phtml files.

Web Directory Structure

Inside app/design/frontend/Somename/Somename1/, create a web/ folder with the following structure:

• css/ – For CSS files.
• js/ – For JavaScript files.
• images/ – For image files.
• fonts/ – For font files.

Required Files

In app/design/frontend/Somename/Somename1/, you also need to create the following files:

1. registration.php

Your registration.php file should contain the following code, ensuring somename and somename1 match your folder structure:

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

2. theme.xml

Your theme.xml file should contain the following code. Update the <parent> element if you are extending another theme:

<theme xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>
    <title>A NAME</title> <!-- your theme’s name -->
    <parent>Magento/blank</parent> <!-- the parent theme, if your theme inherits from an existing theme -->
    <media>
        <preview_image>media/preview.jpg</preview_image> <!-- path to your theme’s preview image -->
    </media>
</theme>

Conclusion

By following these steps, you can set up the basic structure for your custom Magento 2 theme. This foundation allows you to start developing and customizing your theme to fit your specific needs.

Further Assistance

If you have any questions or need additional help with theme development, please leave a comment below or contact support for further assistance.