Disclaimer: Magenticians does not necessarily agree with the views expressed in this guest post. They are presented to bring to light all diverse views in the Magento and general ecommerce community.

Many developers are now developing modules for Magento 2, but what if a module doesn’t exactly fulfill your requirements as you need it to? Imagine a scenario where you could understand the structure of a Magento 2 module somewhat better, to the point that you could change it to suit your requirements. Or even better, that you may develop your own module. In this tutorial, we are going to show you the structure of Magento 2 module and share with you the coding of “Twitter Feed” Magento 2 module. The goal of this module is to show Twitter feeds of a specific Twitter account. This tutorial will give you a basic idea about the structure and creation of Magento 2 modules.

Before we begin!

We assume that you have Magento 2 installed and running either locally or on any development server where you can add, create or delete files and folders. Once your Magento is up and running, follow this step by step procedure to develop your own Magento 2 Module.

Step 1

We are going to create a module with Namespace Magenticians and Module name FeedModule. So first of all, go to your Magento 2 ROOT > app and create new folder code. This is the place where we are going to work on our Module.

Step 2

Create the following directories in order to complete the basic structure of our module:

• Create “Magenticians” folder in ROOT > app > code
• Create “FeedModule” folder in ROOT > app > code > Magenticians
• Create “Block” folder in ROOT > app > code > Magenticians > FeedModule
• Create “Controller” folder in ROOT > app > code > Magenticians > FeedModule
• Create “Index” folder in ROOT > app > code > Magenticians > FeedModule > Controller
• Create “etc” folder in ROOT > app > code > Magenticians > FeedModule
• Create “frontend” folder in ROOT > app > code > Magenticians > FeedModule > etc
• Create “View” folder in ROOT > app > code > Magenticians > FeedModule
• Create “frontend” folder in ROOT > app > code > Magenticians > FeedModule > View
• Create “layout” folder in ROOT > app > code > Magenticians > FeedModule > View > frontend
• Create “templates” folder in ROOT > app > code > Magenticians > FeedModule > View > frontend

Step 3

We are going to write the module.xml file to declare our module. We will create a module.xml file in the ROOT > app > code > Magenticians > FeedModule > etc directory with following code in it:

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

Step 4

Create registration.php file in ROOT > app > code > Magenticians > FeedModule directory and write following code snippet:

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

Step 5

Information about router of module’s front-end will be reported in routes.xml file which will be created in ROOT > app > code > Magenticians > FeedModule > etc > frontend:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="standard">
<route id="feedmodule" frontName="feedmodule">
<module name="Magenticians_FeedModule" />
</route>
</router>
</config>

The router ID shows which router to use (same as Magento 1). The route ID indicates which node magento should look at to find the URL’s front Name and the frontName is the first part of the URL which should always be unique.

Step 6

Create the file index.php in ROOT > app > code > Magenticians > FeedModule > Controller > Index. Index folder plays the role of module’s controller, index.php is an action and the execute() is the executive function of index.php which will be invoked when the action is called.

<?php 
namespace Magenticians\FeedModule\Controller\Index;
class Index extends \Magento\Framework\App\Action\Action 
{
    /** @var  \Magento\Framework\View\Result\Page */    protected $resultPageFactory;
    /**      * @param \Magento\Framework\App\Action\Context $context      */    public function __construct(\Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory)     
    {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
    /**
     * Blog Index, shows a list of recent blog posts.
     *
     * @return \Magento\Framework\View\Result\PageFactory
     */    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('OnePage Twitter Feed'));
        return $resultPage;
    }
}

Step 7

Creating layout file is really important and it will be named after the structure of module with the combination of RouterName_ControllerName_ActionName.xml. So in our case, create feedmodule_index_index.xml file in ROOT > app > code > Magenticians > FeedModule > View > frontend > layout directory.

<?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">
<body>
<referenceContainer name="content">
            <block class="Magenticians\FeedModule\Block\FeedModule" name="magenticians_feedmodule" template="feedmodule.phtml"></block>
        </referenceContainer>
    </body>
</page>

Step 8

We are now moving forward to create a block for our module. Create block file in ROOT > app > code > Magenticians > FeedModule > Block with name as FeedModule.php:

<?php
namespace Magenticians\FeedModule\Block;
class FeedModule extends \Magento\Framework\View\Element\Template
{
    public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }
}

Step 9

Now we will create a template file feedmodule.phtml as reported in the layout file. This file goes to ROOT > app > code > Magenticians > FeedModule > View > frontend > templates which includes the HTML code to call the twitter widget. You can change it accordingly by your own twitter account.

<div style="display:table;height:100%;width:100%;text-align:center;">
<div style="display:table-cell;vertical-align:middle;">
<!-- PASTE YOUR WIDGET CODE HERE-->
<a class="twitter-timeline" href="https://twitter.com/magenticians" data-widget-id="695189763914121216">Tweets by @Magenticians</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- PASTE YOUR WIDGET CODE HERE-->
</div>
</div>

Step 10

Finally, you need to activate your module, open app/etc/config.php and in the array ‘modules’, add the element: ‘Magenticians_FeedModule’ => 1, (make sure to put a comma at the end). Now run the following commands: php bin/magento cache:flush (Clearing Magento 2 Cache) php bin/magento setup:upgrade (Updating Magento Modules) Congratulations! You have successfully created your Magento 2 Module. When you will run your link like this, the result should be as followed: