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.

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

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


Magento 2 extensions

Magento 2 extensions

Allow you to achieve more with your online store

Check it out!


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.

Related Post

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous Effective Method to Create Payment Method in Magento 2
Next Magento 2 Unit Test
One Step Checkout for Magento 2 by Mageplaza

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.3.x, 2.4.x
x