• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Crear un widget para mostrar las entradas de un CPT en la home del N Theme

Descubre cómo generar un widget que te permita visualizar las entradas de tu Custom Post Type (CPT) favorito en la home del N Theme.

A petición de uno de los suscriptores creé un tutorial para mostrar las entradas de un CPT personalizado en lugar de los artículos del blog.

Pero, ¿qué pasa si quieres que aparezcan ambas como te enseñé para el H Theme y el O Theme

Pues no pasa nada. 😉

Porque aprovechando que la página principal del N Theme está compuesta por widgets, en este tutorial vas a aprender a crear uno nuevo que muestre las entradas del Custom Post Type que te interese.

mostrar posts y cpt N theme
Portada del N Theme mostrando entradas del blog y del CPT «Cursos»

Vamos allá:

Pasos para generar un widget que introduzca CPTs en la home del N Theme

Voy a indicarte cómo utilizar el widget de Blog como base y realizar las modificaciones necesarias para que enseñe entradas de CPTs.

1. Crea el archivo class-asi-widget-cpt.php

Genera un fichero llamado class-asi-widget-cpt.php que contenga el siguiente código y colócalo en la carpeta /inc/widgets/inc/ del N Theme.

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Con estos cambios consigues que el widget muestre las entradas del CPT «curso» .

Aunque ya sabes que puedes adecuar el tipo Custom Post Type sustituyendo «curso» por el que te más convenga.

        $items = get_posts(array(
            'posts_per_page' => $instance['num_entries'],
            'post_type' => 'curso'
        ));

A petición de Josep, uno de nuestros suscriptores, añado la modificación del snippet que necesitarías para mostrar solo los cursos y no las lecciones (post hijo).

        $items = get_posts(array(
            'posts_per_page' => $instance['num_entries'],
            'post_type' => 'curso',
            'post_parent' => 0
        ));

2. Cambia el widgets.php

Este archivo se encuentra en la carpeta /inc/widgets/ del N Theme.

En la línea 7, sustituye:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Con esto registras y cargas el nuevo widget, consiguiendo que aparezca en wp-admin y el personalizador de WordPress.

3. Modifica el style.css

Por último, otorga los estilos de CSS. Para ello añade el siguiente snippet al final del fichero style.css:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

4. Añade el widget desde el personalizador

Ahora que tienes todas las piezas en su sitio puedes ir al personalizador de WordPress y añadir el widget en la home.

Cuando vayas a personalizar la portada del N Theme, te aparecerá un nuevo widget llamado «AsiTheme CPT» que podrás configurar igual que el del blog, solo que este mostrará las entradas de tu CPT elegido.

widget entradas cpt N theme

Este sería el resultado tras añadirlo bajo el de blog:

mostrar posts y cpt N theme
Mostrar nuevo widget de CPT junto al de Blog en el N Theme

Conclusiones

Ya ves qué fácil es generar un widget que te permita mostrar las entradas de CPT en la home del N Theme.

Aunque está creado para una plantilla concreta, puedes usar este snippet de guía para modificar otros temas de AsiThemes que utilicen widgets en la página principal.

¿Quieres que cree este tutorial para un child theme de Genesis Framework que no use widgets en la home? Sólo tienes que decírmelo y prepararé uno a medida.

Ventajas de ser suscriptor. 😉

CPT Genesis Framework N Theme PHP Widgets

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?