---
title: "How to Create Custom Widget in Magento 2"
url: "https://dolphinwebsolution.com/how-to-create-custom-widget-in-magento-2"
date: "2021-07-17T06:13:19+05:30"
modified: "2023-08-24T09:37:50+05:30"
author:
  name: "Mahesh Makwana"
categories:
  - "Magento"
word_count: 536
reading_time: "3 min read"
summary: "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 admi..."
description: "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..."
keywords: "Create Custom Widget,Create Custom Widget in magento 2,magento 2 Create Custom Widget, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Integrating Power BI into Your E-Commerce Strategy"
    url: "https://dolphinwebsolution.com/blog/integrating-power-bi-into-your-e-commerce-strategy/"
  - title: "Disable the PageBuilder module for a specific field in Magento 2"
    url: "https://dolphinwebsolution.com/disable-the-pagebuilder-module-for-a-specific-field-in-magento-2"
  - title: "How to Fix Unique Constraint Violation Found in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-fix-unique-constraint-violation-found-in-magento-2"
---

# How to Create Custom Widget in Magento 2

_Published: July 17, 2021_  
_Author: Mahesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/How-to-create-widget-1024x512.png)

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](https://dolphinwebsolution.com/magento-2-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.](https://dolphinwebsolution.com/how-to-create-module-in-magento-2)
- **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.


---

_View the original post at: [https://dolphinwebsolution.com/how-to-create-custom-widget-in-magento-2](https://dolphinwebsolution.com/how-to-create-custom-widget-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:53:40 UTC_