Iris color picker in custom theme option page not saving value

by

So you’ve already corrected it, but as pointed in the comments, the main issue in your code was that the color input is not using the correct name as defined when you call register_setting().

I.e. The second parameter (the database option name) is the name that should be used in the input’s name attribute.

// The option name is primary_color:
register_setting("section", "primary_color"); // BTW, "section" is a too generic name..

// So use that in the <input> name:
<input type="text" class="color-picker" name="primary_color" id='color-picker' value="#000000" />

And there’s actually another issue: the color input’s value is always #000000 because it’s statically set so in the HTML, or that you didn’t display the one saved in the database.

So to fix that, you can use get_option() to get the saved value and echo it in the input. E.g.

<input type="text" class="color-picker" name="primary_color" id='color-picker'
    value="<?php echo esc_attr( get_option( 'primary_color', '#000000' ) ); ?>" />

Additional Notes

  • If you want to use Iris and not the enhanced WordPress color picker / wp-color-picker, then you just need to set iris as a dependency for your custom JS script — no need to enqueue the wp-color-picker style:

    function accelerator_admin_scripts() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js',
        // Add iris as a dependency for custom.js.
        array( 'jquery', 'iris' ), '1.0.0', true );
}

  • If you want to use the enhanced color picker instead, then make sure to enqueue the wp-color-picker style and set wp-color-picker as a dependency for your script:

    function accelerator_admin_scripts() {
    wp_enqueue_style( 'wp-color-picker' );

    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js',
        // Add wp-color-picker as a dependency for custom.js.
        array( 'jquery', 'wp-color-picker' ), '1.0.0', true );
}

    Then in your JS script, use $( '#color-picker' ).wpColorPicker() in place of $( '#color-picker' ).iris().

  • Your code is missing the call to add_settings_section(), but I assumed your actual code has that call?

    And generally, it’s a best practice to call register_setting() first, followed by add_settings_section() and then add_settings_field(). 🙂