Dynamic styling for categories in Oxygen repeater (jQuery method)

If you use the Oxygen repeater element to query post categories then you may have wondered how to style these categories individually - here's how using jQuery!

The basics

I would like to start off by saying although this is my preferred method over the modifying core code method I explored, this is still a very hack-y method but is extremely easy to execute. This is why it is what I use on this very site when I query categories in a repeater.

Essentially the basic jQuery code looks like this:

jQuery(".{REPEATER-CLASS} span a:contains({CATEGORY})").addClass("category-{CATEGORY}");

Disclaimer: The way this code works is that it looks for a word, i.e. the selected category, in a list of spans with links within your assigned class selector. I have NOT tested this for when there are similar words in categories (for example the word "solutions" for categories called "web solutions" and "data solutions").

Use-case example

You have a blog post and selected "Oxygen" as the category. You query the blog post title and category in a repeater and you wish to style each category text differently in the post list. The above jQuery code will create and assign a class called "category-oxygen" for the corresponding query result, which you can then style using CSS.

The steps

i) Copy and paste the below code in a code block (in the JavaScript section of course), or a code snippets plugin, or even your own custom code plugin.

jQuery(".{REPEATER-CLASS} span a:contains({CATEGORY})").addClass("category-{CATEGORY}");

ii) Replace "{REPEATER-CLASS}" with whatever the class name is of the category queried text. In my case, the class name is "repeater__categories".

iii) Replace both "{CATEGORY}" with the category you selected in the blog post. In my case, I simply replaced the text with "oxygen".

iv) Repeat as required for every category.

v) Add custom CSS code to style your newly created selector in a code block, or a code snippets plugin, or even your own custom code plugin.

You are done!

My code looks like this for the Oxygen example:

jQuery:

jQuery(".repeater__categories span a:contains(Oxygen)").addClass("oxygen");

CSS:

.oxygen {
  background: #f0defd;
  color: #000000;
}

Want to be notified of new posts like this?

Sign up to be notified of new posts using the form below. Email addresses are used for the sole purpose of sending once-in-a-while email notifications and nothing else. I promise I don't spam!