Multiple color picker in wordpress metabox not saving

admin

Administrator
Staff member
I am following this article: <a href="http://javatechig.com/wordpress/how-to-implement-color-picker-with-wordpress" rel="nofollow">http://javatechig.com/wordpress/how-to-implement-color-picker-with-wordpress</a> on how to put color picker in my metabox, and it's showing allright, but when I try to save it, nothing is saved. Weird thing is that I tried this on one site, and basically copy pasted this entire procedure, and it worked. This time I need 2 color inputs. So I created my metabox and save form:

Code:
&lt;?php 

if ( ! function_exists( 'Theme_add_meta_box' ) ){
    function Theme_add_meta_box(){
        add_meta_box( 'breadcrumbs-image-page-metabox-options', esc_html__('Breadcrumbs Image', 'Theme' ), 'Theme_breadcrumbs_image_meta_box', 'page', 'side', 'low');
    }
}
add_action( 'add_meta_boxes', 'Theme_add_meta_box' );

if ( ! function_exists( 'Theme_breadcrumbs_image_meta_box' ) ){
    function Theme_breadcrumbs_image_meta_box( $post ){
        $custom = get_post_custom( $post-&gt;ID );
        $breadcrumbs_image = (isset($custom["breadcrumbs_image"][0])) ? $custom["breadcrumbs_image"][0] : '';
        $headline_color = (isset($custom["headline_color"][0])) ? $custom["headline_color"][0] : '';
        $breadcrumbs_color = (isset($custom["breadcrumbs_color"][0])) ? $custom["breadcrumbs_color"][0] : '';

        ?&gt;
        &lt;style type="text/css"&gt;
            .hidden{display: none;}
            .postbox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        &lt;/style&gt;
        &lt;p&gt;
            &lt;input id="Theme_breadcrumbs_image_input" type="hidden" name="breadcrumbs_image" value="&lt;?php echo $breadcrumbs_image; ?&gt;"/&gt;
            &lt;a title="&lt;?php esc_html_e('Add Breadcrumbs Image', 'Theme'); ?&gt;" href="#" id="add-post-breadcrumbs_image"&gt;
            &lt;?php
                if(isset($custom["breadcrumbs_image"][0]) ){
                    echo '&lt;img width="254" src="'.$breadcrumbs_image.'" /&gt;';
                } else{
                    esc_html_e('Add Breadcrumbs Image', 'Theme');
                } ?&gt;&lt;/a&gt;
            &lt;?php
                if (!isset($custom["breadcrumbs_image"][0])) {
                    echo '&lt;a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" class="hidden"&gt;'.esc_html__('Remove Breadcrumbs Image', 'Theme').'&lt;/a&gt;';
                } else{
                    echo '&lt;a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" &gt;'.esc_html__('Remove Breadcrumbs Image', 'Theme').'&lt;/a&gt;';
                }
            ?&gt;
        &lt;/p&gt;
        &lt;p class="separator"&gt;
        &lt;h4&gt;&lt;?php esc_attr_e('Headline Color', 'Theme' ); ?&gt;&lt;/h4&gt;
            &lt;input class="color-field" type="text" name="headline_color" value="&lt;?php echo '#'.$headline_color; ?&gt;"/&gt;
        &lt;h4&gt;&lt;?php esc_attr_e('Breadcrumbs Color', 'Theme' ); ?&gt;&lt;/h4&gt;
            &lt;input class="color-field" type="text" name="breadcrumbs_color" value="&lt;?php echo '#'.$breadcrumbs_color; ?&gt;"/&gt;
        &lt;/p&gt;
        &lt;?php
    }
}

if ( ! function_exists( 'Theme_save_breadcrumbs_image_meta_box' ) ){
    function Theme_save_breadcrumbs_image_meta_box( $post ){
        if( defined( 'DOING_AUTOSAVE' ) &amp;&amp; DOING_AUTOSAVE ){
            return;
        }
        $breadcrumbs_image = (isset($_POST["breadcrumbs_image"])) ? $_POST["breadcrumbs_image"] : '';
        update_post_meta($post-&gt;ID, "breadcrumbs_image", $breadcrumbs_image);

        $headline_color = (isset($_POST["headline_color"])) ? $_POST["headline_color"] : '';
        update_post_meta($post-&gt;ID, "headline_color", $headline_color);

        $breadcrumbs_color = (isset($_POST["breadcrumbs_color"])) ? $_POST["breadcrumbs_color"] : '';
        update_post_meta($post-&gt;ID, "breadcrumbs_color", $breadcrumbs_color);

    }
}

add_action( 'save_post', 'Theme_save_breadcrumbs_image_meta_box' );

I have image upload in as well, and it's working as it should.

I initialized my colorpicker in javascript

Code:
 $('.color-field').each(function(){
     $(this).wpColorPicker();
 });

I actually added
Code:
.each
to see if the initialization needs to be separate per input field but there was no difference even when I put this

Code:
 $('.color-field').wpColorPicker();

I also enqueued colorpicker

Code:
wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');

in my functions.php where my admin scripts are enqueued.

I can choose color, I see the color pickers, and when I go to save them, nothing happens :\ I get empty color pickers when the page refreshes. Image upload works fine (I didn't include the js code for it here, but it works, and saves).

So what am I missing?