WordPress : J’ai du mal à faire en sorte que WP Customizer Color Picker change réellement les couleurs sur mon site

I’m busy developing my first custom theme on WordPress. I have converted and created all the files and everything is working as it should. The original files are based on Bootstrap, but I have converted the stylesheets to not be dependant. I am finally at a place where I want to allow users some customization and among other things, would like to add the ability to change theme colors.

I created a separate customize.php file that handles my customizer code. I have also added the WP Color Picker component and it does show up in the WP dashboard > Appearance > Customize window. The problem is that it doesn’t actually work…

As part of my testing, to ensure that Bootstrap wasn’t affecting anything, I created a div and gave it a custom class name (one that isn’t found anywhere else on the website), I gave the div some height and width, and inside, I added a p-tag just to have some content. What I would like to do, is create a section (in the customizer) that will allow users to change the background color of the div

In the customize.php file:

<?php
function myTheme_customize_register($wp_customize){
    $wp_customize->add_section('colors', array(
        'title' => __('Colors', 'myTheme'),
        'priority' => 30
    ));

    $wp_customize->add_setting('bg_color', array(
        'default' => '#f0a709',
        'transport' => 'postMessage',                     // I have also tried 'refresh'
    ));

    $wp_customize->add_control( new WP_Customize_Color_Control ($wp_customize, 'bg_color', array(
        'label' => __('Background Color', 'myTheme'),
        'section' => 'colors',
        'settings' => 'bg_color',
    )));
}
add_action('customize_register', 'myTheme_customize_register');

In my functions.php:

<?php
function myTheme_customize_css(){ ?>
    <style type="text/css">
        .hi{
            background-color: <?php echo get_theme_mod('bg_color', '#f0a709'); ?> !important;
        }
    </style>
<?php
}
add_action('wp-head', 'myTheme_customize_css');
require get_template_directory().'/inc/customize.php';
?>

Dans le Customizer, la section ‘Couleurs’ est disponible ainsi que le Color Picker, mais sélectionner une autre couleur ne fait rien. L’option de CSS supplémentaire est également disponible, et pour tester, lors de la sélection du div et en lui donnant une couleur bg personnalisée, la couleur change en effet. J’ai également créé une autre section de code dans le fichier customizer.php qui gère certains paramètres de pied de page personnalisés, des éléments tels que le texte d’en-tête et la personnalisation des boutons, et cela fonctionne très bien. J’ai l’impression que la solution est vraiment simple mais je ne la vois pas. Toute aide serait grandement appréciée.

Solution n°1 trouvée

L’action sera comme ceci :

add_action('wp_head', 'myTheme_customize_css');

Vous écrivez mal le nom de l’action. Cela fonctionnera comme prévu.