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