How to Add Custom Phtml File in Magento 2 Admin

Want to add custom Phtml file in Magento 2 admin? Here’s how you can do that.

If you are a Magento developer working on custom development, you may often require to change the layout of the admin panel for adding new features and functionalities. In Magento 2, Phtml files are used by the web servers to generate dynamic HTML files based on the PHP scripts and serve them to the clients, i.e. store admins & customers. Therefore, in order to tweak anything that is displayed on the admin panel, we need to add a custom Phtml file in Magento 2 admin.

Earlier, one of my colleagues demonstrated a method to call a Phtml file in CMS static block in Magento 2. Today, I have come up with a method to insert a custom Phtml file in your Magento 2 admin panel through a module.

Method to Add Custom Phtml File in Magento 2 Admin

In order to add a custom Phtml file in Magento 2 admin layout, we’ll be using the module method.

• Step 1: First, we need to register a new module using the component registration class. Create app/code/Vendor/Module/registration.php file and add the following code (Feel free to replace the ‘Vendor_Module’ element):
  <?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__ );

  1 2 3 4 5 6 7 8 9

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

• Step 2: Now, add the basic information about the module by using the app/code/Vendor/Module/etc/module.xml with 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="Vendor_Module" setup_version="1.0.0"> </module> </config>

  1 2 3 4 5

  <?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="Vendor_Module" setup_version="1.0.0">     </module> </config>

• Step 3: Create app/code/Vendor/Module/etc/adminhtml/routes.xml and add the following code to define the routes:
  <?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="route" frontName="route"> <module name="Vendor_Module"/> </route> </router> </config>

  1 2 3 4 5 6 7 8

  <?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="route" frontName="route">             <module name="Vendor_Module"/>         </route>     </router> </config>

• Step 4: Add the following code to the app/code/Vendor/Module/Controller/Adminhtml/Index/AddRow.php file:
  <?php namespace Vendor\Module\Controller\Adminhtml\Index; use Magento\Backend\App\Action; use Magento\Framework\App\ResponseInterface; use Magento\Framework\Controller\ResultFactory; use Magento\Framework\Controller\ResultInterface; /** * Class AddRow */ class AddRow extends Action { /** * @return ResponseInterface|ResultInterface */ public function execute() { $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE); $title = __('Your Title'); $resultPage->getConfig()->getTitle()->prepend($title); return $resultPage; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  <?php   namespace Vendor\Module\Controller\Adminhtml\Index;   use Magento\Backend\App\Action; use Magento\Framework\App\ResponseInterface; use Magento\Framework\Controller\ResultFactory; use Magento\Framework\Controller\ResultInterface;   /** * Class AddRow */ class AddRow extends Action {     /**      * @return ResponseInterface|ResultInterface      */     public function execute()     {         $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);         $title = __('Your Title');         $resultPage->getConfig()->getTitle()->prepend($title);         return $resultPage;     } }

• Step 5: Create app/code/Vendor/Module/view/adminhtml/layout/route_index_addrow.xml with the following code:
  <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Vendor\Module\Block\Adminhtml\DisplayInfo" name="display_info" template="Vendor_Module::display_info.phtml" /> </referenceContainer> </body> </page>

  1 2 3 4 5 6 7 8 9

  <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column"       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">     <body>         <referenceContainer name="content">             <block class="Vendor\Module\Block\Adminhtml\DisplayInfo" name="display_info" template="Vendor_Module::display_info.phtml" />         </referenceContainer>     </body> </page>

• Step 6: Add your desired Phtml file to the app/code/Vendor/Module/Block/Adminhtml/ directory. In this example, the file name will be DisplayInfo.php with the following sample code:
  <?php namespace Vendor\Module\Block\Adminhtml; /** * Class DisplayInfo */ class DisplayInfo extends \Magento\Backend\Block\Template { }

  1 2 3 4 5 6 7 8

  <?php namespace Vendor\Module\Block\Adminhtml; /** * Class DisplayInfo   */ class DisplayInfo extends \Magento\Backend\Block\Template { }

• Step 7: Lastly, use the app/code/Vendor/Module/view/adminhtml/templates/display_info.phtml to call the custom Phtml file in Magento 2 admin.

That’s it..!

This is how you can use a custom Phtml file in Magento 2 to tweak the layout of the Magento 2 admin panel. I hope this detailed solution will help you insert custom Phtml in Magento 2 admin panel using the module.

In case you have any doubts or queries regarding the provided solution, feel free to comment. I’d be happy to help you. 😇

Also, do not forget to share this Magento solution with your developer friends via social media.

Thanks for reading. 🍀