How to create a Magento 2 extension

Happy to see you guys again!

In this blog post, we will learn how to create Magento 2 extension step by step and basic knowledge required to setup a module. we will also introduce the coding of Magento 2 in the form of a “Hello Developer” style. This blog post also includes some basic functionality, covering as many development aspects as possible in this case.

Lets consider module with Namespace is Hiddentechies and Module Name is HelloDeveloper. Lets list down all the files require for this extension.

– app/code/Hiddentechies/HelloDeveloper/registration.php
– app/code/Hiddentechies/HelloDeveloper/composer.json
– app/code/Hiddentechies/HelloDeveloper/etc/module.xml
– app/code/Hiddentechies/HelloDeveloper/etc/frontend/routes.xml
– app/code/Hiddentechies/HelloDeveloper/Controller/Index/index.php
– app/code/Hiddentechies/Helloworld/View/frontend/layout/hellodeveloper_index_index.xml
– app/code/Hiddentechies/HelloDeveloper/Block/HelloDeveloper.php
– app/code/Hiddentechies/HelloDeveloper/View/frontend/templates/hellodeveloper.phtml

First we will create registration file at app/code/Hiddentechies/HelloDeveloper/registration.php file

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

Now, create a composer.json file in app/code/Hiddentechies/HelloDeveloper/ folder as per below.

{
    "name": "Hiddentechies/hellodeveloper",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0"
    },
    "type": "magento2-module",
    "version": "1.0.2",
    "authors": [
        {
            "name": "Hiddentechies",
            "email": "[email protected]",
            "homepage": "https://www.Hiddentechies.com/",
            "role": "Developer"
        }
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Hiddentechies\\HelloDeveloper\\": ""
        }
    }
}

now create module.xml file in app/code/Hiddentechies/HelloDeveloper/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="Hiddentechies_HelloDeveloper" setup_version="1.0.0">
    </module>
</config>

Create a frontend router in app/code/Hiddentechies/HelloDeveloper/etc/frontend/routes.xml

<?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="hellodeveloper" frontName="hellodeveloper">
            <module name="Hiddentechies_HelloDeveloper" />
        </route>
    </router>
</config>

here the router ID shown which router we will use either frontend or adminhtml. Pay attention that the front name is the first part of the URL and it should be unique.

Create a Controller action

Create the file index.php in app/code/Hiddentechies/HelloDeveloper/Controller/Index.

<?php 
namespace Hiddentechies\HelloDeveloper\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(__('Hiddentechies HelloDeveloper'));
    	return $resultPage;
    }
}

Create a layout file at app\code\Hiddentechies\Helloworld\View\frontend\layout\hellodeveloper_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">
	<body>
		<referenceContainer name="content">
			<block class="Hiddentechies\HelloDeveloper\Block\HelloDeveloper" name="hiddentechies_hellodeveloper" template="hellodeveloper.phtml">
			</block>
		</referenceContainer>
	</body>
</page>

Create block file app/code/Hiddentechies/HelloDeveloper/Block/HelloDeveloper.php

<?php
namespace Hiddentechies\HelloDeveloper\Block;

class HelloDeveloper extends \Magento\Framework\View\Element\Template
{
	public function _prepareLayout()
	{
		return parent::_prepareLayout();
	}
}

Create a template file app/code/Hiddentechies/HelloDeveloper/View/frontend/templates/hellodeveloper.phtml

<h1 style="color:#f1703d"> Welcome to Hiddentechies Blog </h2>

Active Hiddentechies_HelloDeveloper extension

Open Command line in folder root of Magento and run commands

php bin/magento setup:upgrade

In order to cross check the routing and controller access below URL.
http://localhost/magento2/hellodeveloper/index/index

You have known all the steps to write a simple extension in Magento 2. if you have any questions about this steps of Magento 2 extension development, please ask them in comments.

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!

Related Read:  Top 10 B2B Magento 2 Extensions for 2020