WordPress - How can we create a "Custom Meta-box With Color Picker"?

Blow are the easy steps to create a custom meta-box with color picker in WordPress.

Step 1 – Register Custom Meta-box

 
function aft_add_meta_box() {
    add_meta_box('aft_sectionid', 'Post Background', 'aft_meta_box_callback', 'post');
}

add_action( 'add_meta_boxes', 'aft_add_meta_box' );

Step 2 – Creating Custom Metabox

 
function aft_meta_box_callback( $post ) {
    wp_nonce_field( 'aft_meta_box', 'aft_meta_box_nonce' );
    $color = get_post_meta( $post->ID, 'country_bg_color', true );
    ?>
    
    

Select Post Background Color: 
    
    




<?php
}

Step 3 –Saving Metabox

 
function aft_save_meta_box_data( $post_id ) {
    if ( !isset( $_POST['aft_meta_box_nonce'] ) ) {
        return;
    }

    if ( !wp_verify_nonce( $_POST['aft_meta_box_nonce'], 'aft_meta_box' ) ) {
        return;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    if ( !current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
   
    $country_bg_color = ( isset( $_POST['country_bg_color'] ) ? sanitize_html_class( $_POST['country_bg_color'] ) : '' );
    update_post_meta( $post_id, 'country_bg_color', $country_bg_color );
}
add_action( 'save_post', 'aft_save_meta_box_data' );