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 :

[wpdm_package id=’293′]