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

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.

Prerequisites

Please make sure you have the following installed and activated:

• Advanced Custom Fields (ACF)
• A custom post type, if applicable (e.g., ‘deal’ in the given example)

Creating a Custom Taxonomy with ACF

1. Navigate to ACF > Taxonomies.
2. Click on ‘Add New’.
   
3. Name your taxonomy for example ‘Origin’, with ‘Origins’ as the plural label.
   
4. Toggle the “Hierarchical” option.
   
5. Select the relevant post type (e.g., ‘deal’ in the example).
   
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.
   
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’).
   
3. In the Origins box, check the ‘internal’ option.
   
4. Click ‘Update’.

Implementing CSS for Targeted Styling

1. 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;
   }
   

   

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.

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

Additional Links

• ACF Documentation

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!