0

I'm creating a plugin that has a few tabs for better organisation. I'm trying to place a color picker on the plugin settings page under a tab I've called checkout. I've tried following the documentation which places a text field but no color picker. https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

I'm not sure what I've done wrong. This is my first plugin and I'm obviously doing something wrong.

So far I've set the tabs in the following folder some-plugin/admin/some-plugin.php (lousy name at the moment, but when it works I'll cange it). I've also added the JS code to some-plugin/admin/js/my-script.js

The tabs display content fine, but I can't get the color picker to work. It shows the text field but when you click on it nothing happens.

What am I doing wrong?

edit to show current code. I'm trying to place the color picker in the last tab at the end of the code snippet. Easier to find that way

// start from the settings setup
function wcuc_admin_settings_setup() {
add_options_page('New Plugin Settings', 'New Plugin Settings', 'manage_options', 'wcuc-settings', 'wcuc_admin_settings_page');
}
add_action('admin_menu', 'wcuc_admin_settings_setup');
function wcuc_admin_settings_page(){
global $wcuc_active_tab;
$wcuc_active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'welcome'; ?>

<h2 class="nav-tab-wrapper">
<?php
    do_action( 'wcuc_settings_tab' );
?>
</h2>
<?php
    do_action( 'wcuc_settings_content' );
}
add_action( 'wcuc_settings_tab', 'wcuc_welcome_tab', 1 );
function wcuc_welcome_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'welcome' || '' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=welcome' ); ?>"><?php _e( 'Welcome', 'wcuc' ); ?> </a>
<?php
}
add_action( 'wcuc_settings_content', 'wcuc_welcome_render_options_page' );

function wcuc_welcome_render_options_page() {
global $wcuc_active_tab;
if ( '' || 'welcome' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Welcome', 'wcuc' ); ?></h3>
    <img src="/wp-content/plugins/some-plugin/images/banner-772x250.png" alt="Welcome to my plugin" />
        <h3>What does this plugin do?</h3>
        <p>Lots. Just ask me...</p>
        <br>
        <h3>Cool heading</h3>

           <ul>
               <li>Cool item 1</ul>
               <li>Cool item 2</ul>
               <li>Cool item 3</ul>
               <li>Cool item 4</ul>
           </ul>

<?php
}
add_action( 'wcuc_settings_tab', 'wcuc_shop_tab' );
function wcuc_shop_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'shop-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=shop-tab' ); ?>"><?php _e( 'Shop Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_shop_render_options_page' );

function wcuc_shop_render_options_page() {
global $wcuc_active_tab;
if ( 'shop-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Shop Page Customizer', 'wcuc' ); ?></h3>
<p>some stuff</p>
<?php
}
// product tab
add_action( 'wcuc_settings_tab', 'wcuc_product_tab' );
function wcuc_product_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'product-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=product-tab' ); ?>"><?php _e( 'Product Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_product_render_options_page' );

function wcuc_product_render_options_page() {
global $wcuc_active_tab;
if ( 'product-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Product Page Customizer', 'wcuc' ); ?></h3>
<p>Product page stuff</p>
<?php
}
// cart tab
add_action( 'wcuc_settings_tab', 'wcuc_cart_tab' );
function wcuc_cart_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'cart-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=cart-tab' ); ?>"><?php _e( 'Cart Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_cart_render_options_page' );

function wcuc_cart_render_options_page() {
global $wcuc_active_tab;
if ( 'cart-tab' != $wcuc_active_tab )
    return;
    ?>

    <h3><?php _e( 'Cart Page Customizer', 'wcuc' ); ?></h3>
    <p>Cart page stuff</p>
      <?php
  }
      // checkout tab
add_action( 'wcuc_settings_tab', 'wcuc_checkout_tab' );
function wcuc_checkout_tab(){
global $wcuc_active_tab; ?>
<a class="nav-tab <?php echo $wcuc_active_tab == 'checkout-tab' ? 'nav-tab-active' : ''; ?>" href="<?php echo admin_url( 'options-general.php?page=wcuc-settings&tab=checkout-tab' ); ?>"><?php _e( 'Checkout Page Customiser', 'wcuc' ); ?> </a>
<?php
}

add_action( 'wcuc_settings_content', 'wcuc_checkout_render_options_page' );

function wcuc_checkout_render_options_page() {
global $wcuc_active_tab;
if ( 'checkout-tab' != $wcuc_active_tab )
    return;
?>

<h3><?php _e( 'Checkout Page Customizer', 'wcuc' ); ?></h3>

        <p>Checkout page stuff</p>
<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />       

            <?php
add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
 if($hook_suffix == 'wcuc_admin_settings_page-checkout-tab') {
// 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 );
 }
}
            ?>
<?php
}

JS code is admin/js/my-script.js. No console errors, but no response when I click the text field either

jQuery(document).ready(function($){
 $('.my-color-field').wpColorPicker();
alert("dang");
});
  • Do you see any errors in the browser console? Make use of console.log() or alert() to check things like the click handler. Under step 4 (Advanced usage) you have a change function where you can add some debugging to see if anything is firing. Can you also post the code you have please. – Alexander Holsgrove Feb 8 at 10:20
  • I just added the code I have – John Cook Feb 8 at 10:58
  • From your update, you should see that alert("dang") when you visit the admin. If you don't see that, then it suggests you've not registered/enqueued your my-script.js file for the admin area to use, hence the my-color-field not triggerind the color picker. – Alexander Holsgrove Feb 8 at 11:00
  • Yep, it is a no show. In the plugin folders I'm working in the admin folder /admin/some-plugin.php /admin/js/my-script.js I've tried altering this to wp_enqueue_script( 'admin/js/my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); and wp_enqueue_script( 'js/my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); All 3 without luck – John Cook Feb 8 at 11:06
  • It's enqueuing now but I'm getting this some-plugin-admin.js?ver=1.0.0:2 Uncaught TypeError: $(...).wpColorPicker is not a function at HTMLDocument.<anonymous> (some-plugin-admin.js?ver=1.0.0:2) at i (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils&ver=5.0.3:2) at Object.fireWith [as resolveWith] (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils&ver=5.0.3:2) at Function.ready (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils&ver=5.0.3:2) at HTMLDocument.K (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils&ver=5.0.3:2) – John Cook Feb 8 at 11:33

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.