{"id":6403,"date":"2017-10-10T12:49:40","date_gmt":"2017-10-10T12:49:40","guid":{"rendered":"https:\/\/weblizar.com\/blog\/?p=6403"},"modified":"2025-08-11T11:51:08","modified_gmt":"2025-08-11T06:21:08","slug":"ways-to-create-a-widget-in-magento-2","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/","title":{"rendered":"Ways To Create a Widget in Magento 2"},"content":{"rendered":"<p>A widget is an essential element in Magento 2 and helps the visitors view and surf your website with ease. It\u2019s an important part of a Magento 2 store<\/p>\n<p>According to <a href=\"https:\/\/www.techtarget.com\/whatis\/definition\/widget\" target=\"_blank\" rel=\"noopener noreferrer\">WhatIs.com<\/a>, a widget is an element of a graphical user interface (GUI) that displays information or provides a specific way for a user to interact with the operating system or an application. Similarly, Widgets in Magento 2 can be explained as small blocks which perform a definite function on your website.<\/p>\n<p>Magento2 have many types of already created and installed widgets such as CMS Page Link, CMS Static Block, Catalog Category Link, Catalog New Products List, Catalog Product Link, and Recently Viewed Products, etc. Correspondingly, store admins can use a widget to improve the user experience as well as the functionality of the store.<\/p>\n<p>Suggested Post:\u00a0<a title=\"How to begin with Magento \u2013 Pro Tips\" href=\"https:\/\/weblizar.com\/blog\/how-to-begin-with-magento-pro-tips\/\" target=\"_blank\" rel=\"noopener\">How to begin with Magento \u2013 Pro Tips<\/a><\/p>\n<p>Here are some achievable performance of Magento2 widgets:<\/p>\n<ul>\n<li>Dynamic product show,<\/li>\n<li>Dynamic recently-viewed-product lists,<\/li>\n<li>Advertising images placed on different Magento frontend,<\/li>\n<li>Attractive navigation elements and action blocks,<\/li>\n<li>Dynamic flash elements that can be easily configured and embedded in content pages,<\/li>\n<li>And much more.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>In fact, the method to <strong>create a widget in Magento 2<\/strong> is almost the as easy as creating front-end extension with a simple module. Hence, there is no complexity since customization for widgets. A custom widget can sometimes offer an even better way of editing or be adding quality content inside Magento blocks or pages.<\/p>\n<p>Let\u2019s start!<\/p>\n<h2>Creating a\u00a0Magento 2 Widget<\/h2>\n<p>Create folder structure in your directory Magento_root\\app\\code\\WeblizarWidget\\Weblizarwidget<\/p>\n<p>A) Create registration.php file in Weblizarwidget folder with following code<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(<br \/>\n\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,<br \/>\n'Weblizar_Widget',<br \/>\n__DIR__<br \/>\n);<br \/>\n<\/code><br \/>\nB) Create etc folder in Weblizarwidget folder and create file module.xml in etc folder with following code<\/p>\n<p><code><br \/>\n&lt;?xml version=\"1.0\"?&gt;<\/code><\/p>\n<p><code>&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\"&gt;<br \/>\n&lt;module name=\"Weblizar_Widget\" setup_version=\"1.0.0\"&gt;<br \/>\n&lt;\/module&gt;<br \/>\n&lt;\/config&gt;<br \/>\n<\/code><\/p>\n<p>C) Create file widget.xml in etc folder with following code<\/p>\n<p><code><br \/>\n&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;<br \/>\n&lt;widgets xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<br \/>\nxsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Widget:etc\/widget.xsd\"&gt;<br \/>\n&lt;widget id=\"weblizar_demowidget\" class=\"WeblizarWidget\\Weblizarwidget\\Block\\Widget\\WeblizarWidget\"&gt;<br \/>\n&lt;label translate=\"true\"&gt;Weblizar Widget<br \/>\n&lt;description&gt;Widget in Magento2<br \/>\n&lt;parameters&gt;<br \/>\n&lt;parameter name=\"title\" xsi:type=\"text\" required=\"false\" visible=\"true\"&gt;<br \/>\n&lt;label&gt;Title&lt;\/label&gt;<br \/>\n&lt;\/parameter&gt;<br \/>\n&lt;parameter name=\"description\" xsi:type=\"text\" required=\"false\" visible=\"true\"&gt;<br \/>\n&lt;label&gt;Description&lt;\/label&gt;<br \/>\n&lt;\/parameter&gt;<br \/>\n&lt;\/parameters&gt;<br \/>\n&lt;\/widget&gt;<br \/>\n&lt;\/widgets&gt;<br \/>\n<\/code><\/p>\n<p>Suggested Post:\u00a0<a title=\"Launched Finest Ever Fashion Theme On Magento 2.0\" href=\"https:\/\/weblizar.com\/blog\/launched-finest-ever-fashion-theme-on-magento-2-0\/\" target=\"_blank\" rel=\"noopener\">Launched Finest Ever Fashion Theme On Magento 2.0<\/a><\/p>\n<p>D) Create folder Block\\Widget in Weblizarwidget folder and create file WeblizarWidget.php in Widget folder with following code<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\nnamespace WeblizarWidget\\Weblizarwidget\\Block\\Widget;<br \/>\nclass WeblizarWidget extends \\Magento\\Framework\\View\\Element\\Template implements \\Magento\\Widget\\Block\\BlockInterface<br \/>\n{<br \/>\nprotected function _construct()<br \/>\n{<br \/>\nparent::_construct();<br \/>\n$this-&gt;setTemplate('widget\\weblizar_widget.phtml');<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p>E) Create folder view\\frontend\\templates\\widget in Weblizarwidget folder and create weblizar_widget.phtml file with following code<br \/>\n<code><br \/>\n&lt;?php<br \/>\n$title = $this-&gt;getData(\"title\");<br \/>\n$description = $this-&gt;getData(\"description\");<br \/>\n?&gt;<br \/>\n&lt;?php if($title){ ?&gt;<br \/>\n&lt;div&gt;<br \/>\n&lt;h1&gt;&lt;?php echo $title ?&gt;&lt;\/h1&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;?php } ?&gt;<br \/>\n&lt;?php if($description){ ?&gt;<br \/>\n&lt;div&gt;<br \/>\n&lt;h2&gt;&lt;?php echo $description ?&gt;&lt;\/h2&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;?php } ?&gt;<\/code><\/p>\n<ul>\n<li>Then go to <strong>Admin panel &gt; Content &gt; Pages &gt; Homepage &gt; Edit<\/strong><\/li>\n<li>In the Content tab, click on<strong> Insert Widget<\/strong> icon.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6405\" src=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/demo5555.png\" alt=\"\" width=\"1492\" height=\"749\" \/><\/p>\n<p>And here is the result, and you will see the Weblizar Widget in the widget list.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6406\" src=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/demo666.png\" alt=\"\" width=\"1510\" height=\"760\" \/><\/p>\n<p>The output of widget<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6407\" src=\"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/front-widget.png\" alt=\"\" width=\"1590\" height=\"756\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A widget is an essential element in Magento 2 and helps the visitors view and surf your website with ease. It\u2019s an important part of a Magento 2 store According to WhatIs.com, a widget is an element of a graphical user interface (GUI) that displays information or provides a specific way for a user to<\/p>\n","protected":false},"author":5,"featured_media":6468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[80],"tags":[961,548,549,950,963,962],"class_list":["post-6403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2","tag-how-to-create-widget-in-magento","tag-magento","tag-magento-2","tag-magento-developers","tag-magento-tips","tag-magento-widget-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ways To Create a Widget in Magento 2 - Weblizar Blog<\/title>\n<meta name=\"description\" content=\"This blog describes step by step process on how to create a widget in magento 2. Follow the instructions carefully and you will find it pretty easy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ways To Create a Widget in Magento 2 - Weblizar Blog\" \/>\n<meta property=\"og:description\" content=\"This blog describes step by step process on how to create a widget in magento 2. Follow the instructions carefully and you will find it pretty easy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblizar Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/weblizarwp\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-10T12:49:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-11T06:21:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg?fit=900%2C563&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Danish Ansari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@weblizar\" \/>\n<meta name=\"twitter:site\" content=\"@weblizar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Danish Ansari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ways To Create a Widget in Magento 2 - Weblizar Blog","description":"This blog describes step by step process on how to create a widget in magento 2. Follow the instructions carefully and you will find it pretty easy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Ways To Create a Widget in Magento 2 - Weblizar Blog","og_description":"This blog describes step by step process on how to create a widget in magento 2. Follow the instructions carefully and you will find it pretty easy.","og_url":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/","og_site_name":"Weblizar Blog","article_publisher":"http:\/\/www.facebook.com\/weblizarwp","article_published_time":"2017-10-10T12:49:40+00:00","article_modified_time":"2025-08-11T06:21:08+00:00","og_image":[{"width":900,"height":563,"url":"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg?fit=900%2C563&ssl=1","type":"image\/jpeg"}],"author":"Danish Ansari","twitter_card":"summary_large_image","twitter_creator":"@weblizar","twitter_site":"@weblizar","twitter_misc":{"Written by":"Danish Ansari","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/"},"author":{"name":"Danish Ansari","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"headline":"Ways To Create a Widget in Magento 2","datePublished":"2017-10-10T12:49:40+00:00","dateModified":"2025-08-11T06:21:08+00:00","mainEntityOfPage":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/"},"wordCount":397,"commentCount":0,"image":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg","keywords":["how to create widget in magento","magento","magento 2","magento developers","magento tips","magento widget development"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/","url":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/","name":"Ways To Create a Widget in Magento 2 - Weblizar Blog","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg","datePublished":"2017-10-10T12:49:40+00:00","dateModified":"2025-08-11T06:21:08+00:00","author":{"@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"description":"This blog describes step by step process on how to create a widget in magento 2. Follow the instructions carefully and you will find it pretty easy.","breadcrumb":{"@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#primaryimage","url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg","contentUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/10\/Ways-To-Create-a-Widget-in-Magento-2.jpg","width":900,"height":563,"caption":"Ways To Create a Widget in Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/weblizar.com\/blog\/ways-to-create-a-widget-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/weblizar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ways To Create a Widget in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/weblizar.com\/blog\/#website","url":"https:\/\/weblizar.com\/blog\/","name":"Weblizar Blog","description":"Update yourself with all the latest tech news revolving around wordpress all at one place","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/weblizar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628","name":"Danish Ansari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","caption":"Danish Ansari"}}]}},"_links":{"self":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/6403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/comments?post=6403"}],"version-history":[{"count":0,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/6403\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media\/6468"}],"wp:attachment":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media?parent=6403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/categories?post=6403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/tags?post=6403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}