November 20, 2023

How to Add a “Verified” WordPress Query Loop Badge with ACF and CSS

Play Video

In this tutorial, we’re going to explore a clever method to selectively target items to add a WordPress query loop badge using custom taxonomies and CSS. This technique is particularly useful when you want to highlight specific items in a loop, such as showcasing verified or featured products, without affecting other items. This approach provides a flexible and powerful solution, allowing for customization and differentiation in your content display. Let’s explore how you can implement this technique effectively.

How to Add a Verified WordPress Query Loop Badge with ACF and CSS Preview


Please make sure you have the following installed and activated:

Creating a Custom Taxonomy with ACF

  1. Navigate to ACF > Taxonomies.
  2. Click on ‘Add New’.
    Navigate to ACF Taxonomies and click on 'Add New'
  3. Name your taxonomy for example ‘Origin’, with ‘Origins’ as the plural label.
    Name your taxonomy
  4. Toggle the “Hierarchical” option.
    Toggle the "Hierarchical" option
  5. Select the relevant post type (e.g., ‘deal’ in the example).
    Select the relevant post type
  6. Click ‘Save Changes’.

Adding Taxonomy Terms

  1. Navigate to your new taxonomy under the relevant post type (e.g., Deals > Origins).
  2. Add a new term, such as ‘internal’, to categorize your content.
    Add a new term
  3. Click ‘Add New Origin’.

Assigning Taxonomy to Items

  1. Navigate to the list of your post type (e.g., Deals > All Deals).
  2. Edit an item (e.g., ‘Agency Copilot’).
    Edit an item (e.g., 'Agency Copilot')
  3. In the Origins box, check the ‘internal’ option.
    In the Origins box, check the 'internal' option
  4. Click ‘Update’.

Implementing CSS for Targeted Styling

  1. Navigate to Customizer > Additional CSS.
    Navigate to Customizer > Additional CSS
  2. Inspect your webpage to identify the class added by the taxonomy (e.g., ‘origin-internal’).
  3. Copy the CSS below to target the class for specific styling. For instance:
    .origin-internal {
        position: relative;
    .origin-internal:after {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background-image: url('path_to_your_image');
        background-size: contain;
        top: 24px;
        right: 24px;

    Copy the CSS below to target the class for specific styling

  4. Adjust positioning and styling as needed and publish it.

Applying Taxonomy to Other Items

Repeat the process of assigning the ‘internal’ taxonomy to other items you wish to highlight or differentiate.
Assign the taxonomy easily via the Quick Edit

Tip: You can assign the taxonomy easily via the “Quick Edit” function.

Additional Links

WordPress Query Loop Badge – Conclusion

This method offers a flexible and creative way to highlight specific items in a WordPress query loop. By using custom taxonomies and CSS, you can easily create distinctive elements like verified badges or featured indicators. This approach can be adapted to various contexts, not just for special deals pages but also for blogs, product showcases, and more. Your imagination is the limit!

Required Resources

Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
How to Add a “Verified” WordPress Query Loop Badge with ACF and CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.