Theme customizer - settings order

Question

If I add more than 5 Settings to a single section, the order of the settings gets weird.

For example:

// Link color
$wp_customize->add_setting( 'tonal_'.$themeslug.'_settings[link_color1]', array(
    'default'           => $themeOptions['link_color1'],
    'type'              => 'option',
    'sanitize_callback' => 'sanitize_hex_color',
    'capability'        => 'edit_theme_options',
    'transport'         => 'postMessage'
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'tonal_'.$themeslug.'_settings[link_color1]', array(
    'label'    => __( 'Link color1', 'tonal' ),
    'section'  => 'colors',
    'settings' => 'tonal_'.$themeslug.'_settings[link_color1]',
    'choices'  => '#ffffff'
) ) );

^{Further examples in a pastebin - no expiration time}

The colors are numbered from 1 to 7, but in the settings they appear in that order: 2,1,3,4,6,5,7

Has anybody experienced the same?

Or does anybody even know how to solve this?

Answer 1

If you need them in a specific order, then give a priority value to the controls. Otherwise, their order is not defined and cannot be guaranteed.

If you don't define a priority, then the control gets the default priority of "10".

When two controls have the same priority, then the resulting order is undefined, because that's how PHP works.

Answer 2

CleanUp

Iterating is much easier for debugging, as you'll see step by step information:

»What happens, after I added this to that?«

So simply start with a clean up and see how it gets added.

foreach ( range( 1, 7 ) as $nr )
{
    $wp_customize->add_setting( 
        "tonal_{$themeslug}_settings[link_color{$nr}]",
        array(
            'default'           => $themeOptions[ "link_color{$nr}" ],
            'type'              => 'option',
            'sanitize_callback' => 'sanitize_hex_color',
            'capability'        => 'edit_theme_options',
            'transport'         => 'postMessage'
        )
    );
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            "tonal_{$themeslug}_settings[link_color{$nr}]",
            array(
                'label'    => __( sprintf( 'Link color%s', $nr ), 'tonal' ),
                'section'  => 'colors',
                'settings' => "tonal_{$themeslug}_settings[link_color{$nr}]",
                'choices'  => '#ffffff'
            ) 
        ) 
    );

    // DEBUG:
    echo '<pre>'; var_export( $wp_customize, true ); echo '</pre>';
}

Sorting

The chance is pretty high, that you'll get around it with default php sorting mechanisms. Just take a look at the output and than see what you can do with simple array sorting (Hint: You can easily type cast (array) $object and (object) $array.