Create Custom Widget type in Magento 2

Today i am explaining how to create custom widget type in Magento 2.

To create widget firstly need to create widget.xml in app/code/Namespace/Module/etc/ folder.

<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Magento/Widget/etc/widget.xsd">
    <widget id="wk_customwidget" class="Webkul\CustomWidget\Block\CustomWidget">
        <label translate="true">Custom Widget</label>
        <description>Widget for example</description>
        <parameters>
			<parameter name="test_desc" xsi:type="text" required="true" visible="true" sort_order="0" >
				<label translate="true">Description</label>
                <description>Text type option</description>
			</parameter>
            <parameter name="test_select" xsi:type="select" required="true" source_model="Webkul\CustomWidget\Model\Config\Source\Select" visible="true" sort_order="8" >
				<label translate="true">Select option</label>
                <description>Select type option</description>
			</parameter>
        </parameters>
    </widget>
</widgets>

Here, Widget id: wk_customwidget, you can defined as per your choice.

Class attribute: in this you need to add a block class which uses in your widget.

label and description tags for the widget explanation.

Searching for an experienced
Magento 2 Company ? Find out More

In the parameter tag we added 2 type of fields:

1: text type, you can add text values.

2: select type: to select option values, for this you need to define values in model.

Model file for the select options at path: Webkul\CustomWidget\Model\Config\Source\Select.php

will have code like:

<?php

namespace Webkul\CustomWidget\Model\Config\Source;

class Select implements \Magento\Framework\Option\ArrayInterface
{
    public function toOptionArray()
    {
        return [
            ['value' => 'yes', 'label' => __('Yes')],
            ['value' => 'no', 'label' => __('No')]
        ];
    }
}

By this code, there are two option will appear with Yes and No values.

Now Create block which is defined in widget.xml

Block file at path Webkul\CustomWidget\Block\CustomWidget.php

<?php

namespace Webkul\CustomWidget\Block;

use Magento\Framework\View\Element\Template;
use Magento\Framework\App\Config\ScopeConfigInterface;

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

    /**
     * construct description
     * @param MagentoFrameworkViewElementTemplateContext $context
     * $data[]
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * construct function
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('custom_widget.phtml');
    }

    public function getDescription()
    {
        $desc = $this->getData('test_desc');
        //it will return your description which is added in your widget
    }

    public function getSelectValue()
    {
        return $this->getData('test_select');
        //will return select option value
    }
}

Here, you can set your custom template in $this->setTemplate() function.

In block i created two functions to get values which i added at time of adding widget.

After these files, you will get a new widget type with custom fields.