DIY Magento 2 Theme Guide on Creating a Magento Theme?

Magento 2 Themes

DIY Magento 2 Theme Guide on Creating a Magento Theme?

Themes can be referred to consistent outfits Magento stores wearing on. They bring comprehensive styles to the interface regarding to definite page layouts, templates, etc. Depending on your business, you need the theme that fits your site. This post will, according to your wish, hence, guide you on creating a Magento theme properly.

Take these 4+ steps of Creating a Magento theme

READ to KNOW >>> An Overview of Magento 2 Themes and How to Choose a Theme?

Step 1. Create theme folder

When creating a Magento theme, you need to go to: <your Magento 2 root directory> / app / design / frontend to create a folder first.

In the frontend folder, create a new folder under your theme provider: / app / design / frontend / Bss (I choose Bss for the theme provider) in your theme provider directory, create the folder For your Magento 2 theme: / app / design / frontend / Bss / NewTheme.

After creating this structure, you need to declare your theme to the Magento system know it exists and you can set your theme as the current theme in the Magento 2 backend.

Step 2. Declare your Magento 2 theme

Next, creating a Magento theme.xml file in app / design / frontend / Bss / NewTheme/ theme.xml 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> Bss 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. Create the registration.php file

Always remember when creating a Magento theme to register the theme.

You need to create the registration.php file in your theme directory: app/design/frontend/Bss/BssTheme/registration.php and use the following code in the registration.php:

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

Step 4. Create a composer for theme <composer.json>

Add the composer.json file to your theme directory: app / design / frontend / Bss / NewTheme/ composer.json to register the package on the packaging server.

{
   "name": "Bss/NewTheme",
   "description": "Developed by Bss Commerce",
   "require": {
       "php": "~5.6.0|~7.0.0|7.0.2|7.0.4|~7.0.6|~7.1.0",
      "magento/theme-frontend-luma": "~100.0",
       "magento/framework": "~100.0"
   },
   "type": "magento2-theme",
   "version": "1.0.0",
   "license": [
       "OSL-3.0",
       "AFL-3.0"
   ],
   "autoload": {
       "files": [
           "registration.php"
       ]
   }
}

4 Steps above are inevitable to create a new theme. You can skip step 5,6,7 if you do not need an image and logo for the theme.

Step 5. Create the <media> folder

Create a folder called “media” in the “NewTheme” folder and place a “preview.jpg” image inside it.

Step 6. Create the <web> directory in the “NewTheme” directory

Inside the web directory:

  • Create a directory “css”
  • Create the “images” folder to place the image. In this folder, I put an image “logo.png” inside => that is the Logo of the theme.
  • Create the “js” directory to contain all js files.

Step 7. Create a folder to connect to the theme layout <Magento_Theme>

  • Create the <layout> directory
  • Create the layout file <default.xml> in the “layout” folder.
  • You can check and copy the code below for the content of the file:
default.xml :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
<remove name="report.bugs"/>
</body>
</page>

Here is the structure for all the directories and files in the topic:

how-to-customize-magento
Structure

Get Ready to Install The New Theme

Now you know the way of creating a Magento theme, you will want to learn how to install Magento 2 theme.

Open your Magento 2 Admin panel and go to ContentConfiguration Now.

go-to-magento-2-theme
Content > Configuration

Click Edit as shown

design-configuration
Click Edit

Select Bss Theme from the dropdown and Save Configuration

design-magento-2-theme-per-store-view
Save Theme

Open the SSH terminal and go to your Magento 2 root directory. Now run these commands one by one:

php bin / magento setup: static-content: deploy –f
php bin / magento cache: flush

And you’re done!

Open the homepage, and you’ll see that your created theme has been installed successfully.

magento-2-new-theme

GET FREE options NOW >>> 61+ Magento 2 Themes Free & Premium To Kick Off Your Store.

Other Thoughts

Since you have known the methods of creating a Magento theme and installing it, choosing the right themes for your sites is another different story that you may also like to know next. Also, navigate to shopping at our website to get the “high-end & authentic fashion” solutions offered for your stores.

About BSS Commerce:

We are one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bring high-quality products and services to optimize our business effectively. Let us know about your problems. We are willing to support you every time.

Write A Comment

Name