Mostrar categorías con descripción en entradas WordPress

Cuando ingresas al detalle de una entrada usualmente se muestran la categoría o categorías a la que pertenece, sin embargo no se incluye la descripción de la categoría, en este artículo veremos como agregar las categorías y su descripción al ver el detalle de una entrada.

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:

Código para mostrar la descripción de las categorías de la entrada

Puedes agregar el siguiente código como parte del archivo functions.php de tu tema hijo o usando algún plugin de Snippets.

add_filter('the_content', 'add_categories_with_description');

function add_categories_with_description($content){
    if (is_single()) {
        $categories = get_the_category();

        $html = '<div class="categories-data">';

        foreach ($categories as $category) {
            $link_category = esc_url(get_category_link($category->cat_ID));
            $html_link_category = "<a href='$link_category' title='$category->name'> $category->name </a>";

            $html .= "<div class='category-data'>";
            $html .= $html_link_category;

            if ($category->category_description) {
                $html .= "<div class='category-des'> $category->category_description </div>";
            }

            $html .= "</div>";
        }

        $html .= "</div>";

        return $content . $html;
    }

    return $content;
}

En el código anterior:

Usamos el filtro the_content que hace referencia a la función add_categories_with_description().
Comprobamos que el código agregado sólo sea para entradas con la función is_single().
Si la condición no se cumple simplemente retornamos el $content sin modificaciones.
Obtenemos todas las categorías de la entrada actual con la función get_the_category().
Recorremos los datos obtenidos de las categorías en un bucle y creamos el HTML en la variable $html.
Finalmente concatenamos el $content con el HTML creado.

Agregando estilos CSS

En la estructura HTML creada para mostrar las categorías se agregaron algunas clases CSS que sirven de base para dar estilos CSS y mejorar el aspecto visual de las categorías y su descripción.

.categories-data {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.categories-data .category-data {
    border: 1px solid #ccc;
    padding: 10px 20px 16px;
}

.categories-data .category-des {
    margin-top: 5px;
}

Conclusión

WordPress a través de los Hooks de filtro permiten agregar elementos al final del contenido, en este caso hemos visto como agregar el título de la categoría y su descripción directamente a través de código.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores: