Clases y estilo distinto para cada categoría en WordPress

Como hemos podido ver en muchos post de esta misma web, WordPress nos permite prácticamente todas las configuraciones posibles para nuestro sitio. Tanto a la hora de programar nuevas funcionalidades como cuando queremos personalizar nuestra web, existen posibilidades casi infinitas para hacerlo si sabemos como.

En este post nos centraremos en la parte de la personalización haciendo que podamos aplicar un estilo distinto a la hora de mostrar cada categoría. Existen plugins que nos permiten asociar un color a una categoría que se muestra en el sidebar de nuestro tema pero si lo que necesitamos es hacerlo sobre las categorías que se muestran encima o debajo de los post es mejor prescindir de un plugin y añadir a nuestro WordPress el código necesario para tener esta opción. A continuación, vamos a ver cómo lo que hay que hacer si queremos que cada categoría pertenezca a una clase y así poder aplicarle un estilo único para cada una.

Pasos para que cada categoría pertenezca a una clase

 El primer paso será añadir un filtro a nuestro archivo functions.php del theme que estemos utilizando para que cada vez que genere una categoría le asigne el nombre de la clase :

add_filter('wp_list_categories', 'add_slug_class_wp_list_categories');
function add_slug_class_wp_list_categories($list) {

    $cats = get_categories('hide_empty=0');
    foreach($cats as $cat) {
        $find = 'cat-item-' . $cat->term_id . '"';
        $replace = 'cat-item-' . $cat->slug . ' cat-item-' . $cat->term_id . '"';
        $list = str_replace( $find, $replace, $list );
        $find = 'cat-item-' . $cat->term_id . ' ';
        $replace = 'cat-item-' . $cat->slug . ' cat-item-' . $cat->term_id . ' ';
        $list = str_replace( $find, $replace, $list );
    }

    return $list;
}

 Ahora, dependiendo de donde genere la categoría de cada post nuestro theme (generalmente single.php o template-tags.php en otras ocasiones) y reemplazaremos la llamada de la categoría ( viene indicada por the_category o similar) por el siguiente código:

<?php 
    $sep = '';
    foreach ((get_the_category()) as $cat) {
        echo $sep . '<a href="' . get_category_link($cat->term_id) . '"  class="' . $cat->slug . '" title="Ver todos los post de'. esc_attr($cat->name) . '">' . $cat->cat_name . '</a>';
        $sep = ', ';
    }
?>

Este último código se encarga de crear una etiqueta <a> con la clase correspondiente al nombre gracias a lo que hemos hecho en el paso anterior.

 Finalmente tras haber realizado los pasos anteriores, tendremos en nuestra web algo similar al siguiente código:

<a href="https://pc-solucion.es/category/otros/internet/" class="internet" title="Ver todos los post de Internet">Internet</a>

En él podemos ver que disponemos de una clase única a la que podemos hacer referencia en nuestro CSS y editarla a nuestro gusto incluso añadiendo un icono como hemos hecho en este ejemplo:

.programas-windows {
	background-image: url('https://pc-solucion.es/iconos/aplicaciones.svg');
	background-repeat:no-repeat;
}

Dejamos en tu mano la personalización y esperamos que te hayan servido estas indicaciones.