Enqueue JavaScript into Wordpress plugin

Question

-I am trying to include JavaScript file in my plug-in. For testing I am calling a JavaScript function fun().

-My plug-in directory structure is:

(first-plugin, (js, 'animate.js'), 'first_plugin.php')

Above given directory format is like this (dirname, content_in_the_dir_separated_by_comma).

-Here is my main plugin file code:

function wl_include_files() {
    wp_enqueue_script('wl_js', plugin_dir_path( __FILE__ ) . '/js/animate.js', array( 'jquery' ));
}

function wl_activate_plugin() {
    add_action('admin_enqueue_scripts', 'wl_include_files');
}

//
register_activation_hook(__FILE__, 'wl_activate_plugin');

function test() {
    $v = "<script>fun();</script>";
    echo $v;
}

//
add_action('admin_init', 'test');

-Here is my JavaScript file code:

console.log('hi, file included properly.');

function fun() {
    alert("Hey, Someone calling me.");
}

-I am getting following error in my console:

ReferenceError: fun is not defined

-Can anybody tell what is the problem?

sequentiallee · Accepted Answer · 2017-02-25 18:54:43Z

1

The admin_init() hook is triggered before any other hook when a user accesses the admin area. This means that test() is being called before any part of the page is constructed. Or in other words, fun() would be called before even the <html> tag and more to the point, before animate.js is included in <head>.

test.php (main plugin file inside test plugin directory)

//this wp_footer hook is called once the entire front-end page body has been constructed
add_action('wp_footer', 'test');

wp_enqueue_script( 'myjs', plugin_dir_url( __FILE__ ) . '/js.js');

function test()
{
    echo '<script>test();</script>';
}

js.js (inside same test directory)

function test()
{
    console.log("Function called.");
}

(function ()
{
    console.log('JavaScript successfully included.');
})();

Further links:

edited Feb 25, 2017 at 18:54

answered Oct 18, 2015 at 22:34

sequentiallee

1641 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aagjalpankaj Over a year ago

Hey, thanks for showing interest in my question. Your solution is working. What if I want to call some javascript/JQuery code in admin_init hook? Is there any way to include javascript file in my plugin before admin_init?

sequentiallee Over a year ago

@Aviator What are you actually trying to do? Calling JavaScript before the start of a HTML document (there is no HTML document at the time of admin_init) doesn't make logical sense and would likely lead to unexpected results. admin_enqueue_scripts() would include JavaScript the same way wp_enqueue_script() does. Why do you need to call the included functions so early?

aagjalpankaj Over a year ago

Oh, that's true. Makes sense. Thanks! I have to add one extra menu in Wordpress media library.

function test() {     if (false != strpos($_SERVER['REQUEST_URI'], 'upload.php')) { 		  media_library_menu();    	     } } add_action('admin_init', 'test');

media_library_menu() will call JavaScript function. Is am I going wrong?

Collectives™ on Stack Overflow

Enqueue JavaScript into Wordpress plugin

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related