Our brands

How to Create Magento 2 Widget

Are you seeking the way of creating a widget in Magento 2? Today, we’ll guide you how to create a widget. Magento widget will allow the site administrator to insert admin contact information such as full name, age, gender. And you can create widget via Widget Instance or add in the editor section of CMS Page, Block. We’ll use some common field type in Magento 2 widgets such as text, dropdown.

I assume that you’ll familiar with the structure of the Magento 2 module. If you a new Magento2 developer and you have no experience with Magento2 module, you need to read the following tutorial http://www.venustheme.com/how-to-create-magento-2-module/. First, let’s see the main structure which we’ll need create to implement for our custom widget.

app/code/Ves/CustomWidget/etc/module.xml: It’s file setup our module
app/code/Ves/CustomWidget/etc/widget.xml: It’s a widget declaration file which is used to declare widget information and parameters.

File setup

First we need create the module setup file. Create file app/code/Ves/CustomWidget/etc/module.xml and paste the following contents in that file. We have used Ves as our module Vendor Name and CustomWidget as our module name.

<?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=”Ves_CustomWidget” setup_version=”1.0.0″>



Widget File

Create the widget file app/code/Ves/CustomWidget/etc/widget.xml with content

<?xml version=”1.0″ encoding=”UTF-8″?>

<widgets xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../Magento/Widget/etc/widget.xsd”>

<widget id=”ves_customwidget” class=”Ves\CustomWidget\Block\Widget\ContactInformations”>

<label translate=”true”>Contact Informations Widget</label>

<description>Widget in Magento2</description>


<parameter name=”fullname” xsi:type=”text”  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=”Ves\CustomWidget\Model\Config\Source\Gender” visible=”true” sort_order=”10″ >

<label translate=”true”>Gender</label>





The first code:

<widget id=”ves_customwidget” class=”Ves\CustomWidget\Block\Widget\ContactInformations”>

We declare our widget with the unique identification is ves_customwidget and the class attribute is used to map to widget file app/code/Ves/CustomCode/Block/Widget/ContactInformations.php

The field description will show some description, introduce about module when created.

We need declare all the option of module inside the field tag is parameters

The source_model attribute maps to the model file app/code/Ves/CustomWidget/Model/Config/Source/Gender.php, from where we’ll get our options for the drop-down

Next, let’s create the model file


namespace Ves\CustomWidget\Model\Config\Source;


class Gender implements \Magento\Framework\Option\ArrayInterface


   public function toOptionArray()


       return [

       [‘value’ => ‘mal’, ‘label’ => __(‘Male’)],

       [‘value’ => ‘female’, ‘label’ => __(‘Female’)]];



Next, let’s create the block file Ves\CustomWidget\Block\Widget\ContactInformations is declared above code. In this file, we assign custom template file inside _toHtml() method


namespace Ves\CustomWidget\Block\Widget;


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


public function _toHtml()





Finally, we’ll need create the template file Ves\CustomWidget\view\frontend\widget\contact_informations.phtml will shown all widget 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 clear all the caches from the backend of Magento or delete folder var/cache. After that, go to Admin > Content > Pages and add a new Page using Add New page button, then click the widget icon in Content Tab and you need fill information for all field. Save CMS page and go to the front end of page to check your widget.

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”

0 Comment

Leave a Comment

Your email address will not be published.

Do NOT follow this link or you will be banned from the site!