Wednesday, September 14, 2022
The Great Tit
Updated: 14. 9. 2022, Added: 14. 9. 2022

Sticky Post badge in Oxygen builder Repeater

If you want to display badge over your posts displayed within Oxygen Builder Repeater element in WordPress, than I hope I have a solution for you.

Set the post to be sticky (featured) in the Gutenberg editor:

Add Sticky (Featured) post badge to repeater

Add a div to your post container inside the repeater. Then put the text element inside with your badge text. Add a classes and style it. Here is how my green badge should look like:

The DIV (#43) is first Div in repeater - the .post-card
Post card with featured badge

It has been done with this css:

.post-card {
     position: relative;
}
.badge {
     position:absolute;
     top:0px;
     left:0px;
}
.badge .featured {
     background:green;
     width:40px;
     height:40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

Add a conditional with PHP Function Return value:

is_sticky() function inside PHP Function return value

Set the conditional to display only when it's not blank:

Conditional settings in Oxygen Builder

You are done. Your badge will automatically display on featured posts in repeater.

Posts repeater with featured posts badge
Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram