How to build Magento 2 Widgets?-Magento 2.3

You are seeking the way of creating Widgets in Magento 2?

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

  • File Setup/Our module
  • Widgets declaration file
  • Lets build the model file
  • Lets build the block file
  • build a temple file

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 Widget inside it.

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 widget instance or include in the editor part of CMS page->block. We will make use of common field types in Magento 2 widgets such as text and dropdown.

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

I guess that you’ll well-known about the structure of 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">

Widget 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 customwidget and the class feature is used to plot the widget file.
  • The field description will show some description, introduce about the module when created.
  • We need to state all the choice of component 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.

  Let’s 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')]];

lets build the block file


Which is declared above code? In this file, we assign 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()





Let’s build the template file


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 widget icon in content tab and you need to load all information for all field.
  • Save CMS page and go to the front end of page to ensure your widgets.

The above mentioned are some methods to build Magento 2 widgets. for more try our Magento tutorial with Magento 2 demo.

Last Update: October 22, 2019  

February 2, 2018   854   Nandini Ramachandran    CMS    
Total 2 Votes:

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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