Siempre ha sido importante, pero cada vez lo será más (hazme caso) saber que el contenido de un artículo, ya sea técnico o de opinión, lo ha escrito una persona, y por eso tiene todo el sentido mostrar en la web, al final de los contenidos individuales, una pequeña caja informativa sobre el autor.

Para eso, por supuesto que hay plugins, incluso temas que lo incluyen en sus versiones de pago, y algunos incluso en las gratuitas, pero ¿para qué instalar un plugin, y mucho menos pagar por algo que puedes hacer tú fácilmente, solo con copiar y pegar?

Eso es lo que te propongo hoy: añadir una caja con la información del autor del contenido con una función PHP y varios estilos de CSS a elegir, para que apliques el que más te guste o encaje en tu web.

Índice de contenidos

Requisitos para que funcione

A ver, podría haber preparado el código para que siempre muestre algo, pero he pensado que no tiene sentido que se muestre una caja de información de un autor que no se ha tomado ni la más mínima molestia de…

Tener un gravatar personalizado.
Rellenar la información biográfica en su perfil de WordPress.

Por ello, el código solo mostrará la caja de información de autor si, al menos, el autor ha rellenado su bio.

El código gratis para mostrar la info de autor en WordPress

El código que hace la magia es este:

/**
* Añade una caja de información del autor al final de las entradas.
* Muestra el gravatar (si tiene), el nombre y la biografía del autor.
* Código publicado por Fernando Tellado en ayudawp.com
*/
function ayudawp_info_autor_automatica($content) {
if (is_single() && in_the_loop() && is_main_query()) {
$autor_id = get_the_author_meta('ID');
$bio = get_the_author_meta('description');

// Solo mostrar si el autor tiene biografía
if (!empty($bio)) {
$autor_nombre = get_the_author();
$gravatar = get_avatar($autor_id, 64, '', $autor_nombre, ['class' => 'ayudawp-autor-avatar']);

$autor_box = '<div class="ayudawp-autor-info">';
$autor_box .= '<div class="ayudawp-autor-avatar-wrap">' . $gravatar . '</div>';
$autor_box .= '<div class="ayudawp-autor-texto">';
$autor_box .= '<span>' . sprintf(esc_html__('Acerca de %s', 'textdomain'), esc_html($autor_nombre)) . '</span>';
$autor_box .= '<p>' . wp_kses_post($bio) . '</p>';
$autor_box .= '</div></div>';

$content .= $autor_box;
}
}

return $content;
}
add_filter('the_content', 'ayudawp_info_autor_automatica');

Qué hace este código

Muestra al final de las entradas individuales la información biográfica del autor.
Muestra el gravatar asociado al email con el que está registrado (si lo tuviera).
Solo se muestra si el autor ha rellenado su información biográfica.
¡Funciona!

Eso sí, como verás en la captura, no tiene estilos, pero funcionar funciona. Lo de los estilos lo aplicamos a continuación.

¿Cómo se añade el código?

Tú decides, las opciones son varias:

Archivo functions.php del tema (hijo) activo.
Como fragmento de código usando un plugin de snippets.
En tu propio plugin de personalizaciones.

¿Mi consejo?

En este caso, al ser algo agnóstico del tema elegiría o plugin de snippets o plugin personal.

Estilos chulos para la caja de información biográfica

A propósito, no he querido añadir estilos CSS directamente en el código, para que tengas todo el control, o sea, por un lado el código que hace que funcione, y aparte, usando el método que prefieras, añadir el CSS para personalizar el aspecto de la caja de información del autor.

Estilo clásico con borde

.ayudawp-autor-info {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-top: 2rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
}
.ayudawp-autor-texto h4 {
margin-top: 0;
font-weight: 600;
}

Estilo tarjeta blanca con sombra

.ayudawp-autor-info {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 2px solid #0073aa;
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
color: #0073aa;
}

Estilo minimalista (línea superior)

.ayudawp-autor-info {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-top: 2px solid #e0e0e0;
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
}
.ayudawp-autor-texto h4 {
margin: 0;
font-size: 1.1rem;
}

Estilo oscuro elegante

.ayudawp-autor-info {
display: flex;
gap: 1rem;
align-items: center;
background: #1e1e1e;
color: #e0e0e0;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 2px solid #444;
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
color: #fff;
}
.ayudawp-autor-texto p {
margin: 0;
color: #ccc;
}

Estilo destacado con fondo de color y contraste

.ayudawp-autor-info {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #0073aa 0%, #005177 100%);
color: #fff;
padding: 1.5rem;
border-radius: 12px;
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
}
.ayudawp-autor-texto p {
margin: 0;
color: #e6f7ff;
}

Estilo cristal esmerilado (glassmorphism)

Este estilo que añade efecto tipo transparencia es muy popular y quede muy chulo para todo tipo de elementos, como botones, tarjetas, y por supuesto también tiene sentido para una caja como esta. Eso sí, como depende mucho la visibilidad del efecto según el fondo de la página, te pongo 3 variaciones. De nada 🙂

Para fondos claros

Se ve bien sobre fondos blancos o grises, mantiene la sensación de cristal, pero se ve el texto.

.ayudawp-autor-info {
display: flex;
gap: 1rem;
align-items: center;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border-radius: 12px;
padding: 1.5rem;
color: #222;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.15);
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
color: #111;
}
.ayudawp-autor-texto p {
margin: 0;
color: #333;
}

Oscuro, para fondos de color

Ideal para webs con fondo oscuro o imágenes grandes en el la sección principal a toda pantalla o cabecera.

.ayudawp-autor-info {
display: flex;
gap: 1rem;
align-items: center;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border-radius: 12px;
padding: 1.5rem;
color: #f1f1f1;
margin-top: 2rem;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
color: #fff;
}
.ayudawp-autor-texto p {
margin: 0;
opacity: 0.9;
}

Uso mixto, con sombras internas

Este vale para todo:

Contraste visual: el fondo tiene un leve degradado con mix-blend-mode: overlay para que cambie sutilmente según lo que haya debajo.
Sombra ligera + brillo interno: se separa mejor del fondo blanco y sigue viéndose vidrioso sobre fondos oscuros.
Avatar con halo: pequeño box-shadow que lo destaca sin romper el efecto cristal.
Textos con sombra blanca suave: mejora mucho la lectura sobre tonos medios o fondos complejos.

.ayudawp-autor-info {
display: flex;
gap: 1rem;
align-items: center;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-radius: 14px;
padding: 1.5rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
color: #1a1a1a;
margin-top: 2rem;
position: relative;
overflow: hidden;
}
.ayudawp-autor-info::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,115,170,0.1) 0%, rgba(255,255,255,0.2) 100%);
pointer-events: none;
mix-blend-mode: overlay;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.ayudawp-autor-texto h4 {
margin: 0 0 0.5rem;
color: #000;
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}
.ayudawp-autor-texto p {
margin: 0;
color: #111;
text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

Aquí tienes las capturas de las tres variaciones:

caja bio glassmorphism fondos claros — Glassmorphism fondos claros

caja bio glassmorphism fondos oscuros — Glassmorphism fondos oscuros

caja bio glassmorphism adaptable — Glassmorphism mixto adaptable

Estilo aviso de WordPress con borde azul

Aquí me he venido arriba y me puse en modo friki güorpresista a tope 😀

.ayudawp-autor-info {
display: flex;
gap: 1rem;
align-items: flex-start;
background: #f6f6f6;
border-left: 4px solid #0073aa;
padding: 1.5rem;
margin-top: 2rem;
border-radius: 8px;
}
.ayudawp-autor-avatar-wrap img {
border-radius: 50%;
}
.ayudawp-autor-texto h4 {
margin-top: 0;
}

¿Cómo se añade el CSS que más me guste?

De nuevo, hay varias posibilidades:

En la hoja de estilos del tema (hijo).
En la sección de CSS adicional del personalizador de WordPress (tema clásico).
En la sección de CSS adicional del editor estilos del sitio (tema de bloques).

¿Mi consejo?

Como CSS adicional, así no dependes del tema.

¿Te ha gustado?, ¿te planteas añadirlo en vez de usar un plugin? Me encantaría que me cuentes tu opinión en los comentarios, aunque sea contraria, y así aprendemos todos 🙂