I was lucky enough to attend and present at Wordcamp Montreal 2013 – a wonderful conference in a wonderful city. I met lots of smart, interesting folks from the Montreal WordPress community and attended some thought-provoking and useful sessions. And, as my family was able to join me, we got to do some touristy stuff: the Jazz Festival, a Montreal Impact soccer game, and poutine were among the highlights.
My presentation focused on using jQuery, the JavaScript library, with WordPress. Here’re some of the key points I covered:
Adding jQuery to WordPress
Using jQuery, of course, means first including the jQuery library on the site. Outside of WordPress, we might use a CDN-hosted version of the library – from Google or code.jquery.com – but working through WordPress’s wp_enqueue_script in functions.php is better, for a variety of reasons:
wp_enqueue_scriptallows us to specify (via its third parameter) dependencies, telling WordPress that a given JS file depends on jQuery and ensuring that files get included in the proper order;- Linking to a CDN-hosted version of jQuery can wreak havoc with WordPress plugins, which rely on WordPress’s jQuery;
- jQuery will, in future versions, do a better and better job of managing jQuery version dependencies with jQuery Migrate;
- Including jQuery via
wp_enqueue_scriptin functions.php allows us to add scripts selectively and appropriately.
For instance,
1 2 3 4 5 6 7 8 9 10 11 | </code> function reveal_scripts_styles() { if ( is_page() ) { wp_enqueue_style( 'reveal-css', get_template_directory_uri() . '/css/reveal.min.css' ); wp_enqueue_style( 'reveal-theme', get_template_directory_uri() . '/css/reveal.theme.default.css' ); wp_enqueue_script( 'reveal-head', get_template_directory_uri() . '/js/head.min.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'reveal-plugin', get_template_directory_uri() . '/js/reveal.min.js', array( 'jquery' ), false, true ); } } add_action( 'wp_enqueue_scripts', 'reveal_scripts_styles' ); |
Here, we tell WordPress to include a set of styles and scripts only if the current content is a page. Including this particular set of CSS/JS files was so I could make use of Reveal, the jQuery presentation plugin, which I used to show the slides for the talk.
Autocomplete for Search
Here's an example of adding autocomplete - trying typing "post" into the search box in the right (assuming that you are using a desktop browser) column search field. I make use here of jQuery UI's autocomplete, a useful tool for easily adding this kind of functionality. The data for the autocomplete - that is, what to match the user's entered content against - can either be a hardcoded JavaScript array or, as in our case, an external feed. I installed the JSON Autocomplete plugin for WordPress - this allows me to serve up a JSON-ified feed of posts or some subset of the posts.
After that, it's a case of adding jQuery code to point autocomplete for the desired input field at the correct datasource:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $( '#s' ).autocomplete({ source: function( request, response ) { $.ajax({ url: '/?json=1&exclude=content,excerpt&search_title_only=1&s=' + request.term, success: function( data ) { response( $.map( data.posts, function( item ) { return { label: item.title, value: item.title, url: item.url } })); } }); }, select: function( event, ui ) { window.location.href = ui.item.url; }, minLength: 2 }); |
Orientation Change
jQuery Mobile, the mobile UI library for jQuery, offers support for handling orientation changes, when a user changes the orientation of their smartphone or tablet device from portrait mode to landscape mode or vice versa. View this page on a smartphone; you'll note that (unlike on a desktop), the top of the page shows "You are in portrait mode" or "You are in landscape mode", as appropriate, as you change the orientation of the device.
Easily done! The following code:
1 2 3 4 | $( window ).on( 'orientationchange', function( event ) { $( '.orientation' ).text( 'You are in ' + event.orientation + ' mode' ); }); $( window ).orientationchange(); |
sets the contents of the element with class orientation with the message whenever the event fires.
