How to Create Custom Module in Magento 2

How to Create Custom Module in Magento 2

In this article, I will explain to you how to create custom module in magento 2. Modules in Magento 2 store is basically structural element.

Follow the below steps:

  1. Create module folder
  2. Create registration.php
  3. Create etc/module.xml file
  4. Create etc/frontend/routes.xml
  5. Create controller
  6. Create template file

You may also like this article:

  1. Theme Concept in Magento 2
  2. Add and Customize Custom Tab on Product Page Magento 2

Step 1: Create module folder

In Magento 2, we can store the new module folder in two ways. The first one is app/code/ directory and the second one is vendor/ directory. I will create with the first one i.e., app/code/.

Now create your folder:

app/code/<vendor_name>/<module_name>

where, <vendor_name> is name of the vendor. In my case vendor name is Aryan.

<module_name> is name of module. In my case it is HelloWorld.

My folder structure is:

app/code/Aryan/HelloWorld/

app/code/
├── Aryan/
│ │ ├──HelloWorld/
│ │ │

Step 2: Create registration.php

The registration.php file is required to register our new module to the Magento system. After successful registration of the module, you can see it in app/etc/config.php file.

Here, I will add registration.php file under app/code/Aryan/HelloWorld/

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

Step 3: Create etc/module.xml file

Here, I will add module.xml file under app/code/Aryan/HelloWorld/etc/

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Aryan_HelloWorld" setup_version="1.0.0" active="true">
    </module>
</config>

Step 4: Create etc/frontend/routes.xml

Here, I will create routes.xml under app/code/Aryan/HelloWorld/etc/frontend/

<?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="standard">
  <route id="helloworld" frontName="helloworld">
   <module name="Aryan_HelloWorld" />
  </route>
 </router>
</config>

Step 5: Create a controller

Here, I will create the controller folder and controller class.

  1. Create Controller folder under app/code/Aryan/HelloWorld/
  2. Create Controller name, in my case, I put controller name as Index. Create Index folder under app/code/Aryan/HelloWorld/Controller/.
  3. Create Controller class Index.php under app/code/Aryan/HelloWorld/Controller/Index

Content of Index.php

<?php
namespace Aryan\HelloWorld\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $pageFactory)
    {
        $this->_pageFactory = $pageFactory;
        return parent::__construct($context);
    }
public function execute()
    {
        return $this->_pageFactory->create();
    }
}

Step 6: Create template file

Now, it is time to create view folder which is responsible for rendering the content on frontend. This folder contains layout, templates, and web as a subfolder. All layout handle goes under the layout folder, all template file goes under the templates folder, and static files like CSS/LESS, images, js, etc. goes under the web folder.

1. Create a layout handle for our module

I will create helloworld_index_index.xml under app/code/Aryan/HelloWorld/view/frontend/layout

Here,

helloworld is the front name that we declare in app/code/Aryan/HelloWorld/etc/frontend/routes.xml

first index is controller name which is under app/code/Aryan/HelloWorld/Controller/

Second index is class name that is under app/code/Aryan/HelloWorld/Controller/Index.

Content for helloworld_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="helloworld.display" template="Aryan_HelloWorld::sayhello.phtml" />
    </referenceContainer>
</page>

2. Create template file

I will create sayhello.phtml under app/code/Aryan/HelloWorld/view/frontend/templates/

<h2>
    <?= __('Hello World')  ?>
</h2>
<p>
    <?= __('Lorem ipsum dolor sit, amet consectetur adipisicing elit.')  ?>
</p>

Now,

Need to execute the command:

$ php bin/magento setup:upgrade
$ php bin/magento setup:static-content:deploy -f 
$ php bin/magento cache:flush

Now, we have successfully created a new module in Magento.

Hope this article helped you to create a custom module. If you have any queries, you can ask me directly over email at aryansrivastavadesssigner@gmail.com or contact me here.

If you like this article, you can buy me a cup of coffee Buy me a Coffee.

Free Download Source Code :

About Aryan Srivastava

I’m a Passionate Magento 2 Frontend Developer. I have 2.5+ years of experience in Frontend. I cherish taking up complex problems and turning them into the best layout in the easiest and proper way. I love to work on Magento 2 e-Commerce Solutions.

View all posts by Aryan Srivastava →

Leave a Reply

Your email address will not be published. Required fields are marked *