{"id":55309,"date":"2017-02-03T17:30:54","date_gmt":"2017-02-03T17:30:54","guid":{"rendered":"https:\/\/astoundify.com\/?p=55309"},"modified":"2022-11-22T05:55:09","modified_gmt":"2022-11-22T05:55:09","slug":"custom-widgets-for-listify","status":"publish","type":"post","link":"https:\/\/astoundify.com\/blog\/custom-widgets-for-listify\/","title":{"rendered":"Create or Override Widgets in Listify"},"content":{"rendered":"<p>All Astoundify themes are built around the central ideas that widgets create great building blocks for creating and customizing your website. They can easily be added, removed, rearranged, or configured without having to modify template files.<\/p>\n<p>However, there may be instances where a widget does not offer a setting to adjust for what you need, or you need to make a change to the appearance that cannot be achieved via CSS.<\/p>\n<p>Listify offers multiple ways to further customize a widget or change the output entirely.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/astoundify.com\/blog\/custom-widgets-for-listify\/#Simple_HTML_Changes\" title=\"Simple HTML Changes\">Simple HTML Changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/astoundify.com\/blog\/custom-widgets-for-listify\/#Override_the_Entire_Widget\" title=\"Override the Entire Widget\">Override the Entire Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/astoundify.com\/blog\/custom-widgets-for-listify\/#Never_Edit_Parent_Theme_Files\" title=\"Never Edit Parent Theme Files\">Never Edit Parent Theme Files<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Simple_HTML_Changes\"><\/span>Simple HTML Changes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>All widget output can be modified using the <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Filter_Reference\">WordPress Filter API<\/a>. The entire HTML content of a widget is passed through a filter using the unique widget ID as the tag.<\/p>\n<p>Take for example the &#8220;<a href=\"https:\/\/gist.github.com\/spencerfinnell\/31d523cd30aca582d298005076d5dbe7\">Description<\/a>&#8221; widget. On <a href=\"https:\/\/gist.github.com\/spencerfinnell\/31d523cd30aca582d298005076d5dbe7#file-class-widget-job_listing-php-L16\">line 16<\/a>\u00a0the widget is registered with an ID of\u00a0<code>listify_widget_panel_listing_content<\/code>. On <a href=\"https:\/\/gist.github.com\/spencerfinnell\/31d523cd30aca582d298005076d5dbe7#file-class-widget-job_listing-php-L89\">line 89<\/a>\u00a0this ID is used to name a filter in the WordPress Filter API.<\/p>\n<p>All widgets on the single listing page are wrapped in an <code>aside<\/code> tag that contains the following CSS class names:\u00a0<code>widget widget-job_listing<\/code>. If we want to add another class to the <code>aside<\/code> tag to provide specific styling for this widget we can use the following code:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/spencerfinnell\/5b39a0416cb25782855b28f1a04e8f55.js\"><\/script><\/p>\n<p>Using PHP&#8217;s <a href=\"http:\/\/php.net\/manual\/en\/function.str-replace.php\"><code>str_replace()<\/code><\/a> function we can replace the existing CSS classes in the wrapper with an additional class appended. This will result in an output of <code>&lt;aside class=\"widget widget-job_listing my-custom-class\"&gt;<\/code> which you can then style:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/spencerfinnell\/edb1ae5b575316552dbe18d51d383466.js\"><\/script><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Override_the_Entire_Widget\"><\/span>Override the Entire Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sometimes more drastic changes are required when modifying a widget. In these cases, the entire widget output must be rewritten. While it is possible to do this using the steps mentioned above a more maintainable solution is to register your own copy of the widget and use that instead.<\/p>\n<p>Let&#8217;s take the Call to Action\u00a0widget for example. Perhaps we need completely custom HTML instead of what is provided. To change this we first need to duplicate the widget file to our child theme. Save <a href=\"https:\/\/gist.github.com\/spencerfinnell\/8712fb2d04ee9dab560288d6ec2bae15\"><code>class-widget-home-cta.php<\/code><\/a> in your child theme.<\/p>\n<p>Once this is done we must modify the name of the widget class and the ID used to register the widget. You can see this change on <a href=\"https:\/\/gist.github.com\/spencerfinnell\/8712fb2d04ee9dab560288d6ec2bae15#file-class-widget-home-cta-php-L7\">line 7<\/a> and <a href=\"https:\/\/gist.github.com\/spencerfinnell\/8712fb2d04ee9dab560288d6ec2bae15#file-class-widget-home-cta-php-L15\">line 15<\/a>.<\/p>\n<p>Once the widget has been saved in our child theme it needs to be registered so WordPress knows to allow it to be added to a widget area. In your child theme&#8217;s functions.php add:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/spencerfinnell\/b39d4fda19fd689f8d9c24508e834719.js\"><\/script><\/p>\n<p>Here we include the widget file we copied to the child theme, and register it using the new class name assigned. It will now appear in\u00a0<strong>Appearance \u25b8 Widgets<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-55316\" src=\"https:\/\/astoundify.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-31-at-1.34.53-PM.png\" alt=\"\" width=\"1906\" height=\"488\" srcset=\"https:\/\/astoundify.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-31-at-1.34.53-PM.png 1906w, https:\/\/astoundify.com\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-31-at-1.34.53-PM-740x189.png 740w\" sizes=\"(max-width: 1906px) 100vw, 1906px\" \/><\/p>\n<p>To edit the output of the widget simply modify the output of the <a href=\"https:\/\/gist.github.com\/spencerfinnell\/8712fb2d04ee9dab560288d6ec2bae15#file-class-widget-home-cta-php-L86\"><code>widget()<\/code><\/a> method.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Never_Edit_Parent_Theme_Files\"><\/span>Never Edit Parent Theme Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Just like you should never edit a WordPress core file, you should also never edit a parent theme file. There are always ways to modify or override what the theme ultimately outputs on the page. By keeping theme files untouched you can more safely update your theme when new versions are released.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All Astoundify themes are built around the central ideas that widgets create great building blocks for creating and customizing your website. They can easily be added, removed, rearranged, or configured without having to modify template files. However, there may be instances where a widget does not offer a setting to adjust for what you need, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":55651,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[18],"yst_prominent_words":[679,33,24,30,23,683,32,27,25,22,156,31,21,19],"acf":[],"_links":{"self":[{"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/posts\/55309"}],"collection":[{"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/comments?post=55309"}],"version-history":[{"count":1,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/posts\/55309\/revisions"}],"predecessor-version":[{"id":384077,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/posts\/55309\/revisions\/384077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/media\/55651"}],"wp:attachment":[{"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/media?parent=55309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/categories?post=55309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/tags?post=55309"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/astoundify.com\/wp-json\/wp\/v2\/yst_prominent_words?post=55309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}