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 this simple instruction, it is easy to create and customize new custom widgets in Magento 2.

Table contents

• What is the widget in Magento 2
• How to create 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

What is the widget in Magento 2?

Firstly, we all will get to know the definition 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 static information or dynamic content to CMS pages or blocks. You can add widgets in any CMS block of Magento 2 to display such content or elements, for example:

• 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 a simple module. It’s hassle-free to create a Magento 2 widget because it is the same as when you create a HelloWorld excepting from some additional files. Hence, although you don’t have any experience in programming, it is easy to improve your storefront with the dynamic blocks of content.

Here are available default widgets:

• CMS Static Block
• CMS Page Link
• Recently Compared Products
• Recently Viewed Products
• Catalog Products List
• Catalog Product Link
• Catalog New Products List
• Catalog Category Link

With this guide below, you can create your own widget in Magento 2 easily and quickly.

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="http://www.w3.org/2001/XMLSchema-instance" 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>
		<description>Posts</description>
		<parameters>
			<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
				<label>Custom Posts Label</label>
			</parameter>
		</parameters>
	</widget>
</widgets>

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

<?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

• You should flush Magento cache, read this tutorial: Flush Magento cache
• Run a posts.

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

In Content tab, click on Insert Widget icon

You will see the Blog posts in widget list

Conclusion

Though it requires no high level of programming for the store admins to add features and interactive content to the website by widgets, they still need to understand how it works in Magento 2 to create a widget. This guide gets you through the process of utilizing widgets from the functionality standpoint to streamline your Magento 2 store. If you have any questions, let us know in the comment section. Thanks for reading