Add Classes to Categories Dynamically WordPress
- SOLVED
Hello everyone,
I want to be able to color code categories. I've hunted around, and I can't find any solution that would allow me to generate a specific class to each WP category that is created. Preferably, the css would be "category-nicename", nicename being the pretty slug of the category.
Can this be done? Really I would just like it to somehow work for categories outputted through the_category();
Alternately, if there is another way to color code categories without having to hard-code in CSS classes to each individual category, I'm open to suggestions!
Thomas
Answers (3)
Denzel Chia answers:
Hi,
Why don't you use WordPress body class?
http://codex.wordpress.org/Function_Reference/body_class
<body <?php body_class($class); ?>>
Than put your style codes in your theme css file.
Thanks.
Denzel
Thomas Griffin comments:
I don't need to style individual posts. The body_class function is not specific enough for me because multiple categories are being used on the same page. I need to be able to style each category link with a different color, and the body_class function simply won't work with more than one category used for a post.
<a href="http://yourdomain.com/category/business/" title="View all posts in Business" rel="category tag">Business</a>
Above is exactly what the_category function puts out. However, I need a class added to that, something like this below:
<a class="category-business" href="http://yourdomain.com/category/business/" title="View all posts in Business" rel="category tag">Business</a>
Notice how the class is added to the individual category that has been outputted. That's what I need to have happen. :)
Denzel Chia comments:
Hi,
the_category() function actually calls, get_the_category_list() function,
both can be found in wp-includes/category-template.php
So I modified get_the_category_list() to get_my_category_list()
including category nicename as your css class.
Please put below in functions.php
function get_my_category_list( $separator = '', $parents='', $post_id = false ) {
global $wp_rewrite;
$categories = get_the_category( $post_id );
if ( !is_object_in_taxonomy( get_post_type( $post_id ), 'category' ) )
return apply_filters( 'the_category', '', $separator, $parents );
if ( empty( $categories ) )
return apply_filters( 'the_category', __( 'Uncategorized' ), $separator, $parents );
$rel = ( is_object( $wp_rewrite ) && $wp_rewrite->using_permalinks() ) ? 'rel="category tag"' : 'rel="category"';
$thelist = '';
if ( '' == $separator ) {
$thelist .= '<ul class="post-categories">';
foreach ( $categories as $category ) {
$thelist .= "\n\t<li>";
switch ( strtolower( $parents ) ) {
case 'multiple':
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, true, $separator );
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a></li>';
break;
case 'single':
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>';
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, false, $separator );
$thelist .= $category->name.'</a></li>';
break;
case '':
default:
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a></li>';
}
}
$thelist .= '</ul>';
} else {
$i = 0;
foreach ( $categories as $category ) {
if ( 0 < $i )
$thelist .= $separator;
switch ( strtolower( $parents ) ) {
case 'multiple':
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, true, $separator );
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a>';
break;
case 'single':
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>';
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, false, $separator );
$thelist .= "$category->name</a>";
break;
case '':
default:
$thelist .= '<a class="'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a>';
}
++$i;
}
}
return apply_filters( 'the_category', $thelist, $separator, $parents );
}
So instead of using the_category(), use the following.
$cat_list = get_my_category_list();
echo $cat_list;
Additional parameters are the same as the_category()
Thanks.
Denzel
Denzel Chia comments:
Hi,
updated the function to class="category-business" instead of class="business"
<?php
function get_my_category_list( $separator = '', $parents='', $post_id = false ) {
global $wp_rewrite;
$categories = get_the_category( $post_id );
if ( !is_object_in_taxonomy( get_post_type( $post_id ), 'category' ) )
return apply_filters( 'the_category', '', $separator, $parents );
if ( empty( $categories ) )
return apply_filters( 'the_category', __( 'Uncategorized' ), $separator, $parents );
$rel = ( is_object( $wp_rewrite ) && $wp_rewrite->using_permalinks() ) ? 'rel="category tag"' : 'rel="category"';
$thelist = '';
if ( '' == $separator ) {
$thelist .= '<ul class="post-categories">';
foreach ( $categories as $category ) {
$thelist .= "\n\t<li>";
switch ( strtolower( $parents ) ) {
case 'multiple':
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, true, $separator );
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a></li>';
break;
case 'single':
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>';
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, false, $separator );
$thelist .= $category->name.'</a></li>';
break;
case '':
default:
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a></li>';
}
}
$thelist .= '</ul>';
} else {
$i = 0;
foreach ( $categories as $category ) {
if ( 0 < $i )
$thelist .= $separator;
switch ( strtolower( $parents ) ) {
case 'multiple':
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, true, $separator );
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a>';
break;
case 'single':
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>';
if ( $category->parent )
$thelist .= get_category_parents( $category->parent, false, $separator );
$thelist .= "$category->name</a>";
break;
case '':
default:
$thelist .= '<a class="category-'.$category->category_nicename.'" href="' . get_category_link( $category->term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '" ' . $rel . '>' . $category->name.'</a>';
}
++$i;
}
}
return apply_filters( 'the_category', $thelist, $separator, $parents );
}
?>
Same usage.
Thanks.
Denzel
Thomas Griffin comments:
Perfect! Thanks :)
Just Me answers:
How many categories, how many colors are you talking about? How will the program know which color goes with what category? Do you want it to adjust dynamically. Let say you add another category, would that require adjusting code or should the system know what color to use right away?
senlin answers:
You can add the category ID to your body and post classes and then style it further with CSS. Add the following function to your functions.php and you will see the additional category IDs in both the body class and the post class.
// category id in body and post class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes [] = 'cat-' . $category->cat_ID . '-id';
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');