How To Install jQuery Mobile on Your WordPress Site the Right Way

So, you want to start taking advantage of some of the fantastic new jQuery Mobile features on your WordPress site, but you could use some guidance as to the best way to get up and running fast. No problem! With this quick walkthrough, I’ll show you the “right way” to get WordPress to load jQuery Mobile for you.

One of the main features I wanted to utilize was the new popups that you can build using jQuery Mobile. These are great for sharp-looking situational dialogues and other user-friendly ways to communicate to site visitors via prompts or forms. But, implementing them properly in WordPress can be a little challenging. Just as the security and dependability of WordPress means we get a powerful, robust framework; this also means we have to take a few extra steps when implementing new tools.

wp_enqueue_script

First and foremost, the only recommended method of calling a JavaScript function or statement in WordPress is through the wp_enqueue_script function, which is built into WordPress for the purpose. This simply lets your WordPress installation know that you have a file that you want loaded, and it makes sure that it becomes integrated without any conflicts or other issues. In the big picture, this is wonderful, keeps your WordPress installation organized, and saves us a lot of potential headaches. In the short term, though, it can be a pain.

Here’s the breakdown of what you need to do in order to get the JavaScript loaded:

1. Create a function
2. Call the wp_enqueue_script with the proper arguments
3. Use the add_action function to properly call your function that contains wp_enqueue_script

Here’s what it looks like within the code itself:

[sourcecode language=”php”]
<?php
function get_jqm() {
wp_enqueue_script(
‘jqm_js’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’,
array(‘jquery’),
‘1.2.0’
);
}
add_action(‘wp_enqueue_scripts’, ‘get_jqm’);
?>
[/sourcecode]

The wp_enqueue_script function has only two requirements: the unique name of the script you want to call (give it any name you want, preferably a sensible, semantic one) and the source of the script. In our case, we’re calling the JS file from the jQuery.com CDN.

I’ve also included a little extra information. Specifically, I included the version number, which is optional but a good practice nonetheless. When a new version comes out, you can update your code with the new information and the browser will download the latest release of jQuery Mobile. Otherwise, it will cache it and save the visitor that much bandwidth, resulting in quicker, snappier page loads for your WordPress website. So, include version numbers when you can, if you can.

wp_register_style and wp_enqueue_style

jQuery Mobile isn’t complete without its CSS! I see this mistake happen quite a bit. The JavaScript is in place, but the customized CSS file designed specifically to work with jQuery Mobile is not. So, let’s make sure this tragedy does not happen to you.

CSS files are a bit different and require even more steps to get right. You have to first register the style and then enqueue it:

[sourcecode language=”php”]

wp_register_style(
‘jqm_css’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
”,
‘1.2.0’
);
wp_enqueue_style(
‘jqm_css’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
”,
‘1.2.0’
);
[/sourcecode]

You’ll notice the pattern, I’m sure. It’s pretty much the same technique, but this method gives us the flexibility to determine the conditions in which the file is actually loaded in the browser. So we can register the CSS within WordPress, but we won’t require the user to download it until a specified event occurs and they truly need the CSS. I’m not going to get into these contingencies and dependencies in this article, but suffice it to say, this can be a powerful feature that few developers take full advantage of.

Putting the Code Together

Now that you see how the parts come together to properly enqueue the JavaScript while also registering and enqueueing the CSS, let’s look at the final code:

[sourcecode language=”php”]
function get_jqm() {
wp_enqueue_script(
‘jqm_js’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’,
array(‘jquery’),
‘1.2.0’
);

wp_register_style(
‘jqm_css’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
”,
‘1.2.0’
);
wp_enqueue_style(
‘jqm_css’,
‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
”,
‘1.2.0’
);
}
add_action(‘wp_enqueue_scripts’, ‘get_jqm’);
[/sourcecode]

You can copy and paste this code into your WordPress installation’s functions.php file or use this to set up your own plugin. Either way, this will properly connect your code to WordPress so that you can take full advantage of the latest, greatest jQuery Mobile features and functions for your WordPress website.

Frequently Asked Questions about Installing jQuery Mobile on Your WordPress Site