In Magento 2 if you are developing multiple modules under the same Namespace then should create a menu for all modules. So you can place all your modules setting or any URL under a single menu which will be your Namespace.
In this post, We will see how to add a custom module menu to the admin panel, how to add custom CSS to the admin panel, how to add system configuration and how to add menu icon in Magento 2.
First Let’s create module’s main files.
Start Module main files
Create Vky/Core/registration.php
<?php
/**
* @category Vky
* @package Vky_Core
* @author Vicky <viky.031290@gmail.com>
* @copyright Copyright © VKY All right reserved
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vky_Core',
__DIR__
);
Create Vky/Core/composer.json
{
"name": "vky/core",
"description": "Vky core module. It's purpose is to add menu and config placeholders",
"keywords": [
"core",
"installer",
"notifier",
"vky services",
"module manager",
],
"type": "magento2-module",
"version": "0.0.1",
"license": "OSL-3.0",
"autoload": {
"files": [ "registration.php" ],
"psr-4": {
"Vky\\Core\\": ""
}
}
}
Create Vky/Core/etc/module.xml
<?xml version="1.0"?>
<!--
/**
* @category Vky
* @package Vky_Core
* @author Vicky <viky.031290@gmail.com>
* @copyright Copyright © VKY All right reserved
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vky_Core" setup_version="0.0.1"/>
</config>
Required files for a simple module is now created.
End Module main files
Now let’s add the menu.
Start For menu
Create Vky/Core/etc/adminhtml/menu.xml
<?xml version="1.0"?>
<!--
/**
* @category Vky
* @package Vky_Core
* @author Vicky <viky.031290@gmail.com>
* @copyright Copyright © VKY All right reserved
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Vky_Core::vky"
title="Vky"
module="Vky_Core"
sortOrder="55"
resource="Vky_Core::vky"
/>
<add id="Vky_Core::general"
title="General"
module="Vky_Core"
sortOrder="5"
parent="Vky_Core::vky"
resource="Vky_Core::general"
/>
<add id="Vky_Core::extensions"
title="Extensions"
module="Vky_Core"
sortOrder="5"
parent="Vky_Core::vky"
resource="Vky_Core::extensions"
/>
<add id="Vky_Core::services"
title="Services"
module="Vky_Core"
sortOrder="0"
parent="Vky_Core::vky"
resource="Vky_Core::services"
/>
</menu>
</config>
End For menu
That was for the menu Now let add system configuration.
Start For Store->Configuration->Our Module
Create Vky/Core/etc/adminhtml/system.xml
<?xml version="1.0"?>
<!--
/**
* @category Vky
* @package Vky_Core
* @author Vicky <viky.031290@gmail.com>
* @copyright Copyright © VKY All right reserved
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="vky" sortOrder="297">
<label>Vky</label>
</tab>
<section id="vky_core" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0">
<class>separator-top</class>
<tab>vky</tab>
<label>Core</label>
<resource>Vky_Core::core_config</resource>
<group id="general" translate="label" type="text" sortOrder="250" showInDefault="1">
<label>General</label>
<field id="enabled" translate="label" type="select" sortOrder="1" showInDefault="1">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
</group>
</section>
</system>
</config>
End For Store->Configuration->Our Module
Start For menu icon
Add an icon image file at Vky/Core/view/adminhtml/web/images/vky_logo.png
Now We will need CSS to add this image
Start to add CSS in the head admin panel
Create Vky/Core/view/adminhtml/web/css/vky.less
.admin__menu .item-vky > a:before {
content: '' !important;
background: url(../images/vky_logo.png) no-repeat 50% 50%;
background-size: 35px auto;
height:40px !important;
}
Create Vky/Core/view/adminhtml/layout/default.xml
<?xml version="1.0"?>
<!--
/**
* @category Vky
* @package Vky_Core
* @author Vicky <viky.031290@gmail.com>
* @copyright Copyright © VKY All right reserved
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Vky_Core::css/vky.css"/>
</head>
</page>
End to add CSS in the head admin panel
End For menu icon
Now at the beginning of the post, I said you can place all your modules setting or any URL under a single menu which will be your Namespace.
We have Vky_Core module. And added in menu.
This module’s menu contains other menus like
– Vky
– General
– Extensions
– Services
And you will not able to sell all this menu because they don’t have any sub-menu. So if we create any module now we will add a menu for that under “Extensions”.
For example, you have created a new module Vky_Test. So all you need to do is open the menu.xml file of the Vky_Testmodule we will need to put below 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="Vky_Test::test" title="Test" module="Vky_Test" sortOrder="0" parent="Vky_Core::extensions" action="test/index" resource="Vky_Test::test"/>
</menu>
</config>
Here parent=”Vky_Core::extensions” is responsible to add our menu uder “Extensions”.
If you want to download full source code Click here to download Vky_Core Module
No Comments