{"id":751,"date":"2025-03-24T14:27:35","date_gmt":"2025-03-24T14:27:35","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/gd-post-badge\/"},"modified":"2025-04-03T15:23:55","modified_gmt":"2025-04-03T14:23:55","slug":"gd-post-badge","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-post-badge\/","title":{"rendered":"GD > Post Badge"},"content":{"rendered":"\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-success mb-3\" role=\"alert\"><span class=\"fas fa-check-circle me-2\"><\/span><span class=\"flex-grow-1\">All Widgets come as Widgets, Shortcodes or Blocks. Learn more about our <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/what-makes-geodirectory-widgets-special\/\">Super Duper Widgets<\/a>.<\/span><\/div>\n\n\n\n<p>The <b style=\"font-style: italic;\">Post Badge <\/b>widget\u00a0is used to\u00a0<strong>output a custom badge dependent on a specific custom field value<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-warning mb-3\" role=\"alert\"><span class=\"fas fa-exclamation-triangle me-2\"><\/span><span class=\"flex-grow-1\">If you need to output more than just a badge dependent on the value of a custom field then you can use the <strong>GD > Dynamic Content<\/strong> widget.<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Widget Options<\/h2>\n\n\n\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-info mb-3\" role=\"alert\"><span class=\"fas fa-info-circle me-2\"><\/span><span class=\"flex-grow-1\">Some settings for this widget are advanced settings, reveal them by clicking the button next to save.<\/span><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Post ID<\/strong>&nbsp;&#8211; Leaving this blank will use the current post ID from the page or the loop, or you can specify and exact post ID if needed.<\/li>\n\n\n\n<li><strong>Field Key<\/strong>&nbsp;&#8211;&nbsp;Selecting the custom field key to use as the conditional field.&nbsp; Standard field values are also available here such as post_date.<\/li>\n\n\n\n<li><strong>Field condition<\/strong>&nbsp;&#8211; This is the condition to use for the field value. You can match it to an exact value or simply use &#8220;is no empty&#8221; to show if a value is set. Many comparison types are available.<\/li>\n\n\n\n<li><strong>Value to match<\/strong>&nbsp;&#8211; If a comparison condition is used that requires a matching value then this is where you can enter a matching value.&nbsp;&nbsp;For post date enter value like +7 or -7.<\/li>\n\n\n\n<li><strong>Icon class<\/strong> &#8211;&nbsp;You can show a font-awesome icon in the badge by entering the icon class. E.g &#8220;<em>fas fa-award<\/em>&#8220;<\/li>\n\n\n\n<li><strong>Badge<\/strong> &#8211;&nbsp;Badge text. Ex: FOR SALE. Leave blank to show field title as a badge, or use %%input%% to use the input value of the field or %%post_url%% for the post URL, or the field key for any other info %%email%%.<\/li>\n\n\n\n<li><strong>Link URL<\/strong> &#8211;&nbsp;Badge link URL. You can use this to make the button link to something, %%input%% can be used here if a link or %%post_url%% for the post URL.<\/li>\n\n\n\n<li><strong>Open link in new window<\/strong> &#8211; This will make the link open in a new tab\/window.<\/li>\n\n\n\n<li><strong>Badge background color <\/strong>&#8211;&nbsp;Color for the badge background.<\/li>\n\n\n\n<li><strong>Badge text color<\/strong> &#8211;&nbsp;Color for the badge text.<\/li>\n\n\n\n<li><strong>Badge size <\/strong>&#8211; Set the size of the badge.<\/li>\n\n\n\n<li><strong>Alignment<\/strong> &#8211;&nbsp;How the item should be positioned on the page.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example Output<\/h2>\n\n\n\n<p>For some examples, we can look at the default dummy data<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-wmTxKG551Q.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The shortcodes used in the Archive Item template are:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&#039;post_date&#039; condition=&#039;is_less_than&#039; search=&#039;+30&#039; icon_class=&#039;fas fa-certificate&#039; badge=&#039;New&#039; bg_color=&#039;#ff0000&#039; txt_color=&#039;#ffffff&#039; alignment=&#039;left&#039;&#093;\n&#091;gd_post_badge key=&#039;facebook&#039; condition=&#039;is_not_empty&#039; icon_class=&#039;fab fa-facebook-f fa-fw&#039; link=&#039;%%input%%&#039; new_window=&#039;1&#039; bg_color=&#039;#2b4be8&#039; txt_color=&#039;#ffffff&#039; alignment=&#039;left&#039;&#093;\n&#091;gd_post_badge key=&#039;twitter&#039; condition=&#039;is_not_empty&#039; icon_class=&#039;fab fa-twitter fa-fw&#039; link=&#039;%%input%%&#039; new_window=&#039;1&#039; bg_color=&#039;#2bb8e8&#039; txt_color=&#039;#ffffff&#039; alignment=&#039;left&#039;&#093;\n&#091;gd_post_badge key=&#039;website&#039; condition=&#039;is_not_empty&#039; icon_class=&#039;fas fa-link fa-fw&#039; link=&#039;%%input%%&#039; new_window=&#039;1&#039; bg_color=&#039;#85a9b5&#039; txt_color=&#039;#ffffff&#039; alignment=&#039;left&#039;&#093;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Badge Placement with the &#8216;extra class&#8217; option<\/h2>\n\n\n\n<p>These custom classes can be added to your badge to change the way it is displayed within the containing div. The most common usage is within the GD Archive item section, usually the left section, but you can also use them in the footer section as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_archive_item_section type=&#039;open&#039; position=&#039;left&#039;&#093;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&#039;featured&#039; condition=&#039;is_not_empty&#039; badge=&#039;FEATURED&#039; bg_color=&#039;#fd4700&#039; txt_color=&#039;#ffffff&#039; css_class=&#039;gd-ab-top-left-angle gd-badge-shadow&#039;&#093;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_images type=&#039;image&#039; ajax_load=&#039;true&#039; link_to=&#039;post&#039; types=&#039;logo,post_images&#039;&#093;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_archive_item_section type=&#039;close&#039; position=&#039;left&#039;&#093;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-67jMy3g2Dy.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>To use these over the top of an archive item GD Post Images, be sure to include the badge before the GD Archive Item Close element.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">shadow \t\t\t\t\t\/\/ gd-badge-shadow \/\/ adds a shadow to the badge \ntop left \t\t\t\t\/\/ gd-ab-top-left \/\/ positions absolute top\nabsolute left \t\t\t\t\/\/ gd-ab-top-left-angle \/\/ positions absolute top\nabsolute left, at an angle \t\t\/\/ gd-ab-top-right \/\/ positions absolute top\nabsolute right \t\t\t\t\/\/ gd-ab-top-right-angle \/\/ positions absolute top\nabsolute right, at an angle \t\t\/\/ gd-ab-bottom-left \/\/ positions absolute bottom\nabsolute left \t\t\t\t\/\/ gd-ab-bottom-left-angle \/\/ positions absolute bottom\nabsolute left, at an angle \t\t\/\/ gd-ab-bottom-right \/\/ positions absolute bottom\nabsolute bottom right, at an angle \t\/\/ gd-ab-bottom-right-angle \/\/ positions absolute bottom\ninteractive video and files \t\t\/\/ gd-lity  \/\/ adds interactivity \u2013 launching a video link in a lightbox, for example<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Examples of positioning<\/h4>\n\n\n\n<p><em>Featured in the upper left<\/em><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;featured&quot; condition=&quot;is_not_empty&quot; badge=&quot;Featured&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot; css_class=&quot;gd-ab-top-left&quot;&#093;<\/code><\/pre>\n\n\n\n<p><em>Default category in the lower left<\/em><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;default_category&quot; condition=&quot;is_not_empty&quot; badge=&quot;%%default_category%%&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot; css_class=&quot;gd-ab-bottom-left&quot;&#093;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Taxonomy Badges<\/h3>\n\n\n\n<p>Examples for showing a badge based on categories<\/p>\n\n\n\n<p>Default Category<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;default_category&quot; condition=&quot;is_not_empty&quot; badge=&quot;%%default_category%%&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot; css_class=&quot;gd-ab-bottom-left&quot;&#093;<\/code><\/pre>\n\n\n\n<p>Specific Category<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_category&quot; condition=&quot;is_contains&quot; search=&quot;32&quot; badge=&quot;Attractions&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_category&quot; condition=&quot;is_contains&quot; search=&quot;32,33&quot; badge=&quot;Attractions \/ Hotels&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<p>Examples for showing a badge based on tags.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_tags&quot; condition=&quot;is_contains&quot; search=&quot;Museum&quot; badge=&quot;Museum&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_tags&quot; condition=&quot;is_contains&quot; search=&quot;Museum,Garden&quot; badge=&quot;Museum \/ Garden&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Example \u2013 HTML Image Badge<\/h3>\n\n\n\n<p>HTML can be used in the badge param. Make sure to enclose the HTML with \u201d (quotes\u201d and then use \u2018 (apostrophe) for inner HTML.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;my_custom_field&quot; condition=&quot;is_not_empty&quot; badge=&quot;&lt;img src=&#039;https:\/\/mysite.com\/wp-content\/uploads\/2020\/02\/pbjt.jpg&#039;\/&gt;&quot; bg_color=&quot;#ffffff&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Date in a badge<\/h3>\n\n\n\n<p>Using \u2018post_modified\u2019 to show the date of last update or \u201cRecently Updated\u201d post_modified is the date that a listing was most recently updated.<\/p>\n\n\n\n<p>If you create a badge and use %%input%% for the badge, post_modified will show as a date.<\/p>\n\n\n\n<p>To show \u201cRecently Updated!\u201d if a post was updated in the last 30 days use:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&#039;post_modified&#039; condition=&#039;is_less_than&#039; search=&#039;+30\u2032 icon_class=&#039;fas fa-certificate&#039; badge=&#039;Recently Updated!&#039; bg_color=&#039;#ff0000\u2032 txt_color=&#039;#ffffff&#039; alignment=&#039;left&#039;&#093;<\/code><\/pre>\n\n\n\n<p>Here is a \u2018New\u2019 Badge that shows for the 30 days after a post has been created. If 30 is less than the count of days since the post date, then the badge shows.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_date&quot; condition=&quot;is_less_than&quot; search=&quot;+30&quot; badge=&quot;NEW&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Read More Button<\/h3>\n\n\n\n<p>Use an alternative to the GD Post Content Read More option.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_title&quot; condition=&quot;is_not_empty&quot; badge=&quot;Read More&quot; link=&quot;%%post_url%%&quot; bg_color=&quot;#ffffff&quot; txt_color=&quot;#433aed&quot; alignment=&quot;center&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Write a Review Button<\/h3>\n\n\n\n<p>Link to a tab in the GD Single Tabs easily.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;post_title&quot; condition=&quot;is_not_empty&quot; badge=&quot;Write a Review&quot; bg_color=&quot;#0073aa&quot; txt_color=&quot;#ffffff&quot; link=&quot;%%post_url%%#reviews&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Website Link Badge<\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;website&quot; condition=&quot;is_not_empty&quot; badge=&quot;Awesome Super Link&quot; link=&quot;%%input%%&quot; bg_color=&quot;#9c03aa&quot; txt_color=&quot;#ffffff&quot; size=&quot;extra-large&quot; list_hide=&quot;3&quot; list_hide_secondary=&quot;2&quot;&#093;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Verified Listing Badge<\/h3>\n\n\n\n<p>Show a badge &#8220;Verified&#8221; when the listing is claimed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-Zf2KxymBxA.png\" alt=\"\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;claimed&quot; condition=&quot;is_not_empty&quot; badge=&#039;&lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;\/i&gt;Verified&#039; bg_color=&quot;#ff8040&quot; txt_color=&quot;#ffffff&quot; size=&quot;small&quot; alignment=&quot;right&quot; css_class=&quot;verified&quot;&#093;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"featured\">Featured<\/h2>\n\n\n\n<p>Show a badge &#8220;Recommended&#8221; when the listing is featured.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;featured&quot; condition=&quot;is_not_empty&quot; badge=&quot;Recommended&quot; icon_class=&quot;fas fa-ribbon&quot; bg_color=&quot;#ef5f2e&quot; txt_color=&quot;#ffffff&quot;&#093;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-wOs5TGD9W6-851x1024.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Link for Integration with Listing Data<\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-none\">&#091;gd_post_badge key=&quot;phone&quot; condition=&quot;is_not_empty&quot; badge=&quot;&lt;a href=&#039;https:\/\/wa.me\/%%input%%&#039;&gt;Chat Now&lt;\/a&gt;&quot; bg_color=&quot;#9c03aa&quot; txt_color=&quot;#ffffff&quot; size=&quot;extra-large&quot; list_hide=&quot;3&quot; list_hide_secondary=&quot;2&quot;&#093;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The Post Badge widget\u00a0is used to\u00a0output a custom badge dependent on a specific custom field value. Widget Options Example Output For some examples, we can look at the default dummy data The shortcodes used in the Archive Item template are: Badge Placement with the &#8216;extra class&#8217; option These custom classes can be added to your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[597],"article\/categories":[213,422],"class_list":["post-751","gd_place","type-gd_place","status-publish","hentry","gd_place_tags-badge","gd_placecategory-extensions-features","gd_placecategory-core-widgets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=751"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/751\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=751"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=751"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}