---
title: "How to Create a Widget Programmatically in Magento 2"
url: "https://magecomp.com/blog/create-widget-programmatically-magento-2/"
date: "2022-04-29T15:03:42+00:00"
modified: "2025-02-17T07:00:58+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 389
reading_time: "2 min read"
summary: "Hello Magento Friends,"
description: "Widgets improve the storefront performance and enhance the user experience. Learn How to Create a Widget Programmatically in Magento 2."
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Implement Queue in Laravel 8?"
    url: "https://magecomp.com/blog/implement-queue-laravel-8/"
  - title: "Magento 2: How to Get Custom Column Value of Shipment using GraphQL"
    url: "https://magecomp.com/blog/magento-2-get-custom-column-value-of-shipment-using-graphql/"
  - title: "How to fix an error while uploading a logo from admin in Latest Magento 2.2.4"
    url: "https://magecomp.com/blog/fix-error-uploading-logo-admin-latest-magento-2-2-4/"
---

# How to Create a Widget Programmatically in Magento 2

_Published: April 29, 2022_  
_Author: Dhiren Vasoya_  

![How to Create a Widget Programmatically in Magento 2](https://magecomp.com/blog/wp-content/uploads/2022/04/How-to-Create-a-Widget-Programmatically-in-Magento-2-1024x512.webp)

**Hello Magento Friends,**

In today’s blog, we will learn about How to Create a Widget Programmatically in Magento 2.
[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-4.webp)](https://magecomp.com/services/hyva-theme-development/)

Widgets are components that can be added to any CMS block in Magento 2. Widgets are used to add static or dynamic content to CMS blocks or CMS pages. Widgets can improve the user interface on the storefront. Widgets can help to simplify the browsing of stores for the users.
So let’s look at How to Create Widget Programmatically in Magento 2.
## Steps to Create a Widget Programmatically in Magento 2:
**Step 1:** To declare a custom widget create the **widget.xml** file at the below path
**app\code\Vendor\Extention\etc\widget.xml**

Now, add the below code
```
<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:extention:Magento_Widget:etc/widget.xsd">
   <widget class="VendorExtentionBlockCustomwidget" id="customwidget">
	<label>Custom Widget</label>
	<description>Creating Custom Widget</description>
	<parameters>
		<parameter name="customwidgettext" sort_order="10" visible="true" xsi:type="text">
			<label>Enter Custom text</label>
		</parameter>
	</parameters>
   </widget>
</widgets>
```

Parameters allow adding of different fields to the widget.
**Step 2:** Now, create a PHP file inside the Block. Go to below path
**app\code\Vendor\Extention\Block\Customwidget.php**

And add the code as follows
```
<?php

namespace VendorExtentionBlock;

use MagentoFrameworkViewElementTemplate;
use MagentoWidgetBlockBlockInterface;

class Customwidget extends Template implements BlockInterface
{
	protected $template = "customwidget.phtml";
}
```

[![Hire Magento Programmer](https://magecomp.com/blog/wp-content/uploads/2025/02/Hire-Magento-Programmer-CTA-4.webp)](https://magecomp.com/services/hire-magento-programmer/)

**Step 3:** Now create a phtml file, that will show the data of phtml to the frontend. Navigate to the following path
**app\code\Vendor\Extention\view\frontend\templates\customwidget.phtml**

Add the following code
```
   <p>This will show the custom text field data inside widget : </p>
   <?php echo $block->getData(‘customwidgettext’);?>```

## Conclusion:
This way you can create a widget programmatically in Magento 2. You can also [**Insert a Widget into Sidebar in Magento 2**](https://magecomp.com/blog/insert-a-widget-into-sidebar-magento-2/). If you have any doubts, let me know through the comment section.
Share the article and let your friends learn about creating a widget in Magento 2.
[![Magento version upgrade](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Version-Upgrade-CTA-3.webp)](https://magecomp.com/services/magento-upgrade-services/)

Keep connected with us for more!
**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/create-widget-programmatically-magento-2/](https://magecomp.com/blog/create-widget-programmatically-magento-2/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-09-26 15:49:51 UTC_