Testing my First Plugin - Script not loading WordPress

Question

I am trying to create a JavaScript file that uses jQuery to create an on-click event for a button.

I can't however get it to work and I'm not even sure if the script is loading. I have searched for it in the page source but it is not there so that would suggest that it is not loading at all. I am new to plugins and jQuery but I followed a tutorial and copied the below code.

<?php
/*

Plugin Name: PansHousePlugin
Plugin URI:  http://pans-house.com
Description: Adds OnClick and Scroll Functionality
Version: 1.0
Author: Paul Leppard
Author URI: http://pans-house.com

*/


add_action('wp_enqueue_scripts', 'load_js');

   function load_js() {
wp_register_script('click_scroll', plugins_url( 'click_scroll.js', __FILE__), array( 'jQuery'), true );
wp_enqueue_script('click_scroll');
}




?>

and the click_scroll.js file which is in the same folder as the plugin.php file

(function($){

$(function(){
     $("#gopricing").hide();
     $(".showpricingbutton").on("click", function(){
     $("#gopricing").toggle();
  });
});

}(jQuery));

Like I said this is exactly as the tutorial says. The plugin is activated without any errors but the div with the id gopricing is not hidden and the button does not do anything on clicking it, so I am assuming the script has not been loaded.

Thanks

In the web browser press ctrl + u. Bring up source code. now ctrl + f and search click_scroll.js if you can't find it then it's not loading. it might also be loading but the path is incorrect. so /click_scroll.js might have to be used — Web Dev Guy
– Web Dev Guy, Commented Feb 4, 2017 at 4:25
Thanks, I did check the page source and the click_scroll.js file is not there with and without the / in the plugins_url. — Bwizard
– Bwizard, Commented Feb 4, 2017 at 4:40

Nathan Dawson · Accepted Answer · 2017-02-04 05:23:27Z

1

You're listing a dependency that doesn't exist.

jQuery is the name of the library; the handle you need to refer to it with in order to load the library however is jquery. You're also setting the version number to true when I believe you were instead trying to tell the JS to load in the footer.

Change this:

wp_register_script('click_scroll', plugins_url( 'click_scroll.js', __FILE__), array( 'jQuery'), true );

To this:

wp_register_script( 'click_scroll', plugins_url( 'click_scroll.js', __FILE__ ), array( 'jquery' ), false, true );

The next issue you have is with your JS. The final line needs an adjustment to the brackets and you should be waiting for the ready event:

(function( $ ) {

    $( document ).ready(function() {
        $( "#gopricing" ).hide();
        $( ".showpricingbutton" ).on( "click", function() {
            $( "#gopricing" ).toggle();
        });
    });

})( jQuery );

Further reading: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

answered Feb 4, 2017 at 5:23

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

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

4 Comments

Web Dev Guy Over a year ago

He might also need the dirname() function

wp_register_script( 'click_scroll', plugins_url( 'click_scroll.js', dirname(__FILE__) ), array( 'jquery' ), false, true );

reference plugins_url from codex codex.wordpress.org/Function_Reference/plugins_url

Nathan Dawson Over a year ago

@WebDevGuy It would depend on how the plugin has been setup. If the plugin were a single PHP file in the plugins directory you're right, the author would want to use dirname(). Typically though a plugin is setup in a sub-directory of the plugins directory in which case dirname() wouldn't be appropriate. With that said the codex entry isn't particularly well worded

Bwizard Over a year ago

Fantastic, it now works. A steep learning curve awaits me no doubt but now my first plugin works and achieves the result I was looking for. Thanks Nathan.

Bwizard Over a year ago

just a quick question or I may open another question if I can't google the answer. Inside the gopricing div is a shortcode which shows a pricing table. With the code I have it toggles the div but I expected to see the pricing table show but it does not. Any ideas as to why. Do I need to refresh the div once it is toggled? Thanks

Collectives™ on Stack Overflow

Testing my First Plugin - Script not loading WordPress

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related