How do I include a javascript file in Wordpress admin Widgets

Question

I have created a widget for wordpress. The form of the widget has some input boxes. Now, I want to add a custom input box which uses a javascript file I downloaded from http://jscolor.com/

Now, the problem is, it is not working. I have registered the javascript file like this in the form function of the WP_Widget class.

require_once('index.php');
add_action('admin_enqueue_scripts', 'pw_load_scripts');

The pw_load_scripts function is in index.php

function pw_load_scripts() {
    wp_register_script('custom-js', plugin_dir_url(__FILE__).'scripts/jscolor.js');
    wp_enqueue_script('custom-js');
}

After all these, it is not working. What is the correct way to do this task?

My error.log has this error

[Mon Oct 07 21:37:30.591896 2013] [:error] [pid 14853] [client 127.0.0.1:42453] PHP Fatal error:  Cannot redeclare _wp_menu_output() (previously declared in /var/www/wordpress/wp-admin/menu-header.php:36) in /var/www/wordpress/wp-admin/menu-header.php on line 36

Thank you

What does the PHP error log say, or what other visible errors do you see? — manishie
– manishie, Commented Oct 7, 2013 at 15:26
In widgets.php, only widgets till above and left of my widget can be seen. Others cannot be seen. — Rishi
– Rishi, Commented Oct 7, 2013 at 15:45
What does the PHP error log say, and also the Javascript console. Please check both and make sure there are no errors. — manishie
– manishie, Commented Oct 7, 2013 at 15:57
This is the error I get in error log ' [Mon Oct 07 21:37:30.591896 2013] [:error] [pid 14853] [client 127.0.0.1:42453] PHP Fatal error: Cannot redeclare _wp_menu_output() (previously declared in /var/www/wordpress/wp-admin/menu-header.php:36) in /var/www/wordpress/wp-admin/menu-header.php on line 36' — Rishi
– Rishi, Commented Oct 7, 2013 at 16:08
That's a Fatal Error, meaning that the site wouldn't be working... I guess it's not related, and it's dated from October anyway. — brasofilo
– brasofilo, Commented Oct 7, 2013 at 16:12

Community · Accepted Answer · 2017-04-13 12:37:28Z

The ~~correct~~ hook is admin_print_scripts ¹ to enqueue styles and scripts.

Note that admin_footer and admin_head also accept the same screen targeting 'actionname-$hook':

add_action( 'admin_print_scripts-widgets.php', 'admin_enqueue_so_19228543' );

function admin_enqueue_so_19228543()
{
    wp_enqueue_script( 
            'my-script', 
            plugins_url( '/my-script.js', __FILE__ ), 
            array(), // dependencies
            false, // version
            true // on footer
    );
    wp_enqueue_style( 
        'my-style', plugins_url( '/my-style.css', __FILE__ ) 
    );

}

_{1 The Codex is saying otherwise, but I was pretty sure this was an official stance. I'm researching and will report back.}

update

I cannot find any reference to admin_print_scripts being the correct hook, although it works and I've seen used this way many times. For completeness, this is how admin_enqueue_scripts works:

add_action( 'admin_enqueue_scripts', 'admin_enqueue_so_19228543' );

function admin_enqueue_so_19228543( $hook )
{
    if( 'widgets.php' != $hook )
        return;

    wp_enqueue_script( 
            'my-script', 
            plugins_url( '/my-script.js', __FILE__ ), 
            array(), // dependencies
            false, // version
            true // on footer
    );
    wp_enqueue_style( 
        'my-style', plugins_url( '/my-style.css', __FILE__ ) 
    );

}

_{Related: Difference between do_action('admin_enqueue_scripts', $hook_suffix) and do_action(“admin_print_styles-$hook_suffix”) syntax}

manishie · Accepted Answer · 2013-10-07 16:20:31Z

1

Try removing:

require_once('index.php');

I'm not sure where you got this from. It appears to be trying to reload wordpress' index.php file.

edited Oct 7, 2013 at 16:20

answered Oct 7, 2013 at 16:14

manishie

5,3321 gold badge23 silver badges21 bronze badges

2 Comments

Rishi Over a year ago

Hey thanks, the error got removed. But, the color picker is still not working. It is just a normal input box.

manishie Over a year ago

Does your input element look like: <input class="color">

Collectives™ on Stack Overflow

How do I include a javascript file in Wordpress admin Widgets

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related