GD > Post Badge

All Widgets come as Widgets, Shortcodes or Blocks. Learn more about our Super Duper Widgets.

The Post Badge widget is used to output a custom badge dependent on a specific custom field value.

If you need to output more than just a badge dependent on the value of a custom field then you can use the GD > Dynamic Content widget.

Widget Options

Some settings for this widget are advanced settings, reveal them by clicking the button next to save.

Post ID - 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.
Field Key - Selecting the custom field key to use as the conditional field. Standard field values are also available here such as post_date.
Field condition - This is the condition to use for the field value. You can match it to an exact value or simply use "is no empty" to show if a value is set. Many comparison types are available.
Value to match - If a comparison condition is used that requires a matching value then this is where you can enter a matching value. For post date enter value like +7 or -7.
Icon class - You can show a font-awesome icon in the badge by entering the icon class. E.g "fas fa-award"
Badge - 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%%.
Link URL - 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.
Open link in new window - This will make the link open in a new tab/window.
Badge background color - Color for the badge background.
Badge text color - Color for the badge text.
Badge size - Set the size of the badge.
Alignment - How the item should be positioned on the page.

Example Output

For some examples, we can look at the default dummy data

The shortcodes used in the Archive Item template are:

[gd_post_badge key='post_date' condition='is_less_than' search='+30' icon_class='fas fa-certificate' badge='New' bg_color='#ff0000' txt_color='#ffffff' alignment='left']<br>[gd_post_badge key='facebook' condition='is_not_empty' icon_class='fab fa-facebook-f fa-fw' link='%%input%%' new_window='1' bg_color='#2b4be8' txt_color='#ffffff' alignment='left']<br>[gd_post_badge key='twitter' condition='is_not_empty' icon_class='fab fa-twitter fa-fw' link='%%input%%' new_window='1' bg_color='#2bb8e8' txt_color='#ffffff' alignment='left']<br>[gd_post_badge key='website' condition='is_not_empty' icon_class='fas fa-link fa-fw' link='%%input%%' new_window='1' bg_color='#85a9b5' txt_color='#ffffff' alignment='left']

Badge Placement with the 'extra class' option

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.

[gd_archive_item_section type='open' position='left']
[gd_post_badge key='featured' condition='is_not_empty' badge='FEATURED' bg_color='#fd4700' txt_color='#ffffff' css_class='gd-ab-top-left-angle gd-badge-shadow']
[gd_post_images type='image' ajax_load='true' link_to='post' types='logo,post_images']
[gd_archive_item_section type='close' position='left']

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.

shadow // gd-badge-shadow // adds a shadow to the badge 
top left // gd-ab-top-left // positions absolute top
absolute left // gd-ab-top-left-angle // positions absolute top
absolute left, at an angle // gd-ab-top-right // positions absolute top
absolute right // gd-ab-top-right-angle // positions absolute top
absolute right, at an angle // gd-ab-bottom-left // positions absolute bottom
absolute left // gd-ab-bottom-left-angle // positions absolute bottom
absolute left, at an angle // gd-ab-bottom-right // positions absolute bottom
absolute bottom right, at an angle // gd-ab-bottom-right-angle // positions absolute bottom
interactive video and files // gd-lity  // adds interactivity – launching a video link in a lightbox, for example

Examples of positioning

Featured in the upper left

[gd_post_badge key="featured" condition="is_not_empty" badge="Featured" bg_color="#0073aa" txt_color="#ffffff" css_class="gd-ab-top-left"]

Default category in the lower left

[gd_post_badge key="default_category" condition="is_not_empty" badge="%%default_category%%" bg_color="#0073aa" txt_color="#ffffff" css_class="gd-ab-bottom-left"]

Examples

Taxonomy Badges

Examples for showing a badge based on categories

Default Category

[gd_post_badge key="default_category" condition="is_not_empty" badge="%%default_category%%" bg_color="#0073aa" txt_color="#ffffff" css_class="gd-ab-bottom-left"]

Specific Category

[gd_post_badge key="post_category" condition="is_contains" search="32" badge="Attractions" bg_color="#0073aa" txt_color="#ffffff"]

[gd_post_badge key="post_category" condition="is_contains" search="32,33" badge="Attractions / Hotels" bg_color="#0073aa" txt_color="#ffffff"]

Examples for showing a badge based on tags.

[gd_post_badge key="post_tags" condition="is_contains" search="Museum" badge="Museum" bg_color="#0073aa" txt_color="#ffffff"]

[gd_post_badge key="post_tags" condition="is_contains" search="Museum,Garden" badge="Museum / Garden" bg_color="#0073aa" txt_color="#ffffff"]

Example – HTML Image Badge

HTML can be used in the badge param. Make sure to enclose the HTML with ” (quotes” and then use ‘ (apostrophe) for inner HTML.

[gd_post_badge key="my_custom_field" condition="is_not_empty" badge="<img src='https://mysite.com/wp-content/uploads/2020/02/pbjt.jpg'/>" bg_color="#ffffff" txt_color="#ffffff"]

Date in a badge

Using ‘post_modified’ to show the date of last update or “Recently Updated” post_modified is the date that a listing was most recently updated.

If you create a badge and use %%input%% for the badge, post_modified will show as a date.

To show “Recently Updated!” if a post was updated in the last 30 days use:

[gd_post_badge key='post_modified' condition='is_less_than' search='+30′ icon_class='fas fa-certificate' badge='Recently Updated!' bg_color='#ff0000′ txt_color='#ffffff' alignment='left']

Here is a ‘New’ 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.

[gd_post_badge key="post_date" condition="is_less_than" search="+30" badge="NEW" bg_color="#0073aa" txt_color="#ffffff"]

Write a Review Button

Link to a tab in the GD Single Tabs easily.

[gd_post_badge key="post_title" condition="is_not_empty" badge="Write a Review" bg_color="#0073aa" txt_color="#ffffff" link="%%post_url%%#reviews"]

Custom Website Link Badge

[gd_post_badge key="website" condition="is_not_empty" badge="Awesome Super Link" link="%%input%%" bg_color="#9c03aa" txt_color="#ffffff" size="extra-large" list_hide="3" list_hide_secondary="2"]

Verified Listing Badge

Show a badge "Verified" when the listing is claimed.

[gd_post_badge key="claimed" condition="is_not_empty" badge='<i class="fas fa-check-circle"></i>Verified' bg_color="#ff8040" txt_color="#ffffff" size="small" alignment="right" css_class="verified"]

Featured

Show a badge "Recommended" when the listing is featured.

[gd_post_badge key="featured" condition="is_not_empty" badge="Recommended" icon_class="fas fa-ribbon" bg_color="#ef5f2e" txt_color="#ffffff"]

Custom Link for Integration with Listing Data

[gd_post_badge key="phone" condition="is_not_empty" badge="<a href='https://wa.me/%%input%%'>Chat Now</a>" bg_color="#9c03aa" txt_color="#ffffff" size="extra-large" list_hide="3" list_hide_secondary="2"]