How to develop a Magento module

Posted on Edited on Word count in article: 3.6k Reading time ≈ 3 mins.
A step-by-step guide to develop a Magento module.

How to develop a Magento module

How to develop a Magento module

In this article, we will learn how to develop a Magento module. We will create a simple module that will display a message on the frontend.

Step 1: Create the module directory

Create a directory for your module in the app/code directory of your Magento installation. For example, if your module is named MyModule, create the directory app/code/MyModule.

Step 2: Create the module configuration file

Create a file named module.xml in the app/code/MyModule/etc directory. This file will contain the configuration of your module.

1
2
3
4
<?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="MyModule" setup_version="1.0.0"/>
</config>

Step 3: Create the registration file

Create a file named registration.php in the app/code/MyModule directory. This file will register your module with Magento.

1
2
3
4
5
6
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'MyModule',
    __DIR__
);

Step 4: Create the module configuration file

Create a file named di.xml in the app/code/MyModule/etc directory. This file will contain the configuration of your module.

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\Template">
        <arguments>
            <argument name="data" xsi:type="array">
                <item name="my_module_message" xsi:type="string">Hello, world!</item>
            </argument>
        </arguments>
    </type>
</config>

Step 5: Create the block class

Create a file named Message.php in the app/code/MyModule/Block directory. This file will contain the block class that will display the message on the frontend.

1
2
3
4
5
6
7
8
9
10
<?php
namespace MyModule\Block;

class Message extends \Magento\Framework\View\Element\Template
{
    public function getMessage()
    {
        return $this->_getData('my_module_message');
    }
}

Step 6: Create the template file

Create a file named message.phtml in the app/code/MyModule/view/frontend/templates directory. This file will contain the template that will display the message on the frontend.

1
<p><?php echo $block->getMessage(); ?></p>

Step 7: Create the layout file

Create a file named default.xml in the app/code/MyModule/view/frontend/layout directory. This file will contain the layout configuration for your module.

1
2
3
4
5
6
7
8
<?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>
        <referenceContainer name="content">
            <block class="MyModule\Block\Message" name="my_module_message" template="MyModule::message.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 8: Enable the module

Run the following command to enable the module:

1
php bin/magento module:enable MyModule

Step 9: Register the module

Run the following command to register the module:

1
php bin/magento setup:upgrade

Step 10: Clear the cache

Run the following command to clear the cache:

1
php bin/magento cache:clean

Step 11: View the message

Visit your Magento store frontend to view the message displayed by your module.

That’s it! You have successfully developed a Magento module.

Happy coding!

References