How To Create Simple Module To Configure Options For Theme In Magento 2

In this article, we will introduce you to How to create simple module to configure options for theme in Magento 2.

I think you should read the first article: How To Create New Theme In Magento 2 in the series. It will help you understand the basics of Theme in Magento 2.

You can also view the previous article: Customize Cover, Illustration Layout In Magento 2.

We’ll build module file structure looks as follows:

app/code/Magetop/
  ├── Themes/
  │   ├── etc/
  │   │     ├── adminhtml/
  │   │     │   ├── menu.xml
  │   │     │   ├── routes.xml
  │   │     │   ├── system.xml
  │   │     ├── module.xml
  │   ├── composer.json
  │   ├── registration.php

<vendor_name> is module vendor. ex: Magetop

<module_name> is module name. ex: themes

Create a simple module

Declaration of module: Create file app/code/<vendor_name>/<module_name>/etc/module.xml then insert the following code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magetop_Themes" setup_version="1.0"/>
</config>

Developing composer package to distribute it: Create file app/code/<vendor_name>/<module_name>/composer.json then insert the following code.

{
     "name": "magetop/module-themes",
     "description": "N/A",
     "require": {
         "php": "~7.1.3||~7.2.0",
         "magento/framework": "102.0.",
         "lib-libxml": ""
     }
     "type": "magento2-module",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
     ],
     "autoload": {
         "files": [
             "registration.php"
         ],
         "psr-4": {
             "Magetop\Themes\": ""
         }
     },
     "version": "103.0.0"
 }

Register the module: Create file app/code/<vendor_name>/<module_name>/registration.php then insert the following code.

<?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Magetop_Themes', __DIR__);

Make configure options for theme

Make admin route: Create file app/code/<vendor_name>/<module_name>/etc/adminhtml/routes.xml then insert the following code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="themes" frontName="themes">
            <module name="Magetop_Themes"/>
        </route>
    </router>
</config>

Make admin menu

Magetop Themes Configuration

Create file app/code/<vendor_name>/<module_name>/etc/adminhtml/menu.xml then insert the following code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Magetop_Themes::themes" title="Magetop Themes" module="Magetop_Themes" sortOrder="20" resource="Magetop_Themes::themes"/>
        <add id="Magetop_Themes::themes_config" title="Configuration" module="Magetop_Themes" sortOrder="10" parent="Magetop_Themes::themes" action="adminhtml/system_config/edit/section/themes" resource="Magetop_Themes::configuration"/>
    </menu>
</config>

Make configure options

Make configure opitons in general

You create file: app/code/<vendor_name>/<module_name>/etc/adminhtml/system.xml then insert the following code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="magetop" translate="label" sortOrder="110">
            <label>Magetop Extensions</label>
        </tab>
        <section id="themes" translate="label" type="text" sortOrder="9" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Themes Option</label>
            <tab>magetop</tab>
            <resource>Magetop_Themes::configuration</resource>
            <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="wellcome_text" translate="label comment" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Wellcome text</label>
                </field>
                <field id="enable_topbanner" translate="label" type="select" sortOrder="2"  showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable top banner for all page</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="background_image" translate="label comment" type="image" sortOrder="3"  showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Banner background Image:</label>
                    <comment>Allowed file types: jpg, jpeg, gif, png.</comment>
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <upload_dir config="system/filesystem/media" scope_info="1">themes</upload_dir>
                    <base_url type="media" scope_info="1">themes</base_url>
                </field>              
            </group>
        </section>       
    </system>
</config>

Now, open command prompt and change directory to your Magento installation directory.

Run the following command in command prompt:

php bin/magento setup:upgrade

php bin/magento cache:clean

Then go to backend refresh cache to see your changes applied. Good luck!

This is How to create simple module to configure options for theme in Magento 2.

You can see the next post: How To Get Store Config Value In Magento 2.

Follow us for more helpful tutorial!

We hope this is useful blog for you.

Thank you for reading!

5 1 vote
Article Rating

Adam Roger

CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.

Leave a Reply or put your Question here

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x