categories - How to change category labels in different colors?

admin管理员组

文章数量:1122846

I want to change category labels colors on every item in my blog list and also in every single post depending on the category. Also want to change background colors of the items for every category. Does it possible to make this with JS or Jquery? Also, I use theme with ajax pagination and navigation, so I need this function to be triggered every time new item is loaded or single post is opened.

I want to change category labels colors on every item in my blog list and also in every single post depending on the category. Also want to change background colors of the items for every category. Does it possible to make this with JS or Jquery? Also, I use theme with ajax pagination and navigation, so I need this function to be triggered every time new item is loaded or single post is opened.

• categories
• labels

Share Improve this question asked Jun 27, 2019 at 7:47 Georgi PehlivanovGeorgi Pehlivanov 2344 bronze badges 5

• It's probably easiest to add a class to the container around the post or list item and then set up CSS to set up colours based on those classes. If your AJAX pagination loads items as HTML from a server side template then it should get these classes automatically, else you'll need to edit them into the client side template you use to process the AJAX result, and it should all just work. – Rup Commented Jun 27, 2019 at 9:43
• How to add classes dynamically based on the category? – Georgi Pehlivanov Commented Jun 27, 2019 at 9:56
• It depends where you're doing it, but I'd guess you need to do it in PHP in your theme. Maybe write a helper function in functions.php that looks at the current post's categories and returns a CSS class as a string, and then it should be easy enough to edit that into your theme's template at the right place. – Rup Commented Jun 27, 2019 at 9:59
• Can you help me with some example code for such PHP function, please! Something to looks for current post category and add css class to some element. I need a basic example to find out how to tailor the function to my theme. – Georgi Pehlivanov Commented Jun 27, 2019 at 10:09
• 1 I add this to category label class name in the template and now I have unique class styles for every category! <?php foreach((get_the_category()) as $category) { echo $category->slug . '-color'; } ?> – Georgi Pehlivanov Commented Jun 27, 2019 at 14:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Here's an easy way to add the appropriate class to each category label.

function custom_the_content( $content ) {
    
$search = ['<a href="link1">First category name</a> ', '<a href="link2">Second category name</a>'];

$replace = ['<a class="class1" href="link1">First category name</a> ', '<a class="class2" href="link2">Second category name</a> ',];
 
return str_replace($search, $replace, $content);    

}

add_filter('the_content', 'custom_the_content');

Thanks to the use of an array, you can get several strings of characters at once and add a class to each string. The code comes from here: https://dev21.pl/jak-dodac-inny-kolor-do-kazdej-kategorii/#jak-dodac-inny-kolor-do-kazdej-kategorii-caly-kod-do-skopiowania and there you also have an additional explanation of the code, in case something is not understandable

本文标签： categoriesHow to change category labels in different colors