post: WordPress: Localization, Javascript & IIFE

Home

WordPress: Localization, Javascript & IIFE

Developing With WordPress

  

Articles

IIFE Javascript jQuery Theme Development WordPress

If you’ve been curious how a WordPress theme handles custom javascript – and particularly jQuery – functionality, then you may have delved inside the default WordPress theme, currently TwentySixteen. The main custom javascript file is functions.js, in the theme js subfolder.

You may have noticed something that not everyone is familiar with. The code is wrapped in a particular javascript design pattern, the Immediately Invoked Function Expression, or IIFE:


( function( $ ) {

//functionality

} )( jQuery );

This is an anonymous function expression, which as it suggests this is immediately executed on page load. It is a common Javascript design pattern, used by most popular libraries, including jQuery, to place all code inside of a local scope instead of populating the global scope. An IIFE protects against the environment in which it is placed, and avoids conflict with other libraries or global variables, particularly an issue with WordPress.

By wrapping the function expression inside parenthesis it is treated as a function expression, which can be immediately called via the additional set of parentheses. In this way it is not assigned to a global variable, and all properties are restricted to the local scope of the expression.

An additional feature is the ability to pass existing global objects e.g. window, document, jQuery etc. as parameters which are referenced as global objects within the local scope. For jQuery and WordPress this means the ability to use the $ variable without conflict with other libraries.

WordPress Localisation

Localization in WordPress is the ability to associate javascript global objects to a particular enqueued javascript file. It creates a global javascript object with a set of defined properties which can be used by the other jQuery functionality. It is very useful for passing required WordPress parameters such as the ajax_url or theme base path.

WordPress enqueues javascript via the theme’s functions.php file using the ‘wp_enqueue_scripts’ action hook as shown below. In this case the theme.js file containing the main IIFE is associated with a localized object ‘theme’.


// Load core, header & footer scripts 
function my_load_script() { 
 
    // Front end only
    if ( is_admin() ) { return; }

    //localize scripts?
    $local = array(
        'name'  => 'theme', 
        'trans' => array( 
            'base_url' => home_url(), 
            'ajax_url' => admin_url( 'admin-ajax.php' ) 
        )
    );

    // Add base footer script
    wp_register_script( 'scripts', get_template_directory_uri() . '/js/theme.js', array('jquery'), null, true ); 
    wp_localize_script( 'scripts', $local['name'], $local['trans'] ); 
    wp_enqueue_script( 'scripts' );
}

add_action('wp_enqueue_scripts', 'my_load_scripts'); 

On examining the html source, of for example the site home page, this functionality outputs a global scoped object ‘theme’ containing the properties: ‘base_url’ and ‘ajax_url’. This is placed immediately above the outputted script tag with the theme.js file path.


<script type='text/javascript'>
/* <![CDATA[ */
var theme = {"base_url":"https:\/\/on.tinternet.co.uk","ajax_url":"https:\/\/on.tinternet.co.uk\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='https://on.tinternet.co.uk/wp-content/themes/xxxx/js/theme.js'></script>

IIFE object accessibility

While the global scope doesn’t have access to the local scoped variables inside the IIFE, the local scope of the IIFE conversely has assess to the theme object, and so any jQuery functionality inside the IIFE can utilise this.

There is a slight cost to this however. The javascript parser will first look at the local scope for the theme object. If it can’t find it it will look within the global scope. Instead, we will pass the theme object as a parameter in the same way as the global jQuery instance, where it will be used within the local scope, and with the additional advantage of having a short hand abbreviation:


( function( $, t ) {

//functionality

} )( jQuery, theme );

Finishing it off

The jQuery object contains references to the global window and document objects. I like to create local scoped references to these for usability. In addition much of the functionality of jQuery revolves around the window load and dom ready states. So core functionality placeholders for these are created:


// Theme javscript functionality
(function($,t,undefined) {
    'use strict";
	
    var body = $('body'), _window = $(window);
	
    // On window load functions
    _window.on('load', function(){});

    // Disable default link behavior for dummy links : href='#'
    $('a[href="#"]').click( function(e) {
	e.preventDefault();
    });

    // Document Ready DOM
    $(function(){ });

})(jQuery, theme);

Wrapping it up

So, there you have it. Clean, accessible javascript suitable for any WordPress theme. Any thoughts?

comments powered by Disqus