Correcciones de la API de LP 4.x en tarjetas de curso
Por qué los overrides de archivo no funcionan en la lista de cursos y cómo resolverlo
¿Creamos código nuevo en esta lección?
Sí. Agregamos 2 filtros en functions.php para personalizar las tarjetas de curso.
También creamos los archivos de la carpeta loop/course/ pero descubrimos que no funcionan en LP 4.x — y eso es precisamente lo que explica esta lección.
El descubrimiento: LP 4.x cambió todo el sistema
Cuando intentamos agregar clases CSS a las tarjetas de curso creando archivos en loop/course/, descubrimos algo importante: esos archivos son ignorados por completo.
LearnPress 4.x usa un sistema completamente diferente para las tarjetas
En versiones anteriores (LP 3.x), cada parte de la tarjeta de curso era un archivo PHP en loop/course/. En LP 4.x, todo esto fue reemplazado por una clase PHP llamada ListCoursesTemplate que construye las tarjetas con código, no con archivos de plantilla.
📄 loop/course/thumbnail.php
📄 loop/course/title.php
📄 loop/course/meta.php
📄 loop/course/price.php
📄 loop/course/categories.php
Para personalizar → copiar el archivo al child theme.
🏗️ ListCoursesTemplate::render_course()
Construye cada parte con arrays PHP y los pasa por filtros. No hay archivos de plantilla que copiar.
Para personalizar → add_filter() en functions.php.
¿Cómo funciona el sistema nuevo?
En LP 4.x, cuando el estudiante entra a la página /cursos/, el proceso es:
render_courses()
por cada curso
add_filter()
Los filtros son «puntos de intervención» que LP 4.x ofrece para que podamos modificar el HTML que se genera. Cada filtro recibe un array de partes y nosotros podemos editar cualquier parte antes de que se muestre.
Es como si la cocina del restaurante te mandara el plato antes de llevarlo a la mesa y vos pudieras ajustarlo al gusto del cliente.
Los filtros disponibles para tarjetas de curso
LP 4.x ofrece estos filtros para personalizar cada parte de la tarjeta:
.lms-tarjeta-curso.lms-curso-contenido
El código que agregamos en functions.php
Agregamos 2 filtros en functions.php — dentro de la sección 5 del archivo:
wp-content/themes/divi-lms-child/
// 5. CORRECCIONES LP 4.x — TARJETAS DE CURSO
// ─────────────────────────────────────────────────
// Filtro 1: Agregar clase al <li> de la tarjeta
add_filter( ‘learn-press/layout/list-courses/item-li’,
function( $section, $course, $settings ) {
if ( isset( $section[‘wrapper_li’] ) ) {
$section[‘wrapper_li’] = ‘<li class=»course lms-tarjeta-curso»>’;
}
return $section;
}, 10, 3 );
// Filtro 2: Agregar clase al contenido de la tarjeta
add_filter( ‘learn-press/layout/list-courses/item/section/bottom’,
function( $section, $course, $settings ) {
if ( isset( $section[‘wrapper’] ) ) {
$section[‘wrapper’] = ‘<div class=»course-content lms-curso-contenido»>’;
}
return $section;
}, 10, 3 );
Los 10, 3 al final significan: prioridad 10 (normal) y 3 parámetros ($section, $course, $settings). Siempre hay que declarar cuántos parámetros recibe la función cuando usamos más de 2.
Cómo queda la tarjeta con nuestras clases
Clases CSS que agregamos:
.lms-tarjeta-curso→ para estilizar la tarjeta completa
.lms-curso-contenido→ para estilizar el contenido de la tarjeta
Con estas clases podemos desde lms-styles.css cambiar colores, fuentes, bordes y cualquier estilo visual usando nuestras variables CSS.
Cómo verificar que los filtros están activos
lms-tarjeta-curso<li class="course lms-tarjeta-curso"> ✅lms-curso-contenido → debe aparecer en el div interno de la tarjeta ✅
Resultado
✅ Lo que aprendimos y logramos en esta lección
La lista de cursos NO usa archivos template — usa la clase
ListCoursesTemplate con filtros PHP.
Para tarjetas de curso en LP 4.x, la herramienta es
add_filter() en functions.php, no archivos en loop/course/.
.lms-tarjeta-curso y .lms-curso-contenido listas para recibir estilos desde nuestro sistema de diseño.
Ambas clases confirmadas en el inspector del navegador en la página
/cursos/.
<ul class=«learn-press-courses lp-list-courses-no-css list»>
<li class=«course lms-tarjeta-curso«>
<div class=«course-item»>
<div class=«course-thumbnail»>…</div>
<div class=«course-content lms-curso-contenido«>…</div>