color picker issue in plug in development wordpress

3 Views

I am trying to add color picker in wordpress settings API for plugin development. But I am facing problem to do that. I have code this for color picker. 

// Create this function for color picker.
add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
// first check that $hook_suffix is appropriate for your admin page
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

}

Read More
//Call it in my input field option
<tr valign="top">
<th scope="row"><label for="cursor_color">ScrollBar Color</label></th>
<td>
<input id= "cursor_color" type="text" name="ppmscrollbar_options[cursor_color]" value="<?php echo stripslashes($settings['cursor_color']);?>" class="my-color-field"/><p class="description">Select Icon holder color here. You can also add html HEX code.</p>
</td>
</tr>

//In my-script.js file I have written this bellow code. 

jQuery(document).ready(function($){
$('.my-color-field').wpColorPicker();
});

I did not solve the issue. Can anyone tell me what can I do?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I’m really not sure why your code is not working, maybe the issue is not in the code you posted… The following is almost the same as yours, but a complete demonstration:

    add_action('admin_menu', 'color_pick_so_23696173');

function color_pick_so_23696173()
{
     $my_page = add_dashboard_page( 
        'colorpick', 
        'colorpick', 
        'add_users',
        'colorpick-page', 
        'color_pick_callback_so_23696173' 
    );
    add_action( "admin_print_scripts-$my_page", 'enqueue_so_23696173' );
}
function enqueue_so_23696173() 
{
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 
        'colorpick', 
        plugins_url( 'my-script.js', __FILE__ ), 
        array( 'wp-color-picker'),
        false,
        true
    );
}
function color_pick_callback_so_23696173()
{ 
    ?>
    <div class="wrap">
        <h2>Test</h2>
        <table>
            <tr valign="top">
            <th scope="row"><label for="cursor_color">ScrollBar Color</label></th>
            <td>
            <input id= "cursor_color" type="text" name="ppmscrollbar_options[cursor_color]" value="" class="my-color-field"/>
            <p class="description">Select Icon holder color here. You can also add html HEX code.</p>
            </td>
            </tr>
        </table>
    </div>
    <?php
}

    And my-script.js is exactly the same as yours.