Create Magento 2 module to display pop up in homepage.

Written By rameshkrr

Brief:This articles explains the magento 2 module creation with a quite example. A pop up will be shown in the homepage using module. Patience is the only tool to learn something new.

Note: Each and every line are explained below. Take some time to read everything.

Step 1: Creating required folders onto your module’s directory.

The below image represents the folder structure of our module.


Don’t get confused about the above image. You’ll get explanations below.

First of all, create a file named,


Copy and paste the code.


Create a folder named


And inside it create a folder.


We are going to create following folders inside

  • Block
  • etc
  • view

Make sure your folder structure is as accurate as the above image.

Step 2: Jump into Block folder codings.

Create a file Homee.php in Block folder.

Copy and paste the code.


namespace Home\Wall\Block;

class Homee extends \Magento\Framework\View\Element\Template 
       public function displayText(){
         return "Welcome Guest User";


The above PHP code says that “Hey Magento create a class named Homee and extend your default Template class into it”. And again says something like “Create a function with name displayText and return a string”. This string consists of a data like “Welcome Guest User.” At the end of this article, you’ll know why this class and function is created.

Step 3: Jump into etc folder codes

Create a folder named.


Copy and paste the code.

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Home_Wall" setup_version="1.0.0">


The above XML code says that this module has a name like Home_Wall and its version is 1.0.0.

Step 4: Jump Into view folder codes

Create a folder named


Copy and paste the code.

  • layout
  • templates

Inside layout folder create an XML named cms_index_index.xml .

Use the following code inside it.

<?xml version="1.0"?>
<page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<referenceContainer name="content">
<block class="Home\Wall\Block\Homee" template="Home_Wall::html/cms.phtml" cacheable="false" />


This XML code inside layout folder is a game changer. If you look below body tag you can see a tag named block. First, we created a Block folder and now we create a block tag inside XML file. This is because we calling the class Homee and assigning a template file called cms.phtml. Also, this page doesn’t use any cache. This code is what I’m talking about <block class="Home\Wall\Block\Homee" template="Home_Wall::cms.phtml" cacheable="false" />

Next, create a folder named


Inside template folder create a file named cms.phtml.

Copy and paste the code.

.modal-footer {
display: none;
#custom-popup-modal strong{

$text = $block->displayText();

echo "<div id='custom-popup-modal' style='display:block'>
<h1> $text,</h1>
<h2>Surf on thousands of offers.</h2>
<a href=''>Continue</a>

) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
modalClass: 'custom-popup-modal',


var popup = modal(options, $('#custom-popup-modal'));

$( document ).ready(function() {


Here we created a local variable $text. This variable contains some data like$block->displayText();

The $block is a default Magento’s global variable to call a block function into our templates. The displayText function we created in Homee class is called here and assigned to $text variable. This variable is  used like <h1> $text </h1>.

The script is used to show pop up.

Step 5: Deploying code into Magento

I hope you’ve heard about deploying. Just we are going to run two simple commands in a terminal in Magento’s root directory.

For Windows users:

Press shift key and right-click on Magento root directory. There you see options like open command prompt here

For Linux users:

Go to Magento root directory and right click to open terminal.

Paste Following codes in a terminal.

Code 1:

php bin/magento setup:upgrade

Code 2:

php bin/magento setup:static-content:deploy


These codes deploy your module into Magento. In other words, it creates a record with your module name Home_Wall in database table setup>module.

Now refresh your Magento home page you’ll see following output.


magento 2 xploiting

The source code is here you can download it for free.

Download Source Code

Note: Download the above zip, extract and rename Home-master to Home.



Leave a Reply

Your email address will not be published. Required fields are marked *