How to Create Custom Widget in Magento 2

We learn how to create custom widget in Magento 2. We know that the widget is a powerful feature in Magento 2. We can call a widget from anywhere on the site. Widget is managed via the Magento administrator panel. In Widget, we can add dynamic or static content to any pages of the website. Magento 2 provides many widgets by default.

In Module or theme development many times we need to create custom widgets. Custom widget also works like default widget. In custom widget we can create custom features for magento administrators to manage static or dynamic content.

Now follow below steps to create custom widget:

First We create a basic module if you don’t know then click here.

• Step-1: Create widget.xml at app/code/Dolphin/CustomWidget/etc

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:widget:Magento_Widget:etc/widget.xsd">
    <widget class="Dolphin\CustomWidget\Block\Widget\Posts" id="dolphin_custom_widget_posts">
        <label>Custom Posts</label>
        <description>Posts</description>
        <parameters>
            <parameter name="posts" sort_order="10" visible="true" xsi:type="text">
                <label>Posts Label</label>
            </parameter>
            <parameter name="publish" sort_order="20" xsi:type="select" visible="true" source_model="Magento\Config\Model\Config\Source\Yesno">
                <label translate="true">Publish Status</label>
            </parameter>
        </parameters>
    </widget>
</widgets>

Here parameter field types are must be text, select, multiselect, block. This file is the main file that controls a custom widget. And also we add one block file which are provide to create custom functions.

• Step-2: Create Posts.php at app/code/Dolphin/CustomWidget/Block/Widget

<?php

namespace Dolphin\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Posts extends Template implements BlockInterface {

    protected $_template = "widget/posts.phtml";

    public function getFunData()
    {
        return "Function Call";
    }
}

In above file, we define template file in $_template variable which belongs to show content on Frontend side. Here we can also define function we used in a widget template file.

• Step-3: Create posts.phtml at app/code/Dolphin/CustomWidget/view/frontend/templates/widget

<h1>Hello Custom Widget </h1>
<h2 class='posts'>Post: <?= /* @noEscape */ $block->getData('posts') ?></h2>
<h2 class='posts-status'>Status: <?= /* @noEscape */ $block->getData('publish') ?></h2>
<h2 ><?= /* @noEscape */ $block->getFunData() ?></h2>
<p>This is a simple custom widget</p>

• So you after creating above files Please run magento commands

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

Now go to the Magento admin panel Content -> Widgets -> Add Widget, after you can see your custom widget name in Type option list. You can also call it in the block section. Make sure to run PHP bin/magento cache:clean command after adding any widget.

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Mahesh Makwana

Author