JavaScript is a programming language that runs within your browser, it is responsible for creating an interactive experience on a web site. Sliders, interactive forms, rich text editing and infinite scrolling pages are just some of the many things that are enabled by JavaScript. jQuery is a collection of JavaScript functions often used to implement these kind of features. But dealing with JavaScript and jQuery takes a little bit of specialize knowledge and experience. Today let’s look at some of these issues that programers have to deal with.
How to Call jQuery and Other Scripts
jQuery is a JavaScript library of functions and is one of many libraries of JavaScript functions that have been incorporated into WordPress. If you search a WordPress site you will find that jQuery files are installed in the wp-inclues/js/jquery folder. Thus, to get jQuery running in a site one only has to add a line of code to the header of your site’s theme before the wp_head() function,
<?php wp_enqueue_script("jquery"); ?>
WordPress has special functions for registering and calling JavaScript files. We can use wp_register_script() function to tell WordPress about a new script file and wp_enqueue_script() function to include a script in a page. The function will insure that it is called at the correct time based on any other dependent files it may require.
Running additional javascript/jQuery files can be done using wp_register_script and wp_enqueue_script, but these need to be placed in the header after the wp_head() function. Also they can be called from a plugin file or the theme’s functions.php file, but they need to be called at the proper time by an admin function, like so:
function my_admin_scripts() {
wp_enqueue_script('my-upload');
}
add_action('admin_print_scripts', 'my_admin_scripts');
How to run an different version of jQuery
But sometimes the version of jQuery you may want to use is different than one supplied with WordPress, which currently is 1.11.0. In this case it is possible to substitute a different version of jQuery by deregistering the current jQuery library and registering another, like so:
<?php wp_deregister_script('jquery'); ?>
<?php wp_register_script('jquery', get_bloginfo('template_directory' . '/js//jquery-1.2.1.min.js'), false ); ?>
<?php wp_enqueue_script( 'jquery-1.2.1'); ?>
Determining if jQuery is Running
How will we know if we have jQuery running on our site or what version of jQuery is running? We can use a web inspector such as Firebug to see which scripts are running. A web inspector is an addon or built in tool in your web browser for viewing the internals of web pages and web apps. In Firebug, we can go Scripts panel and then click that is below the web inspector menu:
Now with jQuery running on our WordPress site we can invoke other installed jQuery scripts, such as the date picker, like so:
<?php wp_enqueue_script('jquery-ui-datepicker'); ?>
Usually the date picker will also need a css file, jquery-ui.css, loaded to display its user interface. For information on enqueueing styles sheets, see wp_enqueue_style.
Replacing the Dollar Sign Symbol
Besides the use of wp_register_script and wp_enqueue_script there is another important issue which is the use of the dollar sign ($) in jQuery files. Because another library in WordPress is already using the dollar sign any jQuery code we write has to either use or be be wrapped in a block with an alternate symbol or label such as ‘jQuery’. Here in this example we have a document ready function that sets up a date picker button. We will have to modify it from this:
$(document).ready(function(){
var calendar = $("#depart_date").datepicker({ dateFormat : 'mm/dd/yy' });
$("#calendar-button").click(function(){
calendar.datepicker("show");
});
});
to this in WordPress:
jQuery(document).ready(function(){
var calendar = jQuery("#depart_date").datepicker({ dateFormat : 'mm/dd/yy' });
jQuery("#calendar-button").click(function(){
calendar.datepicker("show");
});
});
Whenever one has to bring existing jQuery code or scripts into a WordPress theme it is necessary to change most of the dollar signs to ‘jQuery’. If this is not done then the code will not run and usually if you look at the console in the web inspector you will see a message such as ‘$ is not defined’.
Fixing jQuery Conflicts
Sometimes installing plugins or updating WordPress files will cause a jQuery script to fail. Usually there is some other script is causing a conflict. One type of conflict happens when more than one copy of a jQuery library is loaded at the same time for the same page. Thus, it is necessary to check the JavaScript script file list, as illustrated earlier, to see if there are any duplicates loaded. Removing any duplicates is the first step to eliminating conflicts. If a conflict persist, check the web inspector for any other error messages.
Clean Code and Cross Browser Issues
Another issue that often come up is the problem on lack coding standards with JavaScript. Each browser has its own implementation of JavaScript and some of these are more forgiving than others when the JavaScript code is not perfect. JavaScript code may work in on browser but not another. The more I work in JavaScript the more I see that more strict and clean the code will run on all browsers. The clean code practices to follow include such things as declaring all variables, ending each line with a semicolon, minimizing the use of global variables and avoiding the use of browser specific features unless you have a fallback. A fallback is code that will handle things when the required feature is not present in the current browser.
These are typical issues that one encounters when working with jQuery within WordPress. Learning to handle these issues will take the frustration out of using jQuery and enable you to develop high quality interactive websites that today business are asking for.