Screencast: Part 27: Working with JavaScript (and jQuery) inside WordPress

Adding jQuery and JavaScript inside WordPress should be simple but you will encounter lots of hurdles before you get your JavaScript working. This screencast is meant to give you an idea of some of the hurdles and how you can overcome them.

Part 1

Part 2

In order to use the default jQuery shortcut of $, you can use the following wrapper around your code:

[prettify]
jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});
[/prettify]

add something like this to your functions.php

[prettify]
if ( !is_admin() ) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”, ‘false’, ‘1.8.0’, false);
wp_register_script(‘farinspace’, get_bloginfo(‘template_directory’). “/assets/js/libs/jquery/farinspace/jquery.imgpreload.min.js”, ”, ‘1.0’, true);
wp_register_script(‘pehCustom’, get_bloginfo(‘template_directory’). “/assets/js/script.js”, ”, ‘1.0’, true);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘farinspace’);
wp_enqueue_script(‘pehCustom’);
}
[/prettify]

Links used in Screencast

Google CDNs
Traditional way to add JavaScript to an HTML page
JavaScript best practices
wp_register_script
wp_enqueue_script

Back to Main WordPress Page with all Tutorial Links

Back to Main WordPress Page with list of tutorials on creating a WordPress custom theme from scratch.

Leave a Reply

Your email address will not be published. Required fields are marked *