Category Archives: Javascript

Enable the YouTube iframe API for embedded videos

By default, videos embedded in WordPress posts are missing the enablejsapi querystring parameter that allows YouTube’s iframe API to interact with them. Fortunately you can filter the results of embedded media using the oembed_result filter. Here’s an example:

function my_youtube_player_iframe_api( $html ) {
	if ( false !== strpos( $html, 'youtube' ) ) {
		$html = str_replace( '?feature=oembed', '?feature=oembed&enablejsapi=1', $html );
	}
	return $html;
}
add_filter( 'oembed_result', 'my_youtube_player_iframe_api', 10, 1 );

OEmbed results are cached as post meta, so once you’ve modified the output you’ll have to delete previously-cached URLs before the new filter will take effect for existing posts.

Once you’ve done all of that you can configure and use the iframe API to track interactions, manipulate video controls, and do anything else that the API exposes.

Add async, defer, or other attributes to enqueued WordPress scripts

Sometimes it’s useful to add the async or defer attributes to your script calls in order to prevent that script from blocking the rest of your page from rendering. This is particularly useful with third party scripts which you do not host in the same place as the rest of your site.

If you need to load an enqueued script asynchronously in WordPress, or modify the <script> element in any other way, you can use code like the following:

/**
 * Add async attributes to enqueued scripts where needed.
 * The ability to filter script tags was added in WordPress 4.1 for this purpose.
 */
function my_async_scripts( $tag, $handle, $src ) {
    // the handles of the enqueued scripts we want to async
    $async_scripts = array( 'some-script', 'another-script' );

    if ( in_array( $handle, $async_scripts ) ) {
        return '<script type="text/javascript" src="' . $src . '" async="async"></script>' . "\n";
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );

The script_loader_tag filter was added in WordPress 4.1 for specifically this purpose. It is run whenever a script tag is generated by WordPress using the wp_enqueue_script() function. In this example we compare the script $handle against a list of known scripts that we want to load asynchronously.

Introduction to Ajax with Mootools

This is a basic tutorial that offers an introduction to the Ajax component of the mootools javascript library. At the end of this tutorial you’ll be able to use an HTML form to send requests to a PHP script and return a response without refreshing the page. This basic process is the foundation for most of the ajax that you see littered around the internet today. Mootools offers a simple way to get your feet wet with this technology, and plenty of room to grow once you know what you’re doing.

This tutorial is something of a followup to one that I wrote some time ago, describing the same basic process using the moo.ajax class, a precursor to mootools. That article still gets a fair number of visits on my site, but since moo.ajax has been deprecated it isn’t very useful. This tutorial expands on that one a little, but is essentially an update. By now everyone has heard of ajax, so there’s no need to repeat the introduction. Let’s get started.

What You’ll Need

  • Some way to run PHP scripts. Many web hosts offer this. You can also set up a web server on your personal computer, which will make the development process much more simple.
  • A copy of the mootools library. I’ll show you how to get a customized version that meets all of our requirements.

Continue reading →

Introduction to Moo.Ajax

Update: Moo.Ajax has become deprecated since I originally wrote this article, as its functionality has been incorporated into the new mootools library. I’ve written a follow-up piece that explains this same basic principal using the more current library. I’d suggest checking that out if you’re interested in a dead-simple introduction to ajax.

This is a very basic tutorial which offers a glance at the moo.ajax class from Mad 4 Milk. It doesn’t expand too much on the tutorial that they provide, but I feel that it will help clarify a few things. Don’t let the length of this article frighten you, what you are about to learn is pretty simple. I just use a lot of words to explain it. By the time you’ve worked through this tutorial, you will be able to build a form that interacts with a PHP script and returns data, without refreshing the page. It’s a pretty simple process that can serve as the basis for some very cool applications.

Continue reading →