I'm trying to use the WP color picker in a plugin admin menu and it doesn't seem to be doing anything at all. I'm following the directions here: http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

This is how it is setup:


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', ECBS_JS_URL . 'my-script.js', array(     'wp-color-picker' ), false, true );


var $j = jQuery.noConflict();

In the admin menu there is a drop down box where the user picks the name of a template they want to edit. I'm using AJAX .post() to build the edit form and dynamically update a div to display it.

This is the code that builds the form fields:

return ecbs_get_label( $ecbs_style_data[ECBS_STYLE_NAME], $ecbs_style_data[ECBS_NICE_NAME] ) .
    '<input type = "text" name="' . $ecbs_style_data[ECBS_STYLE_NAME] . '" ' .
    'value="' . $ecbs_style_value . '" ' .
    (($ecbs_style_data[ECBS_VALUE_TYPE] === 'hex') ? 'class="my-color-field"'  : 
    'onLoad="this.value=\'' . $ecbs_style_value . '\'" ') .
    '> '; 

When I look at my source, I can verify that it has the correct class="my-color-field" attribute. The weird thing is, the type="text" attribute is at the end, even though it is not formatted that way in my code. This is what the outputted HTML looks like:

<label for="background-color">Background Color</label><input name="background-color" value="#997766" class="my-color-field" type="text"> <br>

Could the type attribute being at the end cause an issue with this script? I wouldn't think so, but I can't figure out what else might be wrong.

When I look at the source, I can verify that my-script.js is linked and the url is correct.

Edited to add the code from my other .js file. Maybe something conflicting between them?


// This script sends the id of the selected template to the php
// function ecbs_populate_admin_template() and then sends the
// formatted response to the ecbs-edit-area div in the admin
// submenu.
var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j("select").change(function() {
        var str = "";
        $j("select option:selected").each(function() {
        str = $j("select").val();
        try {
            $j.post( ajaxurl, {
                data: { template : str },
                action: 'ecbs_populate_admin_template'
            }, function ( response ) {
                $j("#ecbs-edit-area").html( response );
        catch (err) {
$j(function() {
    $j( document ).tooltip();

This script works fine.

I did try moving the contents of my-script.js to this file and enqueueing it instead, but that did not make a difference.

  • This is not how you use ajax in WordPress. Take a look at these examples – kaiser Jun 3 '14 at 10:10
  • What I did is the exact instructions from the WordPress post I linked to. I have been able to use AJAX without any problem in my other application. I just can't get the native color picker to work. – RaneWrites Jun 3 '14 at 13:53
  • Do you have errors in your console? If so: edit and add please. – kaiser Jun 3 '14 at 16:30
  • No errors. Nothing. It doesn't do anything at all. I've basically given up on it at this point. – RaneWrites Jun 3 '14 at 16:43
  • Could you try switching to an ID instead of a class? – kaiser Jun 3 '14 at 16:48

Your Answer

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

Browse other questions tagged or ask your own question.