
Creating an admin menu in Magento 2 involves several steps, including defining the menu items, setting up the necessary XML configuration files, and creating the required PHP classes. This article will walk you through the process of adding a custom admin menu to your Magento 2 store.
1. Create a Module
Before adding a menu item, you need to create a Magento 2 module. Here’s a quick overview of the steps to set up a basic module:
a. Create Directory Structure
app/code/AffinityReader/CustomMenu
b. Module Declaration
Create a module.xml
file in
app/code/AffinityReader/CustomMenu/etc/
with the following
content:
<?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="AffinityReader_CustomMenu" setup_version="1.0.0"/>
</config>
c. Registration
Create a registration.php
file in
app/code/AffinityReader/CustomMenu/
with the following content:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'AffinityReader_CustomMenu',
__DIR__
);
2. Define Admin Menu XML
To add a new menu item, you need to create an XML file to define it. Follow these steps:
a. Create Menu XML File
Create a menu.xml
file in
app/code/AffinityReader/CustomMenu/etc/adminhtml/
with the
following content:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Menu/etc/menu.xsd">
<menu>
<add id="AffinityReader_CustomMenu::menu_item"
title="Custom Menu"
module="AffinityReader_CustomMenu"
sortOrder="10"
parent="Magento_Backend::admin"
action="custommenu/index/index"
resource="AffinityReader_CustomMenu::menu_item"/>
</menu>
</config>
id
: The unique identifier for the menu item.-
title
: The name of the menu item as it will appear in the admin panel. module
: The module name to which the menu item belongs.sortOrder
: The order in which the menu item will appear.-
parent
: The ID of the parent menu item (useMagento_Backend::admin
for the main admin menu). -
action
: The controller action to which the menu item links. -
resource
: The ACL resource associated with this menu item.
3. Define ACL Resource
To control access to the menu item, define an ACL resource.
a. Create ACL XML File
Create an acl.xml
file in
app/code/AffinityReader/CustomMenu/etc/
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
<resources>
<all>
<title>All</title>
</all>
</resources>
<acl>
<resources>
<admin>
<title>Admin</title>
</admin>
</resources>
<permissions>
<admin>
<title>Admin</title>
<sortOrder>10</sortOrder>
</admin>
<adminhtml>
<title>Adminhtml</title>
</adminhtml>
</permissions>
<role>
<resource>AffinityReader_CustomMenu::menu_item</resource>
</role>
</acl>
</acl>
4. Create Controller and Action
Define a controller and action to handle the menu item’s request.
a. Create Controller
Create a Controller/Adminhtml/Index/Index.php
file in
app/code/AffinityReader/CustomMenu/
:
<?php
namespace AffinityReader\CustomMenu\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
{
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
return $this->resultPageFactory->create();
}
}
5. Create Layout and View Files
Define the layout and view files to display content when the menu item is selected.
a. Create Layout XML
Create a view/adminhtml/layout/custommenu_index_index.xml
file in
app/code/AffinityReader/CustomMenu/
with the following content:
<?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="content">
<block class="Magento\Framework\View\Element\Template" name="custom_menu_block" template="AffinityReader_CustomMenu::custom_menu.phtml"/>
</referenceBlock>
</body>
</page>
b. Create Template File
Create a view/adminhtml/templates/custom_menu.phtml
file in
app/code/AffinityReader/CustomMenu/
with the following content:
<h1>Custom Menu Page</h1>
<p>Welcome to your custom admin menu page.</p>
6. Upgrade and Test
Run the following commands to upgrade and test your module:
bin/magento setup:upgrade
bin/magento cache:clean
Log in to the Magento admin panel, and you should see your custom menu item under the main admin menu. Click on it to see the content rendered by your custom template.
Post a Comment