How to Create Magento 2 Theme Development from Scratch

Themes are core components of any website that represents its aesthetic viability to visually appeal to visitors of that website. And for eCommerce platforms like Magento 2, it plays a crucial role to make appealing storefronts. There are several ways for Magento theme development from scratch. And with this Magento 2 theme development tutorial, we are going to cover the essential steps to develop a theme.

By default, Magento 2 has Luma and Blank theme. Luma is just for the demonstration whereas Blank is for Magento 2 custom theme development. You can use both Luma and Blank with default settings for your live store. But if you want to customize the designs as per your needs, then you should create a custom theme. Because Magento recommends not to change or edit default settings or designs as they will be overwritten during the version upgrade and it can break your store.

But how to create a custom theme in your Magento 2 store? Worry Not. Because this Magento 2 custom theme development tutorial elaborates on how you can create visually stunning custom Magento 2 themes. So, without further ado let’s get started.

What is Magento 2 Theme Development?

Magento theme development from scratch consists of various layouts, templates, and designs that contribute to the look and feel of the entire workplace i.g., storefront, or admin panel. Magento themes are designed to replace the existing view layers.

Magento developers know that a theme is a combination of:

• Layout– It is a bunch of basic XML files that define the structure of block for different pages. It also controls the META info and page encoding. It is located in app/design/frontend/your_interface/your_theme/layout/.
• Templates– They are PHTML files with XHTML markups and essential PHP tags to develop logic for visual presentation.
• Locale– It is a simple document folder with copies of content translations.
• Skins– It is a combo of block-specific JavaScript and CSS file as well as image files to complement XHTML.

Advantages of Magento 2 Theme Development:

The theme is providing certain benefits for Magento 2 like CMS such as:

• It offers support for HTML and CSS.
• It has a built-in LESS processor.
• It provides an asynchronous module to upload using Require JS without manual coding.
• It uses jQuery UI.
• It consumes the Magento UI library for a flexible rendering of UI.
• The responsiveness of the Magento theme offers the same look and feel of your website to users regardless of device, screen size, or operative platform.
• Custom Magento theme development will have improved security.
• The enhanced user experience of your Magento store.

Essential Steps for Magento 2 Theme Development from Scratch

We are going to create a sample theme from scratch in Magento 2. The following steps define the Magento theme development.

• Creation of Magento 2 theme folder
• Declaration of theme
• Developing composer package to distribute it
• Register the theme
• Creating statistic files and folders
• Configuring catalog product images
• Declaring theme logo
• Defining basic layout elements
• Broadcasting layout file types and conventions

Magento 2 Theme Development Process:

Below is the process for Magento 2 theme development from scratch.

Step-1: Create a Theme Directory

Create a Magento 2 theme directory in Magento 2 root directory/app/design/frontend. This directory will consist of your theme vendor e.g., app/design/frontend/mconnect. Now create a directory for your theme under your theme Vendor.

Step-2: Declare Your Theme

Create a theme.xml file or copy it from the default theme in your custom Magento theme development directory app/design/frontend/mconnect/m2theme to declare your theme.

Step-3: Make Theme into Composer Package

Default themes are packaged as a composer. Add a composer.json file in your theme directory to distribute your theme as a composer package.

Step-4: Register Your Magento 2 Theme

Add registration.php file in your theme directory to register your theme in the system.

Step-5: configure Product Catalog Images

The next step is to configure the product catalog and other images. And for that create an etc folder first in your theme directory, then copy the view.xml file from the etc folder of the parent or Blank Theme. This is essential because images in your theme may differ from the parent or default theme.

Step-6: Creating Directories for Static Files and Folders

Creating directories for static files and folders for JavaScript, styles, image, and fonts. Each should be stored in a separate subdirectory of your theme.

Step-7: Declare Theme Logo

Now you need to declare the logo of your theme. It depends upon whether your theme uses the parent theme or not. And if the logo does not follow the default naming convention, then declare your logo by adding a default.xml file in the layout folder of your theme directory.

Step-8: Basic Layout Elements

Blocks and containers are basic components of the Magento page design. So, define these basic elements for proper page structure.

Step-9: Layout File Types & Conventions

Override theme layouts by putting the layout file in /app/design/frontend/Magento/luma/Magento_Theme/layout/ default.xml. These will override mconnect/m2theme/Magento_Theme/layout/default.xml.

Files and Folder Structure

To make it more simple, we need to create a functional folder and files by following the given steps.

• Create a folder that consists of theme <vendor_theme> – create a folder with the name “Mconnect” as vendor_theme
• Develop a sample folder with files and functional folders <theme> – Develop a new folder inside the ‘Mconnect’ folder and name it ‘Sample’
• Define file theme <theme.xml>
• Create a registration file theme <registration.php>
• Develop a composer for theme <composer.json>
• Define <media> folder
• Create <web> folder
• Develop a folder to connect layout theme <Magento_Theme>

The resulting structure of all given folders and files in the theme would be:

• Mconnect Folder
• Sample folder
• Magento_Theme folder
  • Layout folder
  • + File default.xml
• Media folder
  • Image preview.jpg
• Web folder
  • CSS folder
  • js folder
  • images folder
  • + Image logo.png
• File composer.json
• File registration.php
• File theme.xml

Apply & Configure Custom Magento 2 Theme:

You must activate it in settings after theme creation in the file system. You should follow the given steps for theme configuration:

• The first thing you should do is to turn on the developer mode.
• To apply theme, go to Content > Design> Configuration. A design configuration page will appear containing the available scopes of configuration.
• Click edit for that configuration from the list pertaining to your store view.
• On the next page, select the newly created theme from the Applied Theme drop-down menu of the default theme tab.
• Next, click on save the configuration and clear the cache.
• To check the changes reload your storefront pages.

Checking Magento 2 Theme:

Navigate to Homepage or category page (Products list) and Product Detail page to test the theme display. You can also test the theme with actions like – Add to cart and Check out.

Conclusion:

We have discussed the main components in this Magento custom theme development tutorial. We also have talked about the structure of files and folders in the Magento 2 directory for theme creation.

It is advisable to use the Magento developers Team or Hire Magento Developers for outstanding and complex Magento 2 theme development.

M-Connect Media is enjoying the presence of talented Magento 2 theme development experts with prior experiences in many theme development projects. You can employ the team for the best results with quick turnarounds. Contact us for more information regarding Magento Custom Theme Development Service by our offshore development center.