Bookmark

How to Implement a Custom Admin Menu in Magento 2

How to Implement a Custom Admin Menu in Magento 2

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 (use Magento_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

Post a Comment