Settings API en serio: una pantalla de ajustes clara, segura y mantenible

Construyes la página de configuración de tu plugin con Settings API, validación centralizada y una UX de admin pensada para evitar errores operativos.

Una pantalla de ajustes mala obliga al equipo a corregir errores humanos en lugar de trabajar en mejoras reales.

En esta lección vas a construir un panel de configuración para WP Avisos Contextuales con Settings API y validación sólida.

El objetivo es que el admin vea un formulario claro, reciba feedback útil y nunca pueda guardar datos que rompan el frontend.

También dejarás preparada la estructura para escalar ajustes sin convertir la página en un bloque inmanejable.

  • Separar render y sanitización evita mezclar HTML con reglas de negocio.
  • Mantén una clase `SettingsService` responsable de registrar sección, campos y callback de sanitización.
  • El callback `sanitize_callback` debe ser la puerta de entrada única para validar todo el payload.
  • Caso real: cuando la validación está repartida por campos sueltos, aparecen inconsistencias y datos inválidos en base de datos.
  • Una clase para registrar ajustes.

Arquitectura recomendada para ajustes

Separar render y sanitización evita mezclar HTML con reglas de negocio.

Mantén una clase `SettingsService` responsable de registrar sección, campos y callback de sanitización.

El callback `sanitize_callback` debe ser la puerta de entrada única para validar todo el payload.

Caso real: cuando la validación está repartida por campos sueltos, aparecen inconsistencias y datos inválidos en base de datos.

  • Una clase para registrar ajustes.
  • Una función para sanitizar payload completo.
  • Campos con copy claro y ayudas contextuales.

Registro de opciones con Settings API

No guardes opciones "a mano" si WordPress ya te da un flujo robusto.

Registra el grupo y la opción con `register_setting`, indicando una función de sanitización robusta.

Declara sección con `add_settings_section` y campos con `add_settings_field`, cada uno con su callback de render.

Usa un array de opciones (ej. `wpac_settings`) para mantener coherencia y facilitar migraciones futuras.

UX en admin: menos fricción, menos tickets

La calidad de la interfaz de ajustes impacta directamente en errores de operación.

Añade textos de ayuda concretos debajo de cada campo (qué cambia exactamente y dónde se verá en frontend).

Usa valores por defecto razonables para que el plugin funcione desde el minuto uno, sin exigir configuración compleja.

Muestra mensajes de éxito/error tras guardar para que el usuario entienda qué pasó.

Caso real: string vacío que rompía aviso legal

Sin sanitización centralizada, una opción vacía puede romper una sección crítica del sitio.

En un proyecto real, el mensaje legal del footer se guardó vacío por un campo sin validación. Resultado: incumplimiento temporal de política interna.

La solución fue validar en `sanitize_callback` que el mensaje no quedara vacío y aplicar fallback.

Además, se añadió un aviso de admin que explicaba por qué se aplicó valor por defecto.

WordPress Plugin
06

Settings API en serio: una pantalla de ajustes clara, segura y mantenible

Construyes la página de configuración de tu plugin con Settings API, validación centralizada y una UX de admin pensada para evitar errores operativos.

Código del tema: register_setting

📘 Teoría

Arquitectura recomendada para ajustes

Separar render y sanitización evita mezclar HTML con reglas de negocio.

Mantén una clase `SettingsService` responsable de registrar sección, campos y callback de sanitización.

El callback `sanitize_callback` debe ser la puerta de entrada única para validar todo el payload.

Caso real: cuando la validación está repartida por campos sueltos, aparecen inconsistencias y datos inválidos en base de datos.

  • Una clase para registrar ajustes.
  • Una función para sanitizar payload completo.
  • Campos con copy claro y ayudas contextuales.

Registro de opciones con Settings API

No guardes opciones "a mano" si WordPress ya te da un flujo robusto.

1

Registra el grupo y la opción con `register_setting`, indicando una función de sanitización robusta.

2

Declara sección con `add_settings_section` y campos con `add_settings_field`, cada uno con su callback de render.

3

Usa un array de opciones (ej. `wpac_settings`) para mantener coherencia y facilitar migraciones futuras.

Registro base de Settings API
add_action('admin_init', function (): void {
    register_setting('wpac_group', 'wpac_settings', [
        'sanitize_callback' => 'wpac_sanitize_settings',
        'default' => [
            'message' => 'Aviso inicial',
            'tone' => 'info',
        ],
    ]);

    add_settings_section('wpac_main', 'Ajustes principales', '__return_false', 'wpac');

    add_settings_field('message', 'Mensaje', 'wpac_render_message_field', 'wpac', 'wpac_main');
    add_settings_field('tone', 'Tono', 'wpac_render_tone_field', 'wpac', 'wpac_main');
});

UX en admin: menos fricción, menos tickets

La calidad de la interfaz de ajustes impacta directamente en errores de operación.

Añade textos de ayuda concretos debajo de cada campo (qué cambia exactamente y dónde se verá en frontend).

Usa valores por defecto razonables para que el plugin funcione desde el minuto uno, sin exigir configuración compleja.

Muestra mensajes de éxito/error tras guardar para que el usuario entienda qué pasó.

1

Antipatrón

Panel con campos ambiguos y sin validación visible.

  • Configuraciones inconsistentes.
  • Errores repetidos por parte del equipo.
  • Más soporte interno.
2

Patrón recomendado

Campos claros + ayudas + validación con feedback.

  • Menos errores de guardado.
  • Más autonomía editorial.
  • Flujo admin más rápido.

Caso real: string vacío que rompía aviso legal

Sin sanitización centralizada, una opción vacía puede romper una sección crítica del sitio.

1

En un proyecto real, el mensaje legal del footer se guardó vacío por un campo sin validación. Resultado: incumplimiento temporal de política interna.

2

La solución fue validar en `sanitize_callback` que el mensaje no quedara vacío y aplicar fallback.

3

Además, se añadió un aviso de admin que explicaba por qué se aplicó valor por defecto.

🧪 Aprende probando

Ejemplo Ejemplo guiado: página de ajustes con validación centralizada Registramos opción array, dos campos y una sanitización única para mantener consistencia.

🏁 Retos

Reto Reto real: añade campo de visibilidad por rol Extiende los ajustes para permitir mostrar aviso solo a ciertos perfiles.

¿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 .