Dynamic styling for categories in Oxygen repeater (jQuery method)

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