¿Qué combinación es correcta al crear un ajuste editable en Customizer?

Necesitas setting para persistencia y control para la interfaz de edición.

Tema clásico 08: Customizer avanzado con ajustes seguros

Diseña ajustes útiles en el Customizer para temas clásicos, aplicando validación, sanitización y salida limpia en frontend.

¿Cuánto sabes de WordPress Themes Pro?

📘 Teoría

Qué ajustes sí deben ir al Customizer

Prioriza opciones de branding y layout base, no lógica compleja de negocio.

El Customizer funciona especialmente bien para color principal, logotipo, tipografía base o ancho de contenedor.

Evita meter reglas con demasiadas dependencias entre sí, porque la UX del panel se vuelve confusa y propensa a errores.

Diseña nombres claros para usuario no técnico y agrupa settings por secciones coherentes.

Pocos ajustes, alta utilidad.
Nombres legibles para cliente final.
Controles agrupados por objetivo visual.
Nada de lógica de negocio en Customizer.

Registrar setting y control con sanitización

Todo setting debe validarse antes de guardarse para no romper estilos ni introducir valores inválidos.

Color principal con WP_Customize_Color_Control

<?php
add_action('customize_register', function ($wp_customize) {
  $wp_customize->add_section('theme_brand', [
    'title' => __('Brand', 'mi-tema-clasico'),
    'priority' => 30,
  ]);

  $wp_customize->add_setting('theme_primary_color', [
    'default' => '#2563eb',
    'sanitize_callback' => 'sanitize_hex_color',
    'transport' => 'refresh',
  ]);

  $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme_primary_color', [
    'label' => __('Color principal', 'mi-tema-clasico'),
    'section' => 'theme_brand',
    'settings' => 'theme_primary_color',
  ]));
});

Aplicar valores en frontend con fallback

Guardar el valor no basta: hay que consumirlo de forma segura en la salida del tema.

Recupera el valor con get_theme_mod y define valor por defecto para no dejar el sitio sin estilos si falta configuración.

Escapa siempre cuando inyectes valores en HTML o CSS dinámico.

Si varios componentes comparten el ajuste, usa variable CSS global para evitar duplicar reglas.

Inyectar variable CSS en head

<?php
add_action('wp_head', function () {
  $color = get_theme_mod('theme_primary_color', '#2563eb');
  $safe = sanitize_hex_color($color) ?: '#2563eb';

  echo '<style>:root{--theme-primary:' . esc_attr($safe) . ';}</style>';
});