Theme customizer – settings order

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

For example:

Read More
// 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?

Related posts

Leave a Reply

2 comments

  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.

  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.