How to Create a Custom Extension in Magento 2

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

Hello world extension on frontend
Hello world extension on Magento frontend.

Omar is a Digital Marketer and the founder of StartMarketing. He received his Master's degree from Queen's University, Belfast in 2017 and launched many successful web projects for clients since then. His expertise is in SEO, content management and social media marketing.

Leave a Comment