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.

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.

gd-badge-shadow // adds a shadow to the badge 
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 right gd-ab-bottom-right-angle // positions absolute bottom
absolute right, at an angle gd-lity  // adds interactivity – launching a video link in a lightbox, for example

Examples

Taxonomy Badges

Examples for showing a badge based on categories

[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']

Read More Button

Use an alternative to the GD Post Content Read More option.

[gd_post_badge key="post_title" condition="is_not_empty" badge="Read More" link="%%post_url%%" bg_color="#ffffff" txt_color="#433aed" alignment="center"]

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"]

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"]

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us