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
Table of Contents
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:
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 Content → Configuration Now.
Content > Configuration
Click Edit as shown
Click Edit
Select Bss Theme from the dropdown and Save Configuration
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.
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.
