Tema clásico 05: The Loop y listados mantenibles

Domina The Loop en plantillas clásicas para renderizar contenido dinámico con fallback, paginación y marcado limpio.

The Loop es el corazón de un tema clásico: determina qué contenido se pinta y en qué orden.

Si lo implementas de forma pobre, tendrás plantillas frágiles, HTML duplicado y dificultad para mantener listados complejos.

La clave es combinar estructura clara, template parts reutilizables y fallback cuando no hay resultados.

También debes controlar paginación y contexto para que archives, home y búsquedas tengan comportamiento coherente.

  • No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.
  • Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.
  • Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.
  • Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.
  • Control explícito de estado sin resultados.

Estructura correcta del loop

No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.

Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.

Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.

Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.

  • Control explícito de estado sin resultados.
  • Markup semántico por entrada (article, h2, enlace).
  • Sin lógica pesada dentro del loop.
  • Template parts para escalar en equipo.

Loop base para archive.php

Snippet listo para usar como base de listados de entradas.

Escalar el loop con template parts

Cuanto antes extraigas el bloque de tarjeta, menos retrabajo tendrás en futuras plantillas.

Mueve el HTML de cada post a template-parts/content.php y llámalo con get_template_part().

Así puedes reutilizar la misma tarjeta en home, archive y taxonomías cambiando solo contenedor o contexto.

Este patrón reduce inconsistencias visuales y facilita code review cuando hay varios desarrolladores.

WordPress Themes Pro
15

Tema clásico 05: The Loop y listados mantenibles

Domina The Loop en plantillas clásicas para renderizar contenido dinámico con fallback, paginación y marcado limpio.

Código del tema: paginate_links

📘 Teoría

Estructura correcta del loop

No es solo while(have_posts()): también importa cómo organizas el markup y los estados vacíos.

Empieza con comprobación de resultados; si no hay posts, muestra un bloque útil en lugar de dejar pantalla vacía.

Dentro del while, usa template tags para título, extracto, miniatura y permalink evitando consultas manuales innecesarias.

Cuando el diseño crece, extrae cada tarjeta de post a template-parts/content.php para reutilizar sin duplicar código.

  • Control explícito de estado sin resultados.
  • Markup semántico por entrada (article, h2, enlace).
  • Sin lógica pesada dentro del loop.
  • Template parts para escalar en equipo.

Loop base para archive.php

Snippet listo para usar como base de listados de entradas.

archive.php con fallback
<?php get_header(); ?>
<main id="primary" class="site-main">
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
      <article <?php post_class('post-card'); ?>>
        <h2 class="post-card__title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
        <div class="post-card__excerpt"><?php the_excerpt(); ?></div>
      </article>
    <?php endwhile; ?>

    <?php the_posts_pagination(); ?>
  <?php else : ?>
    <p><?php echo esc_html__('No hay entradas publicadas todavía.', 'mi-tema-clasico'); ?></p>
  <?php endif; ?>
</main>
<?php get_footer(); ?>

Escalar el loop con template parts

Cuanto antes extraigas el bloque de tarjeta, menos retrabajo tendrás en futuras plantillas.

1

Mueve el HTML de cada post a template-parts/content.php y llámalo con get_template_part().

2

Así puedes reutilizar la misma tarjeta en home, archive y taxonomías cambiando solo contenedor o contexto.

3

Este patrón reduce inconsistencias visuales y facilita code review cuando hay varios desarrolladores.

Uso de get_template_part en el loop
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php get_template_part('template-parts/content', get_post_type()); ?>
  <?php endwhile; ?>
<?php endif; ?>

🧪 Aprende probando

Ejemplo Ejemplo: estado vacío de búsqueda Plantilla simple para cuando una búsqueda no devuelve resultados.

🏁 Retos

Reto Reto: añadir paginación al listado Completa el loop para que archive.php no muestre todo en una sola página.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .