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

Necesitas setting para persistencia y control para UI. Sin setting, el valor no se guarda correctamente.

Customizer en WordPress: personalización sin tocar código

Diseña opciones de tema útiles en el Customizer para que cliente y equipo ajusten UI de forma segura y controlada.

📘 Teoría

Cuándo merece la pena usar Customizer

No todo ajuste debe estar en el panel, pero los de branding y layout básico sí suelen encajar.

El Customizer funciona especialmente bien para identidad visual: color principal, logo, tipografía o ancho de contenedor.

También es útil para activar o desactivar bloques simples de la home sin entrar en código.

Evita usarlo para reglas complejas de negocio; ahí conviene una pantalla de ajustes específica o plugin dedicado.

Bueno para ajustes visuales frecuentes.
Malo para lógica técnica compleja.
Diseña controles con nombres claros para usuario no técnico.
Agrupa opciones por secciones coherentes.

Setting + Control: patrón base

Cada ajuste en Customizer necesita un setting persistente y un control visible.

Registrar color principal del tema

add_action('customize_register', function ($wp_customize) {
  $wp_customize->add_section('theme_brand', [
    'title' => 'Brand',
    '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',
    'section' => 'theme_brand',
    'settings' => 'theme_primary_color',
  ]));
});

Cómo aplicar el valor en frontend

Guardar el setting no basta: hay que consumirlo correctamente en la salida del tema.

Recupera el valor con get_theme_mod() y define fallback para no romper estilos si el dato no existe.

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

Si un ajuste afecta muchas partes, conviértelo en variable CSS global para mantener consistencia.

Inyectar variable CSS segura

add_action('wp_head', function () {
  $color = get_theme_mod('theme_primary_color', '#2563eb');
  $safe_color = sanitize_hex_color($color) ?: '#2563eb';
  echo '<style>:root{--theme-primary:' . esc_attr($safe_color) . ';}</style>';
});