how to load Javascript in Wordpress Plugin
Question
Can someone show me how to include this javascript file into my wordpress plugin. I have tried all the wp_enqeue_script() methods but nothing happens.
ok here is my example plugin code with comments explaining what I would like.
<?php
/*
Plugin Name: Ava Test
Plugin URI: http://#.com
Description: A plugin that is used for my javascript tests
Author: Ronny Kibet
Author URI: http://ronnykibet.com
version: 1.001
*/
include(popup.js);
/*when I include it this way, it works fine, but gives an error when I activate the plugin
'plugin generated 453 characters ...'
*/
function popup() {
$src = plugins_url('popup.js', __FILE__);
wp_register_script( 'popup', $src );
wp_enqueue_script( 'popup' );
}
/*
when I included it this way, plugin is activated but nothing happens.
*/
?>
this is the popup.js
<script type="text/javascript">
function popup(){
alert('hello there this is a test popup')
}
</script>
<body onload="popup()">
</body>
So does anybody know how to call this script to work correctly in wordpress plugin?
4 answers
solution1
52 ACCPTED 2012-02-04 17:50:13
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.
solution2
2 2012-02-05 00:39:14
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!
solution3
0 2012-02-04 16:45:01
popup.js should only containt JavaScript-code, no HTML. Try this (in popup.js )
function popup(){
alert('hello there this is a test popup');
}
window.addEventListener('load',function(event){popup();},false);
Or simply this:
window.addEventListener('load',function(event){
alert('hello there this is a test popup');
},false);
solution4
-2 2012-02-04 15:31:27
You are including HTML in your .js file and you never added a semicolon to the end of the alert(). Maybe try just having this in your popup.js:
function popup(){
alert('hello there this is a test popup');
}
And then in your HTML add the onload="popup()" to the body tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.