How to Create Custom Widget in Magento 2

Written by Mahesh Makwana

Jul 17

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="" 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>
            <parameter name="posts" sort_order="10" visible="true" xsi:type="text">
                <label>Posts Label</label>
            <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>

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

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.

Written by Mahesh Makwana

Our Magento Store

Do not miss a chance to grab exciting offers on Magento Development at Dolphin Web Solution. We are providing discounts on various Magento services this season. Go and grab yours today at our Magento Store.

Multiple Wishlist for Magento 2

Multiple Wishlist for Magento 2

₹ 3106

Wallet and Reward Points for Magento 2

Wallet and Reward Points for Magento 2

₹ 9476

RMA for Magento 2

RMA for Magento 2

₹ 11865

₹ 14254
Abandoned Cart Email for Magento 2

Abandoned Cart Email for Magento 2

₹ 6291

Simple Details on Configurable Product for Magento 2

Simple Details on Configurable Product for Magento 2

₹ 7883

₹ 9476
Frequently Bought Together for Magento 2

Frequently Bought Together for Magento 2

₹ 5494

₹ 7087

Let's Start Your Project

Get free consultation for your digital product idea to turn it into reality!

Copyright © 2023 DOLPHIN WEB SOLUTION. All rights reserved.