Want to have colored categories in your WordPress site, just like I have here? Follow me in these simple steps!
Requirements: access to template files, basic ability of editing PHP for the necessary customization.
Disclaimer: as far as I know, there is no free theme for WordPress with native support for coloured categories. I report here an example on how to modify a theme to include this feature; while the usage of the new field defined by the plugin should be the same, different themes may require custom modifications.
1. Install the Colourful Categories plugin. Use the plugin documentation to assign colors to categories.
2. To show colors in the Categories box, add a filter in wp-content/themes/themename/functions.php:
add_filter('wp_list_categories', 'cat_count_span_inline');
function cat_count_span_inline($output) {
$colors = get_option('category_colors', array());
preg_match_all('/>([^<]+)<\/a>/', $output, $catnames);
foreach($catnames[1] as $cat) {
$category = get_term_by('name', $cat, 'category');
$color = $colors[$category->term_id];
$output = str_replace('>'.$cat.'',' style="color: '.$color.'; font-weight: bold; padding-left: 5px; border-left: 6px '.$color.' solid;">'.$cat.'',$output);
}
return $output;
}
3. To show colors and category name above the post title, add the lines shown in bold inside wp-content/themes/themename/loop.php:
...
<div class="loop-section">
<?php
$category = get_the_category();
$color = $colors[$category[0]->term_id]; ?>
<div style="font-weight: bold; padding-bottom: 3px;
border-bottom: 2px <?php echo $color; ?> solid;">
<a href="<?php echo esc_url( get_category_link( $category[0]->term_id ) );?>"
rel="bookmark"
title="<?php echo $category[0]->name; ?>"
style="color: <?php echo $color; ?>; text-decoration: none;"><?php
echo $category[0]->name; ?></a>
</div>
<div id="post-<?php the_ID() ?>" <?php post_class() ?>>
<div class="loop-post-title">
...