Our brands

[ NEW UPDATE] How To Create A Simple Module In Magento 2 | Latest Magento 2 Release

create magento 2 module

As you may know, we have just released Magento 2 Brand module a few days ago. This is our first module upgraded from Magento 1.9.x to Magento 2. You can find more detail, features of Brand Magento2: http://www.venustheme.com/theme/ves-brand-2-0/. Today, we will guide you how to create a simple magento 2 module step by step. Although, it is a details guide with all necessary steps to create module in Magento, that’s worthy for reading

Before creating the module, it’s necessary to understand the differences in directory structure between the two versions of Magento. In Magento 2 directory structure, code pools are removed from the code-base file structure. Now all the modules are grouped by vendor. Hence, We can create modules right inside the app/code directory.

I. Differences between Magento1.0 and Magento2.0

In Magento2 there is a drastic change in structure of the code. To understand how to create a module in Magento2, we list the differences between these two versions of magento as bellow:

magento 2 structure of the code

Create a simple module in Magento2

We create module with Namespace is Ves and Module Name is HelloWorld

Step1: we need create a module.xml file in app/code/Ves/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=”Ves_HelloWorld” setup_version=”1.0.0″>

Step2: Create app/code/Ves/HelloWorld/registration.php file



Step3: Create a frontend router in app/code/Ves/HelloWorld/etc/frontend/routes.xml

<?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=”Ves_HelloWorld”/>

The first section of the route string indicates which node Magento should look at to find the URL’s front Name

Then, the router ID shown which router we will use: frontend or adminhtml(the same like in Magento1). Pay attention that the front name is the first part of the URL and it should be unique.

Step4: Create a Controller action

Create the file index.php in app/code/Ves/HelloWorld/Controller/Index. This will map to http://localhost/magento2/helloworld/index/index

helloworld: front name
index: name of controller folder
index: name of action file – index.php

Each action is its own class extending \Magento\Framework\App\Action\Action. In every action file, there will be a method name excute() that will involked when the action is called

namespace Ves\HelloWorld\Controller;

class Index extends \Magento\Framework\App\Action\Action
* @var \Magento\Framework\View\Result\PageFactory
protected $resultPageFactory;

public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;

* 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(__(‘Ves HelloWorld’));
return $resultPage;


Step5:Create a layout file in the following directory app\code\Ves\Helloworld\view\frontend\layout\helloworld_index_index.xml

<?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”>
<referenceContainer name=”content”>
<block class=”Ves\HelloWorld\\Block/HelloWorld” name=”ves.helloworld” template=”helloworld.phtml”/>

Step6: Lets create a block for our module. Create block file app/code/Ves/HelloWorld/Block/HelloWorld.php

namespace Ves\Helloworld\Block;

class HelloWorld extends \Magento\Framework\View\Element\Template


Step7: Create a template file app/code/Ves/HelloWorld/view/frontend/templates/helloworld.phtml

<h1 style=”color: #f1703d;”>Welcome to Magento 2</h1>

Step 8: Active Ves_HelloWorld extension

We have two ways to active Ves_Helloworld extension:

1. Directly edit file app/etc/config.php: In the array module, add the element: ‘Ves_Helloworld’ => 1


2. Open Command line in folder root of magento and run commands
php bin/magento setup:upgrade


You have known all the steps to write a simple module in Magento2. When you run the link:

http://localhost/magento2/helloworld/index/index, the result will be shown as the following

Magento 2 Extensions are created as an example

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”


  1. Avatar
    dzung December 17, 2015 at 1:57 pm - Reply

    I don’t see ‘code’ folder in ‘app’ .
    Do I have to manually create this folder.
    In ‘app’ directory, i see ‘design’ and ‘etc’ folder only.


  2. Avatar
    Rahul Anand December 31, 2015 at 1:31 pm - Reply

    Nice tutorial. Good to start.

  3. Avatar
    ram January 7, 2016 at 6:41 pm - Reply


    i have got following error when i running this module….

    Fatal error: Declaration of Ves\HelloWorld\Controller\Index\Index::execute() must be compatible with Magento\Framework\App\ActionInterface::execute(Magento\Framework\App\RequestInterface $request) in D:\Xampp\htdocs\magento2dev\app\code\Ves\HelloWorld\Controller\Index\Index.php on line 25

    can u provide solution for this issue that will be very helpful…thanks for your great tutorial…..

Leave a Comment

Your email address will not be published.

Do NOT follow this link or you will be banned from the site!