How to Create a Custom Extension in Magento 2

Magento has a modular architecture. Therefore, to add features or modify existing ones, you need to alter its core functionality using an extension.

In this article on how to create a custom extension in Magento 2, we’ll be making a basic “Hello world!” extension.

Prerequisites

Before we begin, make sure the following steps have been completed:

1. First, install the latest version of Magento 2 on your local system.
2. Change to developer mode using the following command:

   php bin/magento deploy:mode:set developer

3. Disable Magento cache from the admin panel by going to System > Cache Management, selecting the Cache Types, clicking on Action > Disable, and finally hitting the Submit button.
   You can also disable cache through CLI using the following command:

   php bin/magento cache:disable

Create the Module Folder

The first step is to create a folder to store the extension files. Create a code folder in the root folder of Magento 2.

mkdir -p app/code/Techobservatory/Helloworld/etc

The module name must use the VendorName_ModuleName naming convention. So in the above example, it’s Techobservatory_Helloworld.

Create the etc/module.xml File

Next, create an etc/module.xml file to define the module name and version.

We’ve already created the app/code/Techobservatory/Helloworld/etc. folder above. The next step is to create the app/code/Techobservatory/Helloworld/etc/module.xml file.

nano app/code/Techobservatory/Helloworld/etc/module.xml

Now insert the following code in the module.xml file:

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

Create the registration.php File

The registration.php file will direct Magento on how to locate the module.

Let’s create the registration.php file in the app/code/Techobservatory/HelloWorld folder by using the following code:

nano app/code/Techobservatory/HelloWorld/registration.php

Insert the following code in the registration.php file:

<?php

MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Techobservatory_Helloworld',
    __DIR__
);

Activate the Module

The “Hello world” module has now been created. Now it’s time to enable it by typing the following command:

php bin/magento setup:upgrade

Then verify it using:

php bin/magento module:status

The module should be listed in the “List of enabled modules” on your terminal screen.

Create Module Controller

The next step is to create a module controller to define the router. We’ll use the mkdir command.

mkdir -p app/code/Techobservatory/Helloworld/etc/frontend

Then, let’s create the routes.xml file in the above folder:

nano app/code/Techobservatory/Helloworld/etc/frontend/routes.xml

Add the following code in the app/code/Techobservatory/HelloWorld/etc/frontend/routes.xml file:

<?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="Techobservatory_Helloworld" />
        </route>
    </router>
</config>

Here we’re defining the frontend router, where the route id is “helloworld.” So the URL structure in Magento 2 will be as follows:

helloworld/index/index

“Helloworld” is the frontName and “index” is the controller_folder_name and controller_class_name.

The next step is to create an Index.php file in the app/code/Techobservatory/HelloWorld/Controller/Index/Index.php. First, we’ll create the Controller/Index directory:

mkdir -p app/code/Techobservatory/HelloWorld/Controller/Index

Then, we’ll create the Index.php controller file:

nano app/code/Techobservatory/HelloWorld/Controller/Index/Index.php

Add the following code in the Index.php controller file:

<?php

namespace TechobservatoryHelloworldControllerIndex;

use MagentoFrameworkAppActionContext;

class Index extends MagentoFrameworkAppActionAction
{
    protected $_resultPageFactory;

    public function __construct(Context $context, MagentoFrameworkViewResultPageFactory $resultPageFactory)
    {
        $this->_resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        return $resultPage;
    }
}

Create a Block File

We’ll now configure a block class getHelloWorldTxt() method. This method will return the “Hello world” string.

We’ll create an app/code/Techobservatory/Helloworld/Block folder and then add the Helloworld.php file in it:

mkdir -p app/code/Techobservatory/Helloworld/Block
nano app/code/Techobservatory/Helloworld/Block/Helloworld.php

To generate a block file in app/code/Techobservatory/HelloWorld/Block/HelloWorld.php file, insert the following code:

<?php
namespace TechobservatoryHelloworldBlock;

class Helloworld extends MagentoFrameworkViewElementTemplate
{
    public function getHelloWorldTxt()
    {
       return 'Hello world!';
    }
}

Create Layouts

The layout and template files in Magento 2 are placed inside the view folder, which has three subfolders called “adminhtml,” “base,” and “frontend.”

Here, we’ll be adding a layout file in the “frontend” subfolder.

Let’s add the app/code/Techobservatory/Helloworld/view/frontend/layout directory first and then add the helloworld_index_index.xml file to it.

mkdir -p app/code/Techobservatory/Helloworld/view/frontend/layout
nano app/code/Techobservatory/Helloworld/view/frontend/layout/helloworld_index_index.xml

Now add the following code in the helloworld_index_index.xml file:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
    <body>
        <referenceContainer name="content">
            <block class="TechobservatoryHelloworldBlockHelloworld" name="helloworld" template="helloworld.phtml" />
        </referenceContainer>
    </body>
</page>

Create Template

Similarly, create template file (helloworld.phtml) in the app/code/Techobservatory/Helloworld/view/frontend/templates folder:

mkdir -p app/code/Techobservatory/Helloworld/view/frontend/templates
nano app/code/Techobservatory/Helloworld/view/frontend/templates/helloworld.phtml

Add the following code in the helloworld.phtml file:

<h1><?php echo $this->getHelloWorldTxt(); ?></h1>

In this code, we’re calling the method by using the $this variable to reference our block class and return the string ‘Hello world!’.

Your Hello world extension is now complete. You should see the following output in the frontend:

https://YourURL/helloworld/index/index