how to load Javascript in Wordpress Plugin

You need to specify when the load should happen, try this.

<?php
/*
Plugin Name: Ava Test
Plugin URI: https://matsio.com
Description: A plugin that is used for my javascript tests
Author: Ronny Kibet
Author URI: https://matsio.com
version: 1.001
*/

add_action('wp_enqueue_scripts','ava_test_init');

function ava_test_init() {
    wp_enqueue_script( 'ava-test-js', plugins_url( '/js/ava_test_.js', __FILE__ ));
}

Also, there are errors in your JS, but I have seen the correct version in some answers, hope this helps

Update : There is a hook called wp_enqueue_scripts, as mentioned by @brasofilo which should be used in lieu of init for loading scripts.


Learning to work within WP structure can be frustrating.

And, learning to bring in javascript can be even more frustrating.

So, everyone here has contributed something valuable, however you need to bring it all together. So:


First:

Remove your include line. You do not need it.

Second:

Be sure that the $src variable in your code is in fact the correct path. I would add an:

    echo $src;

To TEST if the location is correct.

Third:

Aghoshx is correct - you MUST have the hook reference:

    add_action('init','popup');

(Since you named the function popup, that's what I put in - HOWEVER, to prevent function name colissions with other WP functions and plugins, I recomment that you change it to something more unique, like aghoshx proposed)

Fourth:

Check that your script is LOADING. After you do steps 1-3 above, then go refresh the WP page and do a "view source". Look for your script file. If you're in Firefox, you can actually CLICK on the url and it will load it - if you are in IE, then copy-paste the url into the url bar and see if in fact your file is THERE (if so, it's loading. If NOT, then it's NOT loading the file properly, and you need to fix the path you are setting into th $src variable).

Fifth:

Once you get the above nailed, cillosis is right - you need to remove everything BUT the javascript function (you even remove the tags) from the javascript file.

Finally:

look at Martti Laines answer - you need to bind the event by using his suggested window.addEventListener, OR ELSE modify the tag in your php template to contain the onload="popup" (like you had in the script file).

One final bit of suggestion:

jQuery makes many things MUCH easier. It's very easy to bring jQuery into your WP plugin. Just add this in your php popup function:

    wp_enqueue_script('jquery');

Good luck!