1

I want to add color picker to wordpress posts and pages at admin menu. I have this code for color picker:

add_action( 'admin_enqueue_scripts', 'add_color_picker' );
function add_color_picker( $hook ) {

  if( is_admin() ) { 

      // Add the color picker css file       
      wp_enqueue_style( 'wp-color-picker' ); 

      // Include our custom jQuery file with WordPress Color Picker dependency
      wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); 
   }
}

And js code

(function( $ ) {


    // Add Color Picker to all inputs that have 'color-field' class
    $(function() {
        $('.color-field').wpColorPicker();
    });

})( jQuery );

my question is how can i use this code to add the metabox with color picker to every admin post or page only?

  • just to clarify you want to add the colorpicker in a metabox on the post and page writing/editing screens? – majick May 23 '16 at 12:43
  • yes, i want to add it at editing pages – Narek Zakarian May 23 '16 at 12:53
  • do have have an existing metabox via add_meta_box ? – majick May 23 '16 at 13:23
  • no i do not have – Narek Zakarian May 23 '16 at 13:39
0

I have found the solution on Denis Žoljom's post

1) - I have added the metabox like this

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');
    }
}

2) - enqueue the color picker style and script

add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');

if ( ! function_exists( 'mytheme_backend_scripts' ) ){
    function mytheme_backend_scripts( $hook ) {
        wp_enqueue_style( 'wp-color-picker');
        wp_enqueue_script( 'wp-color-picker');
    }
}

3) - create HTML container for the color picker, some description text and the input field

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' );
        ?>
        <script>
        jQuery(document).ready(function($){
            $('.color_field').each(function(){
                $(this).wpColorPicker();
                });
        });
        </script>
        <div class="pagebox">
            <p><?php esc_attr_e('Choosse a color for your post header.', 'mytheme' ); ?></p>
            <input class="color_field" type="hidden" name="header_color" value="<?php esc_attr_e( $header_color ); ?>"/>
        </div>
        <?php
    }
}

4) - save the meta box

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' );

Yeeeeeh ))) Hope this will help someone else ;)

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.