{"id":115,"date":"2022-05-07T08:40:54","date_gmt":"2022-05-07T08:40:54","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=115"},"modified":"2022-07-11T10:27:29","modified_gmt":"2022-07-11T04:57:29","slug":"magento-2-how-to-create-custom-widget","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/","title":{"rendered":"Magento 2 How To Create Custom Widget."},"content":{"rendered":"\n<p>Hello Guys! \ud83d\udc4b<\/p>\n\n\n\n<p>The widget is a powerful feature provided by Magento 2 to add static or dynamic content to store pages. <\/p>\n\n\n\n<p>Some of the widgets provided by Magento are default in the system following list is a default inbuilt widget provided by Magento.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>CMS Page Link <\/strong><\/li><li><strong>CMS Static Block<\/strong><\/li><li><strong>Catalog Category Link<\/strong><\/li><li><strong>Catalog New Products List<\/strong><\/li><li><strong>Catalog Product Link<\/strong><\/li><li><strong>Catalog Products List<\/strong><\/li><li><strong>Orders and Returns<\/strong><\/li><li><strong>Recently compared Products<\/strong><\/li><li><strong>Recently Viewed Products<\/strong><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>In this blog, we create a custom widget. Follow following step to create custom widget.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Step 1: Add <strong>widget.xml<\/strong> in following path:<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>app\\code\\Vendor\\Extension\\etc<\/strong><\/code><\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;?xml version=&quot;1.0&quot; ?&gt;\n&lt;widgets xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:module:Magento_Widget:etc\/widget.xsd&quot;&gt;\n    &lt;widget class=&quot;Vendor\\Extension\\Block\\Widget\\Customwidget&quot; id=&quot;customwidget&quot;&gt;\n        &lt;label&gt;Custom Widget&lt;\/label&gt;\n        &lt;description&gt;&lt;\/description&gt;\n        &lt;parameters&gt;\n            &lt;parameter name=&quot;favourite_fruit&quot; xsi:type=&quot;select&quot; visible=&quot;true&quot; required=&quot;true&quot; sort_order=&quot;20&quot;&gt;\n                &lt;label translate=&quot;true&quot;&gt;Favourite Fruit&lt;\/label&gt;\n                &lt;options&gt;\n                    &lt;option name=&quot;apple&quot; value=&quot;Apple&quot;&gt;\n                        &lt;label&gt;Apple&lt;\/label&gt;\n                    &lt;\/option&gt;\n                    &lt;option name=&quot;pear&quot; value=&quot;Pear&quot; selected=&quot;true&quot;&gt;\n                        &lt;label&gt;Pear&lt;\/label&gt;\n                    &lt;\/option&gt;\n                    &lt;option name=&quot;orange&quot; value=&quot;Orange&quot;&gt;\n                        &lt;label&gt;Orange&lt;\/label&gt;\n                    &lt;\/option&gt;\n                &lt;\/options&gt;\n            &lt;\/parameter&gt;\n        &lt;\/parameters&gt;\n\n    &lt;\/widget&gt;\n&lt;\/widgets&gt;\n\n<\/pre><\/div>\n\n\n<pre class=\"wp-block-code\"><code>Step 2: Add <strong>Customwidget.php<\/strong> in following path<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>app\\code\\Vendor\\Extension\\Block\\Widget<\/strong><\/code><\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&lt;?php\n\nnamespace Vendor\\Extension\\Block\\Widget;\n\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magento\\Widget\\Block\\BlockInterface;\n\nclass Customwidget extends Template implements BlockInterface\n{\n\n    protected $_template = &quot;widget\/customwidget.phtml&quot;;\n\n}\n\n<\/pre><\/div>\n\n\n<pre class=\"wp-block-code\"><code>Step 3: Now add <strong>customwidget.phtml<\/strong> in following path<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><strong>app\\code\\Vendor\\Extension\\view\\frontend\\templates\\widget<\/strong><\/code><\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;?php if($block-&gt;getData(&#039;favourite_fruit&#039;)): ?&gt;\n    &lt;h2 class=&#039;title&#039;&gt; &lt;?= __(&quot;Favourite Fruit&quot;) ?&gt; &lt;?php echo $block-&gt;getData(&#039;favourite_fruit&#039;); ?&gt;&lt;\/h2&gt;\n&lt;?php endif; ?&gt;\n\n<\/pre><\/div>\n\n\n<p>  Now insert widget to cms pages from admin panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-1024x565.png\" alt=\"\" class=\"wp-image-126\" width=\"798\" height=\"440\" srcset=\"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-1024x565.png 1024w, https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-300x166.png 300w, https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-768x424.png 768w, https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image.png 1143w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<p>Hope! It will help you<\/p>\n\n\n\n<p>Thank you \ud83d\ude0a<\/p>\n\n\n\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<!-- FeedbackWP Plugin --><div  class=\"rmp-widgets-container rmp-wp-plugin rmp-main-container js-rmp-widgets-container js-rmp-widgets-container--115 \"  data-post-id=\"115\">    <!-- Rating widget -->  <div class=\"rmp-rating-widget js-rmp-rating-widget\">          <p class=\"rmp-heading rmp-heading--title\">        How useful was this post?      <\/p>              <p class=\"rmp-heading rmp-heading--subtitle\">        Click on a star to rate it!      <\/p>        <div class=\"rmp-rating-widget__icons\">      <ul class=\"rmp-rating-widget__icons-list js-rmp-rating-icons-list\">                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"Not at all useful\" data-value=\"1\">              <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"Somewhat useful\" data-value=\"2\">              <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"Useful\" data-value=\"3\">              <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"Fairly useful\" data-value=\"4\">              <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>                  <li class=\"rmp-rating-widget__icons-list__icon js-rmp-rating-item\" data-descriptive-rating=\"Very useful\" data-value=\"5\">              <i class=\"js-rmp-rating-icon rmp-icon rmp-icon--ratings rmp-icon--star rmp-icon--full-highlight\"><\/i>          <\/li>              <\/ul>    <\/div>    <p class=\"rmp-rating-widget__hover-text js-rmp-hover-text\"><\/p>        <button class=\"rmp-rating-widget__submit-btn rmp-btn js-submit-rating-btn\">      Submit Rating    <\/button>    <p class=\"rmp-rating-widget__results js-rmp-results \">      Average rating <span class=\"rmp-rating-widget__results__rating js-rmp-avg-rating\">5<\/span> \/ 5. Vote count: <span class=\"rmp-rating-widget__results__votes js-rmp-vote-count\">14<\/span>    <\/p>    <p class=\"rmp-rating-widget__not-rated js-rmp-not-rated rmp-rating-widget__not-rated--hidden\">      No votes so far! Be the first to rate this post.    <\/p>    <p class=\"rmp-rating-widget__msg js-rmp-msg\"><\/p>  <\/div>  <!--Structured data -->        <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hello Guys! \ud83d\udc4b The widget is a powerful feature provided by Magento 2 to add static or dynamic content to store pages. Some of the widgets provided by Magento are default in the system following list is a default inbuilt widget provided by Magento. CMS Page Link CMS Static Block Catalog Category Link Catalog New [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[19,17,18],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2","tag-custom-widget","tag-magento-2-2","tag-widget"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Magento 2 How To Create Custom Widget. - Magecurious<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 How To Create Custom Widget. - Magecurious\" \/>\n<meta property=\"og:description\" content=\"Hello Guys! \ud83d\udc4b The widget is a powerful feature provided by Magento 2 to add static or dynamic content to store pages. Some of the widgets provided by Magento are default in the system following list is a default inbuilt widget provided by Magento. CMS Page Link CMS Static Block Catalog Category Link Catalog New [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Magecurious\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-07T08:40:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-11T04:57:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-1024x565.png\" \/>\n<meta name=\"author\" content=\"Magecurious\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Magecurious\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento 2 How To Create Custom Widget. - Magecurious","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:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/","og_locale":"en_US","og_type":"article","og_title":"Magento 2 How To Create Custom Widget. - Magecurious","og_description":"Hello Guys! \ud83d\udc4b The widget is a powerful feature provided by Magento 2 to add static or dynamic content to store pages. Some of the widgets provided by Magento are default in the system following list is a default inbuilt widget provided by Magento. CMS Page Link CMS Static Block Catalog Category Link Catalog New [&hellip;]","og_url":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/","og_site_name":"Magecurious","article_published_time":"2022-05-07T08:40:54+00:00","article_modified_time":"2022-07-11T04:57:29+00:00","og_image":[{"url":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/image-1024x565.png","type":"","width":"","height":""}],"author":"Magecurious","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Magecurious","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#article","isPartOf":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/"},"author":{"name":"Magecurious","@id":"https:\/\/magecurious.com\/blog\/#\/schema\/person\/6bced7da0991e7fbbd4550006a6494e2"},"headline":"Magento 2 How To Create Custom Widget.","datePublished":"2022-05-07T08:40:54+00:00","dateModified":"2022-07-11T04:57:29+00:00","mainEntityOfPage":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/"},"wordCount":108,"commentCount":0,"publisher":{"@id":"https:\/\/magecurious.com\/blog\/#organization"},"image":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/Custom-Widget.png","keywords":["custom widget","Magento 2","widget"],"articleSection":["Magento 2 Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/","url":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/","name":"Magento 2 How To Create Custom Widget. - Magecurious","isPartOf":{"@id":"https:\/\/magecurious.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#primaryimage"},"image":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/Custom-Widget.png","datePublished":"2022-05-07T08:40:54+00:00","dateModified":"2022-07-11T04:57:29+00:00","breadcrumb":{"@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#primaryimage","url":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/Custom-Widget.png","contentUrl":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/Custom-Widget.png","width":1260,"height":496,"caption":"Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/magecurious.com\/blog\/magento-2-how-to-create-custom-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/magecurious.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 How To Create Custom Widget."}]},{"@type":"WebSite","@id":"https:\/\/magecurious.com\/blog\/#website","url":"https:\/\/magecurious.com\/blog\/","name":"Magecurious","description":"Blog","publisher":{"@id":"https:\/\/magecurious.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/magecurious.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/magecurious.com\/blog\/#organization","name":"Magecurious","url":"https:\/\/magecurious.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magecurious.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2026\/03\/cropped-New_Project.png","contentUrl":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2026\/03\/cropped-New_Project.png","width":596,"height":113,"caption":"Magecurious"},"image":{"@id":"https:\/\/magecurious.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/magecurious.com\/blog\/#\/schema\/person\/6bced7da0991e7fbbd4550006a6494e2","name":"Magecurious","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magecurious.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c9178df2190b2309da97c9f28dd475bc338275cf664d12678d7e5da51c761271?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9178df2190b2309da97c9f28dd475bc338275cf664d12678d7e5da51c761271?s=96&d=mm&r=g","caption":"Magecurious"},"sameAs":["https:\/\/magecurious.com"],"url":"https:\/\/magecurious.com\/blog\/author\/magecurious-wp\/"}]}},"jetpack_featured_media_url":"https:\/\/magecurious.com\/blog\/wp-content\/uploads\/2022\/05\/Custom-Widget.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":0,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/media\/187"}],"wp:attachment":[{"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magecurious.com\/blog\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}