JavaScript Archives - Page 2 of 2

JavaScript the WordPress Way / Part 1

Two of the most important WordPress functions are often ignored by WordPress theme and plugin developers. This is the fault of the functions themselves, they need to improve their PR and hire better publicists.

It’s also possible your theme or plugin will work perfectly well without these functions on its own. Problems will arise when your theme or plugin both use the same JavaScript library or if Prototype and jQuery are both used on the same site.

These functions are used to add JavaScript to the html, either in the head or the footer.

Introducing wp_register_script and wp_enqueue_script

Partying like it’s 1999

A little under twelve months ago I wrote a post on a JavaScript base file I’d set up:

I could have used an existing frame work, such as the increasingly popular jQuery; I decided to use my own, which contains only the very basics, rather than have a larger file containing rarely used functions

—source (emphasis added for this post)

Within a couple of months of writing that, I was a convert to jQuery. There was no single reason for my conversion, from memory some of the reasons where:

the selector engine,
plugin availability,
documentation — both official and unofficial tutorials, and,
lazyness

It’s the last one that probably had the biggest influence, I’m too lazy to reinvent the wheel, and without using a framework that’s what I was going to be doing. Frequently. Examples in blogs I read, weather it be group blogs, such as A List Apart, or one person shows, such as CSS-Tricks were all beginning to use jQuery. If I were to stick to my guns and not use a framework, I’d be doing a lot of rewriting.

As for the functions that are rarely used? It’s really only the Ajax group of functions that I’ve never used, for the simple reason that I don’t like Ajax. In many of the situations it’s used, it is often fanciness without necessary function. Then again, ask me about Ajax in a couple of months’ time.

Including WordPress’s comment-reply.js (the right way)

Since threaded comments were enabled in WordPress 2.7, most themes include the following line in header.php

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

This code checks if the visitor is browsing either a page or a post and adds the JavaScript required for threaded comments if they are.

I prefer a slight variation

<?php
if ( is_singular() && comments_open() && get_option('thread_comments') )
  wp_enqueue_script( 'comment-reply' );
?>

My variation checks if the visitor is browsing either a page or a post, if comments are open for the entry, and finally, if threaded comments are enabled. If all of these conditions are met, the JavaScript required for threaded comments is added.

If you run your wp_enqueue_script calls in functions.php, as I do, this is the code to use:

<?php
function theme_queue_js(){
if ( (!is_admin()) && is_singular() && comments_open() && get_option('thread_comments') )
  wp_enqueue_script( 'comment-reply' );
}
add_action('wp_print_scripts', 'theme_queue_js');
?>

The call is added to the wp_print_scripts action as is_singular and comments_open are unknown during the init action.

Note: I’ve written a plugin to make the comment-reply JavaScript unobtrusive, it’s call Rapid Comment Reply.

JavaScript Equal Height Columns

The desire for equal height columns in a CSS layout is nothing new; there are many solutions available, some use JavaScript, others use CSS with negative margins, and then, there’s the faux columns method using background images. All of these methods have their place as perfectly valid solutions, and, depending on the situation, may be the best solution available.

Base JavaScript File

Upcoming posts on JavaScript will include references to functions in my base JavaScript file; rather than explain these functions each time, they’ll be detailed in this post for future reference.

There are many pre-written JavaScript examples and functions available, so it’s important to note that all of these functions have been written by others, some include slight changes; all moved to the namespace PWCC, as you’ll see in the source code.