Using Custom Taxonomies and CSS to Target Specific Items in a Query Loop

While building out a Black Friday deals page this week, I ran into a challenge: I needed to highlight specific items inside a Query Loop without affecting all the items. If you’ve worked with Query Loops before, you know that anything you add to the loop applies to every item displayed.

To solve this problem, I used a custom taxonomy combined with a bit of CSS. This solution is quick to implement, provides a lot of flexibility, and can be adapted for various use cases. In this post, I’ll walk you through the exact situation I faced and the steps I took to solve it.

The Problem

On my Black Friday deals page, I had three separate Query Loops:

• Gold placements
• Silver placements
• Bronze placements

Each loop displayed a set of deals, and I wanted to highlight the products I created by adding a small verified badge in the top-right corner of those items.

The challenge was that Query Loops repeat the same structure for every item, so there’s no way to add an icon to just specific items without affecting all of them.

The Solution

To target specific items, I used a custom taxonomy to assign a unique class to those items. Then, I wrote CSS to style only the items with that class.

Step 1: Create a Custom Taxonomy

First, I created a custom taxonomy using Advanced Custom Fields (ACF). You can use the free version of ACF for this.

1. Add a New Taxonomy:
   • In the WordPress admin, hover over ACF and click Taxonomies.
   • Click Add New and name the taxonomy (e.g., “Origin”).
   • Set the plural label to “Origins” and the singular label to “Origin.”
2. Configure the Taxonomy:
   • Enable the checkbox option for easier selection.
   • Assign the taxonomy to the relevant post type (in my case, a custom post type called “Deals”).
3. Save Changes:
   • Click Save Changes to create the taxonomy.

Step 2: Add Taxonomy Terms

Next, I added terms to the taxonomy.

1. Go to the Taxonomy:
   • Under the “Deals” post type, click on the new “Origins” taxonomy.
2. Add Terms:
   • Create a term called “Internal” to represent products I created.
   • Optionally, add other terms like “External” for products from other sources.

Step 3: Assign the Taxonomy to Posts

To apply the taxonomy to specific posts:

1. Edit Posts:
   • Go to All Deals and edit the posts you want to highlight.
   • In the post editor, check the “Internal” box under the “Origins” taxonomy.
2. Save Changes:
   • Update the posts to apply the taxonomy.

Step 4: Inspect the Front End

At this point, there won’t be any visible changes on the front end. However, if you inspect the page using your browser’s developer tools, you’ll see that the taxonomy has added a new class to the relevant items.

For example:

• The post with the “Internal” taxonomy will have a class like origin-internal.
• Posts without the taxonomy won’t have this class.

Step 5: Write CSS

Now that the taxonomy is adding a unique class to the items, we can use CSS to style them.

1. Open the Customizer:
   • Go to Appearance > Customize and open the Additional CSS section.
2. Target the Class:
   • Write CSS to target the origin-internal class.
   • Start by adding a temporary outline to confirm you’re targeting the correct items:

css

.origin-internal {
  outline: 1px solid red;
}

Once confirmed, you can style the items as needed.

Adding the Verified Badge

To add the verified badge, I used a pseudo-element and positioned it in the top-right corner of the item.

1. Set Positioning:
   • Add position: relative to the parent container:

css

.origin-internal {
  position: relative;
}

2. Create the Pseudo-Element:
   • Use the ::after pseudo-element to add the badge:

css

.origin-internal::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url('URL_TO_YOUR_IMAGE');
  background-size: contain;
  top: 24px;
  right: 24px;
}

This positions the badge in the top-right corner of the item.

Step 6: Apply the Taxonomy to Other Posts

To highlight additional posts, simply assign the “Internal” taxonomy to them.

1. Quick Edit:
   • Use the Quick Edit option in the post list to quickly apply the taxonomy to multiple posts.
2. Save Changes:
   • Update the posts and refresh the front end.

Now, all posts with the “Internal” taxonomy will display the verified badge.

Step 7: Add Context

To clarify the meaning of the badge, I added a note at the bottom of the page:

“The verified icon indicates an official Admin Bar product.”

This helps users understand the significance of the badge.

Other Use Cases

This system isn’t limited to Black Friday deals pages. Here are a few other ways you could use it:

• Featured Blog Posts: Highlight specific articles by tagging them with a custom taxonomy and styling them differently.
• Promoted Products: Add badges or special styling to products you want to promote.
• Custom Layouts: Use taxonomy-based classes to create unique layouts for certain posts.

The possibilities are endless, and the only limitation is your imagination.

Wrapping Up

Using a custom taxonomy and CSS to target specific items in a Query Loop is a powerful and flexible solution. It allows you to highlight or style individual items without affecting the rest of the loop.

If you try this method, I’d love to see how you use it in your projects. Feel free to share a link—I always enjoy seeing these techniques in action!

Happy designing!