In this article, we will create a custom theme in Magento 2. We cover a few things like Magento theme declaration, registration, applying it in the admin panel, creating directories for CSS, JavaScript, images, and fonts, etc.
Please follow the below steps to know how to create a custom theme in Magento 2.
Step 1: Magento theme directory
- Magento 2 themes are located in the /app/design/frontend folder. First, it’s necessary to create a Vendor folder and then create a theme folder inside of it.
- For example: /app/design/frontend/Dolphin/custom_theme.
Step 2: Magento theme declaration
- In order to define Magento themes, in the theme root folder you should create a theme .xml file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Dolphin Theme</title> <!-- your theme's name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.png</preview_image> <!-- the path to your theme's preview image --> </media> </theme> |
Note: Make sure you added preview.png file at app/design/frontend/Dolphin/custom_theme/media/ directory location.
Step 3: Magento theme registration
In order to register a theme in the system, in the theme folder you should create a registration.php file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :
| 1 2 3 4 5 6 7 8 9 | <?php /** * Created By : Dolphin Web Solution Pvt. Ltd. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Dolphin/custom_theme', __DIR__ ); |
Step 4: Apply the custom style for your custom theme
You can create a _extend.less file at app/design/frontend/Dolphin/custom_theme/web/css/source/ like as below code:
| 1 2 3 4 5 | & when (@media-common = true) { p { font-size: 16px; } } |
Your theme directory structure will look like below.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | app/design/frontend/<Vendor>/ ├── <theme>/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├─css/ │ │ │ ├─source/ │ │ │ ├─_extend.less │ │ │ │ │ ├─Fonts/ │ │ │ ├─font.ttf │ │ │ │ │ ├─images/ │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml |
Step 5: Now, Just run below Magento commands
| 1 2 3 4 5 | php bin/magento s:up php bin/magento s:s:d -f php bin/magento c:c |
Step 6: Applying theme in the admin panel
Now, check your theme is added to the theme list or not.
- Go to Admin -> Content -> Design -> Themes
To apply your custom theme :
- Go to Admin -> Content -> Design -> Configuration
That’s it!
I hope this technical blog will help you to find what you were looking for.
For more related to this blog is here:
That’s all, If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.
Bookmark it for your future reference. Do comment below if you have any other questions.
P.S. Do share this note with your team.
