How to Create a Custom Widget in Magento 2

Widget is a greater tool to insert or edit content into a CMS Page Block or Page, so I am so happy to bring you Create Widget in Magento 2 topic. Reading the post will help you understand: “What are the widgets in Magento 2?” and “How to use them on Magento 2 store”. With the simple instruction, it is easy to custom new widgets in Magento 2.

Table contents

What is the widget in Magento 2?

Firstly, we all will access the the of Widget in Magento 2.

Widgets are the powerful functionalities in Magento 2 configuration. As a store admin, you can take the advantage of the widget to improve the storefront under the lively interface. The widgets allow showing the static information or dynamic content marketing. I want to illustrate some of the implementations of Magento widgets such as:

  • Dynamic product data
  • Dynamic lists of the recently viewed products
  • Promotional banners
  • Interactive navigation elements and action blocks
  • Dynamic flash elements that are inserted in content pages

The customization of the widgets in Magento 2 is similar to an optimized front-end extension with the simple module. Is it easy to create Magento 2 widget? Absolutely yes for that, because that is same as when you create a helloworld excepting from some additional files. Hence, although you have any experience in technology, it is easy to improve your storefront by the dynamic block of content.

4 steps to creating a widget in Magento 2

  • Step 1: Declare widget
  • Step 2: Create a widget template file
  • Step 3: Create widget Block class
  • Step 4: Flush cache and posts

Step 1: Declare widget widget.xml

Create a file etc/widget.xml with the following content

<?xml version="1.0" ?>
<widgets xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
	<widget class="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_posts">
		<label>Blog Posts</label>
			<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
				<label>Custom Posts Label</label>

Step 2: Create a widget template file in Magento 2

File: view/frontend/templates/widget/posts.phtml

<?php if($block->getData('posts')): ?>
	<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
	<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>

Step 3: Create widget Block class

Create block file: Block/Widget/Posts.php

namespace Mageplaza\HelloWorld\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface; 
class Posts extends Template implements BlockInterface {

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


Step 4: Flush cache and posts

Go to admin panel > Content > Pages > Home page > Edit

In Content tab, click on Insert Widget icon

Magento 2 insert widget

You will see the Blog posts in widget list

magento 2 widgets

Related Post

Enjoyed the tutorial? Spread it to your friends!


Sam Thomas
Sam Thomas

CEO and Founder of Mageplaza. Pursueing a simple and healthy lifestyle. A friend, a husband and a dad of two children, a trainer and an influencer wannabe. He is a big fan of sports and travel, also.

People also searched for

  • magento 2 widget
  • magento 2 create widget
  • magento 2 create widget programmatically
  • magento 2 custom widget
  • magento 2 create custom widget
  • create widget magento 2
  • widget magento 2
  • how to create widget in magento 2
  • magento2 widget
  • create widget in magento 2
  • magento 2 add widget programmatically
  • magento 2 widget tutorial
  • magento 2 widget parameters
  • magento 2 custom widget product list
  • magento 2 widget.xml
  • widgets magento 2
  • magento 2 widget template
  • devdocs magento2
  • magento widgets
  • 2.2.x, 2.3.x, 2.4.x