Cómo Crear Plantillas Personalizadas para Custom Post Types (CPT) en WordPress sin Plugins

Sin querer este tipo de artículos se está volviendo una saga de tutoriales sobre WordPress Avanzado, así que le daremos la seriedad que requiere crear contenido enfocado sobre algo que estamos construyendo con todo lo publicado paso a paso, y que aseguro no te perderás en nada y aprenderás mucho. 🤓

Hasta ahora hemos visto una serie de artículos de forma progresiva, cómo:

1. Cómo crear un Child Theme o Tema Hijo desde Cero
2. Cómo crear un Custom Post Type sin plugins
3. Cómo crear Taxonomías personalizadas para un CPT
4. [Estás aquí] Crear plantillas personalizadas para tu CPT

Todo lo estamos haciendo en nuestro subdominio:

https://lab.carlosjulian.mx/

Paso 1: Requisitos Previos para Crear Plantillas

Por si estás siguiendo la saga de WordPress Avanzado, te sugiero que al menos tengamos creados 5 manuales con su respectiva temáticas, para que podamos apreciarlo mucho mejor con los ejemplos que estaremos haciendo, no se requiere que tenga información detallada, es solo para que tengamos pruebas, así que podemos llenar la información incluso con un poco de IA generativa. 😅

Te muestro como tengo mis manuales:

Los nombres de los manuales, son nombres de mascotas que tengo, tú puedes elegir el nombre que quieras.

Introducción: Creando las plantillas

Ya creamos nuestro Custom Post Type “Manuales” y le añadimos una taxonomía personalizada llamada “Temáticas”. Ahora es momento de darle estilo y estructura propia, porque de nada sirve tener contenido potente si se ve igual que un post tradicional.

Este artículo es el cuarto en nuestra serie de WordPress Avanzado y aquí aprenderás cómo:

• Crear la plantilla para los detalles de un manual (single-manuales.php)
• Crear la plantilla del archivo general de manuales (archive-manuales.php)
• Crear la plantilla para la taxonomía Temáticas (taxonomy-tematicas.php)

Todo esto lo haremos desde nuestro tema hijo, sin tocar la plantilla principal, manteniendo así las buenas prácticas de desarrollo.

¿Dónde colocar las plantillas?

Todo lo haremos a través de la raiz de nuestro tema hijo, observa la imagen.

Estos archivos, tendrán los siguientes códigos.

Paso 1: Plantilla para ver un manual individual (single-manuales.php)

Esta plantilla sobrescribe la vista individual de cualquier entrada del tipo "Manuales"

<?php
get_header();
?>

<main class="wp-block-group alignwide">
    <?php
    while ( have_posts() ) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="wp-block-group">
                <h1 class="wp-block-heading"><?php the_title(); ?></h1>
                <div class="wp-block-group">
                    <strong>Temática:</strong>
                    <?php the_terms( get_the_ID(), 'tematicas' ); ?>
                </div>
            </header>
            <div class="wp-block-post-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php
    endwhile;
    ?>
</main>

<?php
get_footer();

Paso 2: Plantilla para el archivo de todos los manuales (archive-manuales.php)

Esta plantilla será la que se cargue cuando visites:

https://lab.carlosjulian.mx/manuales/

<?php
get_header();
?>

<main class="wp-block-group alignwide">
    <h1 class="wp-block-heading">Todos los Manuales</h1>

    <?php if ( have_posts() ) : ?>
        <ul class="wp-block-list">
            <?php while ( have_posts() ) : the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    <br>
                    <small><?php the_terms( get_the_ID(), 'tematicas' ); ?></small>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php else : ?>
        <p>No se encontraron manuales.</p>
    <?php endif; ?>
</main>

<?php
get_footer();

Paso 3: Plantilla para taxonomía "Temáticas" (taxonomy-tematicas.php)

Observa que es muy similar a la estructura de el listado de manuales.

<?php
get_header();
?>

<main class="wp-block-group alignwide">
    <h1 class="wp-block-heading">Temática: <?php single_term_title(); ?></h1>
    <p><?php echo term_description(); ?></p>

    <?php if ( have_posts() ) : ?>
        <ul class="wp-block-list">
            <?php while ( have_posts() ) : the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php else : ?>
        <p>No hay manuales en esta temática.</p>
    <?php endif; ?>
</main>

<?php
get_footer();

Paso 4: La hoja de estilos (CSS)

Esta hoja de estilos, engloba prácticamente todo lo necesario para estos tres templates, recuerda que debemos copiar y pegar en nuestro style.css

El código en cuestión es el siguiente:

/* --- Estilo general compartido entre todos los templates --- */
main.wp-block-group.alignwide {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Encabezados principales */
.wp-block-heading {
    font-size: 2.4rem;
    color: #2d3748;
    margin-bottom: 1rem;
    border-left: 6px solid #38a169;
    padding-left: 1rem;
}

/* --- Estilos para contenido común de los artículos --- */
.wp-block-post-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    padding-top: 1rem;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    margin-top: 2rem;
    color: #2f855a;
}

/* --- Estilo específico para taxonomy-tematicas.php --- */
body.taxonomy-tematicas main.wp-block-group.alignwide p:first-of-type {
    font-size: 1.1rem;
    color: #4a5568;
    margin-bottom: 2rem;
    line-height: 1.6;
    background-color: #f0fff4;
    padding: 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #38a169;
}

/* --- Estilo para listas de manuales (archive y taxonomy) --- */
ul.wp-block-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Tarjetas de manuales */
ul.wp-block-list li {
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 5px solid #38a169;
}

ul.wp-block-list li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Enlaces de títulos */
ul.wp-block-list li a {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2f855a;
    text-decoration: none;
}

ul.wp-block-list li a:hover {
    text-decoration: underline;
}

/* Taxonomía debajo del título */
ul.wp-block-list li small {
    color: #718096;
    font-size: 0.875rem;
}

/* --- Mensaje cuando no hay contenido --- */
main.wp-block-group.alignwide p:last-of-type {
    text-align: center;
    color: #718096;
    font-style: italic;
    margin-top: 2rem;
}

/* --- Estilo específico para single-manual.php --- */
body.single-manual article header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

body.single-manual header .wp-block-group strong {
    color: #4a5568;
    margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 600px) {
    ul.wp-block-list {
        grid-template-columns: 1fr;
    }

    .wp-block-heading {
        font-size: 2rem;
    }

    ul.wp-block-list li a {
        font-size: 1rem;
    }
}

Paso 5: Hacer pruebas y validar

Si ya creaste las tres plantillas, y agregaste el código CSS en style.css, entonces estamos en las pruebas finales, ¿qué haremos?

Nos vamos a dirigir a /manuales/, así que abriremos un post y navegaremos por las temáticas.

Observa que los manuales se aprecian de otra forma, y al ingresar a un manual en específico veremos también, la plantilla single-manuales.php funcionando sin problemas:

Y para concluir, la última plantilla es la de taxonomías, es decir: taxonomy-tematicas.php , podrás darte cuenta que tiene un diseño similar al de manuales, pero con ligeros cambios.

P.D. Hemos recortado la captura de pantalla del header y footer, en tu visualización de tu práctica deberá verse bien.

Conclusiones

En este artículo y tutorial de WordPress Avanzado, hemos visto como crear plantillas para nuestro Custom Post Type, así cómo también para sus taxonomías. Y si te has dado cuenta, no es difícil, y es parte del desarrollo web.

Espero que te haya servido, un gusto y un abrazo. 🤓🚀