Le Customizer WordPress

C'est quoi le Customizer ?

Le Customizer (Apparence → Personnaliser) est l'interface de personnalisation en temps réel de WordPress. Il permet aux utilisateurs de modifier des options du thème — couleur, texte, logo — et de voir le résultat immédiatement sans sauvegarder.

Pour ajouter des options propres à ton thème, tu utilises l'API Customizer dans functions.php.

Anatomie du Customizer

Le Customizer est organisé en 3 niveaux :

• Panel — groupe de sections (optionnel pour les petits thèmes)
• Section — groupe de contrôles (ex. "Couleurs", "Typographie")
• Contrôle — un champ de saisie (texte, couleur, image…), lié à un setting

Un setting est la valeur stockée. Un contrôle est l'interface pour la modifier.

Ajouter des options dans functions.php

add_action( 'customize_register', 'montheme_customize_register' );

function montheme_customize_register( $wp_customize ) {

  // ── Section ─────────────────────────────────────
  $wp_customize->add_section( 'montheme_options', [
    'title'    => __( 'Options du thème', 'montheme' ),
    'priority' => 30,
  ] );

  // ── Setting : texte du pied de page ─────────────
  $wp_customize->add_setting( 'montheme_footer_text', [
    'default'           => 'Fait avec ❤ par MonTheme',
    'sanitize_callback' => 'sanitize_text_field',
    'transport'         => 'refresh',
  ] );

  $wp_customize->add_control( 'montheme_footer_text', [
    'label'   => __( 'Texte du pied de page', 'montheme' ),
    'section' => 'montheme_options',
    'type'    => 'text',
  ] );

  // ── Setting : couleur d'accent ───────────────────
  $wp_customize->add_setting( 'montheme_accent_color', [
    'default'           => '#6366f1',
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage',
  ] );

  $wp_customize->add_control(
    new WP_Customize_Color_Control( $wp_customize, 'montheme_accent_color', [
      'label'   => __( 'Couleur d'accent', 'montheme' ),
      'section' => 'montheme_options',
    ] )
  );

}

sanitize_callback — obligatoire

Chaque setting doit avoir un sanitize_callback — une fonction qui nettoie la valeur avant de la stocker. C'est une mesure de sécurité critique :

• sanitize_text_field — texte simple (strip tags, espaces superflus)
• sanitize_hex_color — valeur hexadécimale de couleur
• sanitize_url — URL
• wp_kses_post — HTML riche avec les balises autorisées dans les articles

transport : refresh vs postMessage

• 'refresh' — recharge la page entière à chaque modification. Simple, toujours fonctionnel.
• 'postMessage' — mise à jour instantanée via JavaScript sans rechargement. Plus agréable, mais nécessite du JS supplémentaire dans customizer.js.

Pour débuter, utilise 'refresh' partout.

Utiliser les options dans les templates

get_theme_mod() récupère la valeur d'un setting. Le deuxième paramètre est la valeur par défaut si rien n'est configuré.

<footer class="site-footer">
  <p><?php echo esc_html( get_theme_mod( 'montheme_footer_text', 'MonTheme' ) ); ?></p>
</footer>

<!-- Injecter la couleur d'accent en CSS custom property -->
<?php
$accent = get_theme_mod( 'montheme_accent_color', '#6366f1' );
?>
<style>
  :root { --accent: <?php echo sanitize_hex_color( $accent ); ?>; }
</style>