Why is an array created in a function hooked to customize register populated when customizer is loaded but not when the front-end is loaded?

Question

I have a function that is designed to do two things: 1) create color picker controls/ settings in the customizer and 2) create a multi-dimensional array $customizeData to be outputted in header styles and used to localize variables for customizer.js.

The first objective is successful. The second one has driven me here. I added a var_dump for $customizerData to index.php the array is null on the front end, but is populated as expected when I load it inside the customizer.

Here is the function in question:

if (! function_exists('_sf_customzier_color_loop') ) :
function _sf_customzier_color_loop($colors, $countStart = 10, $section) {
//Not sure why I have to do this first thing
global $wp_customize;
//declare $customizerData as a global variable
global $customizerData;
//start the counter at 10 or whatever was set.
$count = $countStart;
foreach ($colors as $things) {
    $slug = $things['slug'];
    $id = "_sf[{$slug}]";
    //If current array has a priority set, use it, if not use the counter.
    if (! isset($things['priority']) ) {
        $priority = $count;
    }
    else {
        $priority = $things['priority'];
    }
    $wp_customize->add_setting( $id, array(
        'type'              => 'option', 
        'transport'     => 'postMessage',
        'capability'     => 'edit_theme_options',
        'default'       => $things['default'],
    ) );

    $control = 
    new WP_Customize_Color_Control(
            $wp_customize, $slug, 
        array(
        'label'         => __( $things['label'], '_sf' ),
        'section'       => $section,
        'priority'      => $priority,
        'settings'      => $id
        ) 
    );
    $wp_customize->add_control($control);
    //create array to be used for the outputting styles to wp_head and customizer.js
    $customizerData [] = array(
        'id' => $id,
        'slug' => $slug, 
        'selector' => $things['selector'],
        'property' => $things['property'],
    );

    //advance priority counter
    $count++;
}
}
endif;
// ! _sf_customzier_color_loop exists 

You can see an example of what I am feeding to this at: https://github.com/Shelob9/_sf_lib/blob/1.1-fancy-data/customizer/customizer-sidebar.php

What do I need to do so that that the array is populated on the front end?

Answer 1

Couple points:

• The customize_register action hook actually passes your function the $wp_customize variable, you don't need to declare it as the global. Just put it as the first argument in your function declaration.

• The reason your code doesn't run on the front end of the site is that the customize_register action hook only runs when the customizer is being used. If you want to declare data somewhere that it will always be available, don't put it in a function hooked to customize_register.