How to build Magento 2 Widgets in a few steps?

Learn how to build Magento 2 widgets in a few steps with all information and parameters.

There are some methods that will help you to build Magento Widgets listed are:

  • File Setup/Our module
  • Build the model file
  • Widgets declaration file
  • Build the block file
  • build a temple file
Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!
             Get your free live demo now: Click here

In our previous tutorial, we have seen about how to use Magento 2 CMS(Content  Management System), Now we will go down in aspect with the Magento 2 inside it.

How to build Magento 2 Widgets in a few steps?

Magento 2 Widgets will permit the site admin to add admin contact information such as full name, age, gender…etc. moreover, you can create Magento 2 widget through the widget instance or include it in the editor part of the CMS page⇾block. We will make use of common field types in Magento 2 such as text and dropdown.

  1. File setup/Our module
  2. Widget declaration File
  3. Create the model file
  4. Create the block file
  5. create the template file

I guess that you’ll well-known about the structure of the Magento 2 module. So let’s start:

First, let’s see the key structure which we’ll need to execute for our customer Magento 2 widgets.


file setup for our module


a widget declaration file used to declare widgets information and parameters.

File setup/our module

First, we have to build a module setup file. Build a file


and paste the following contents in that file. We have used “webnexs” as our component retailer name and “customer widget” as our component name.

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

Widgets to get Magento 2 declaration file

Build the widget file


with content.

<?xml version="1.0" encoding="UTF-8"?>

<widgets xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../Magento/Widget/etc/widget.xsd">
 <widget id="Webnexs_customwidget" class="Webnexs\CustomWidget\Block\Widget\ContactInformations">
 <label translate="true">Contact Informations Widget</label>
 <description>Widget in Magento2</description>
 <parameter name="fullname" xsi:type="te" visible="true" sort_order="0" >
 <label translate="true">Full Name</label>
 <parameter name="age" xsi:type="text" visible="true" sort_order="10" >
 <label translate="true">Age</label>
 <parameter name="gender" xsi:type="select" source_model="Webnexs\CustomWidget\Model\Config\Source\Gender" visible="true" sort_order="10" >
 <label translate="true">Gender</label>

First code:

  • Declare our widget with our only one of its kind identification is webnexs custom widget and the class feature is used to plot the widget file.
  • The field description will show some description, introduce the module when created.
  • We need to state all the choices of components inside the field label “parameters”.
  • And the source model element plot to the model file
  • app/code/Webnexs/CustomWidget/Model/Config/Source/Gender.php
  • where we will get our choice for the drop-down.
Top-notch high performing Magento eCommerce store is here!!! 

Build the model file

namespace Webnexs\CustomWidget\Model\Config\Source;

class Gender implements \Magento\Framework\Option\ArrayInterface
 public function toOptionArray()
 return [
 ['value' => 'mal', 'label' => __('Male')],
 ['value' => 'female', 'label' => __('Female')]];

Develop the block file


Which is declared above code? In this file, we assign a custom template file inside _toHtml() method.


namespace Webnexs\CustomWidget\Block\Widget;


class ContactInformations extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface


public function _toHtml()





Develop the template file for Magento 2 widgets


Which will illustrate all the widgets’ data on-site?


$fullname = $this->getData('fullname');

$age = $this->getData('age');

$gender = $this->getData('gender');



<?php if($fullname){ ?>

<li><?php echo $fullname ?></li>

<?php } ?>

<?php if($age){ ?>

<li><?php echo $age ?></li>

<?php } ?>

<?php if($gender){ ?>


<?php if($gender){

echo __('Male')


echo __('Female');

} ?>


<?php } ?>

  • Now, you need to clear all the caches from the backend of Magento or delete a folder var/cache.
  • Then, go to admin page→content-> pages and attach new page using attach new page button. Then click the widget icon in the content tab, and you need to load all information for all fields.
  • Save the CMS page and go to the front end of the page to ensure your widgets.

The above-mentioned are some methods to build Magento 2 widgets. For more try out the Magento tutorial with Magento 2 demo.

Build Magento 2 Widgets for store






Leave a Reply

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