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");
});
7
  • 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. Feb 8, 2019 at 10:20
  • I just added the code I have
    – John Cook
    Feb 8, 2019 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. Feb 8, 2019 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, 2019 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, 2019 at 11:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.