How to load jQuery into WordPress properly

4 comments

1. jQuery is included in WordPress core and when you include your javascript, you can declare that your script is dependent on jquery being loaded as the third parameter of wp_enqueue_script: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.

   The proper way to use wp_enqueue_script is to include it in a callback that is attached to a specific action hook. That sounded incredibly complicated to me when I started with WordPress, but it’s actually a really good system because it allows you to specify when your code should run during the initialization of WordPress.

   So, in your functions.php or a plugin, you add your hook.

   add_action( 'wp_enqueue_scripts', 'my_js_include_function' );
   

   Then, in that function, you running the actual inclusion, and declare that your script is dependent on jquery.

   function my_js_include_function() {
       wp_enqueue_script( 'my_script.js', '/path/to/myscript.js', array('jquery') );
   }
   

   The first parameter of wp_ennqueue_script() is an arbitrary name you are assigning to your script. If you were to then declare another script was dependent on the original one, that’s how you would refer to it in the third parameter.

   Log in to Reply

2. If you can’t use any WordPress methods, you can still include your Jquery plugin manually inside your extension_name.php, right after your wp_enqueue_script("jquery");

   echo "<script src='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js'></script>";
   

   Log in to Reply

3. Best way to do this is through the functions.php file,

   URL: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

   Sample:

   /**
    * Proper way to enqueue scripts and styles
    */
   function theme_name_scripts() {
       wp_enqueue_style( 'style-name', get_stylesheet_uri() );
       wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
   }
   
   add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
   

   What this code reads is that you are creating a function called “theme_name_scripts”, now you are calling wp_enqueue_script(), this takes 5 parameters “Script Name”, “URL”,”ARRAY”,”Version”,”True/False” (True loads in the Header, and False in the Footer)…

   Add_action part is a hook to attach this to the WordPress. It is self explanatory, you need it in order to make the function work. It says wp_enqueue_scripts from function ‘theme_name_scripts’ or the function name..

   Best of luck, if you need more help try Googleing “WordPress, enqueue Scripts tutorial”

   Log in to Reply

4. in my functions.php:

   function mytheme_scripts() {
       wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array('jquery'), false, true );
   }
   add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
   
   function custom_shortcode3() {
   
   echo "wp_enqueue_scripts();";
   }
   add_shortcode( 'totaldeprodutos', 'custom_shortcode3' );
   

   in my /js/myscript.js:

   <div id="show"></div>
   
   <script type="text/javascript" src="jquery.js"></script>
   
   <script type="text/javascript">
   
                       function total() {
           setInterval(function () {
               $('#show').load('datatotaldeprodutos.php')
           }, 1000);
       };
   

   I need shortcode show to function total()

   Log in to Reply