Magento 2 Create Widget

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?” and “How to use them on Magento 2 store”. With the simple instruction, it is easy to custom new widgets in Magento 2.

What is the widget?

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.

How to create widget in Magento 2?

Overview of 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

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

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

insert widget

You will see the Blog posts in widget list


Enjoyed the tutorial? Spread it to your friends!


Comments for Magento 2 Create Widget

Please leave comments if you have any questions, feedbacks.

Module Development

You also may like these Magento 2 Extensions

One Step Checkout

10 reviews

Layered Navigation

12 reviews


no review

People also searched for:

  • create widget in magento 2
  • magento 2 create new widget
  • magento 2 create own widget
  • magento 2 create simple widget
  • magento 2 create slideshow widget
  • magento 2 create widget block reference
  • magento 2 create widget custom
  • magento 2 create widget programmatically
  • magento 2 create widget template
  • magento 2 create widget tutorial
  • magento 2 create widget type
  • magento 2 how to create widget
  • magento 2 jquery widget
  • magento 2 product list widget
  • magento 2 widget parameters
  • magento 2 widget template
  • magento 2 widget textarea
  • magento 2 widgets tutorial
  • custom widget