>DIY Magento 2 Theme: How to Create One?

DIY Magento 2 Theme: How to Create One?

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 tutor you how to create a simple one in Magento 2 according to your wish, hence, guide you to install Magento 2 theme properly.

 

Take these 4+ steps to create Magento theme

Step 1. Create theme folder

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

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 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

Now you need to create the 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

To register your theme in the Magento system, 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 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 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

You will complete the task by this step. To install Magento 2 theme, open your Magento 2 Admin panel and go to ContentConfiguration Now.

how to install theme magento 2
Content > Configuration

Click Edit as shown

how to create magento theme
Click Edit

Select Bss Theme from the dropdown and Save Configuration

how to install new theme in magento
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.

how to install new theme in magento
Final outcome

Other thoughts

Since you have known how to create and install a Magento 2 theme, choosing the right themes for your sites is another different story that you may also like to know next. Visit this article to grab some professional clues and knowledge on theme’s designs and its technical relevancy (section 4), to pick out the best among the sea.

Finally, navigate to shopping at bssthemes.com to get the “high-end & authentic fashion” offered for your stores.