2

I have a Custom Post Type called "Banner" which has a custom Meta box with two advanced fields "Title" (text Field) and "Color" (color Picker). Can you please let me know how to use the WP Color Picker API in field of color? here is my code for doing the job for the first field but confused how to develop second part!

<?php
add_action( 'add_meta_boxes', 'banner_mtbox' );
function banner_mtbox() {
$post_types = array ( 'bannerCPT');
 foreach( $post_types as $post_type ){
    add_meta_box(
        "banner-text",
        "Banner Details ",
        "render_banner_mtbox",
        $post_type,
        "normal",
        "high"
    );
    }

function render_banner_mtbox( $post )
{
 $bannerVal = get_post_custom( $post->ID );
 $bannerTitle = isset( $bannerVal['title_box'] ) ? esc_attr(   $bannerVal['title_box'][0] ) : '
 ?>
 <label for="title_box">Enter Title : </label>
 <input type="text" name="title_box" id="title_box" value="<?php echo $bannerTitle; ?>" />
<?php
}
add_action( 'save_post', 'banner_mtbox_save' );
function banner_mtbox_save( $post_id )
{

if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if( !isset( $_POST['banner_mtbox_nonce'] ) || !wp_verify_nonce( $_POST['banner_mtbox_nonce'], 'banner_mtbox_nonce' ) ) return;
if( !current_user_can( 'edit_post' ) ) return;

$allowed = array( 
    'a' => array( // on allow a tags
        'href' => array() // and those anchords can only have href attribute
    )
);


if( isset( $_POST['title_box'] ) ){
    update_post_meta( $post_id, 'title_box', wp_kses( $_POST['title_box'], $allowed ) );
  }
 }
?>

Thanks,

  • Hi Kar, thanks for reply I already saw this tutorial but it didn't mentioned any where how to call the color picker in Metabox it just noticed that we can use it and this is my question? how? – Behseini Nov 15 '14 at 15:20
3

I've created a metabox once with color picker. You need to include color picker style and script in your admin_enqueue_scripts hook, and then initialize it with

$('.color-picker').wpColorPicker();

From my gist:

<?php
add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');
if ( ! function_exists( 'mytheme_backend_scripts' ) ){
    function mytheme_backend_scripts($hook) {
        wp_enqueue_media();
        wp_enqueue_style( 'wp-color-picker');
        wp_enqueue_script( 'wp-color-picker');
    }
}
add_action( 'add_meta_boxes', 'mytheme_add_meta_box' );
if ( ! function_exists( 'mytheme_add_meta_box' ) ){
    function mytheme_add_meta_box(){
        add_meta_box( 'header-page-metabox-options', esc_html__('Header Color', 'mytheme' ), 'mytheme_header_meta_box', 'page', 'side', 'low');
    }
}
if ( ! function_exists( 'mytheme_header_meta_box' ) ){
    function mytheme_header_meta_box( $post ){
        $custom = get_post_custom( $post->ID );
        $header_color = (isset($custom["header_color"][0])) ? $custom["header_color"][0] : '';
        wp_nonce_field( 'mytheme_header_meta_box', 'mytheme_header_meta_box_nonce' );
        ?>
        <style type="text/css">
            .hidden{display: none;}
            .pagebox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        </style>
        <script>
            $('.color-field').each(function(){
                    $(this).wpColorPicker();
            });
        </script>
        <div class="pagebox">

            <p class="separator">
                <h4><?php esc_attr_e('Header Color', 'mytheme' ); ?></h4>
                <input class="color-field" type="text" name="header_color" value="<?php esc_attr_e($header_color); ?>"/>
            </p>
        </div>
        <?php
    }
}
if ( ! function_exists( 'mytheme_save_header_meta_box' ) ){
    function mytheme_save_header_meta_box( $post_id ){
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        }
        if( !current_user_can( 'edit_pages' ) ) {
            return;
        }
        if ( !isset( $_POST['header_color'] ) || !wp_verify_nonce( $_POST['mytheme_header_meta_box_nonce'], 'mytheme_header_meta_box' ) ) {
            return;
        }
        $header_color = (isset($_POST["header_color"]) && $_POST["header_color"]!='') ? $_POST["header_color"] : '';
        update_post_meta($post_id, "header_color", $header_color);
    }
}
add_action( 'save_post', 'mytheme_save_header_meta_box' );
0

You have to create an input field with a class color-field.

For example:

<input type="text" value="" data-default-color="#444" class="color-field"></input>

You can also specify the default color with the data- attribute.

https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.