Using Conditionals with WP Enqueue Script and Genesis Framework

In my last post, I wrote about using wp_enqueue_script with the Genesis Framework. Today, I wanted to discuss using conditionals with wp_enqueue_script.

WordPress has a slew of conditional tags built in that allow you to display content on specific pages, page templates, posts, etc. Using WP Enqueue Script with conditionals gives you the best control over the scripts that are loading on your site, by keeping all of your code in one location.

Below is an example of how to load the Isotope jQuery plugin onto a portfolio page. The code should be placed in your functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/** Load scripts on Portfolio page */
add_action('genesis_after_footer', 'child_load_portfolio');
function child_load_portfolio() {
    if(is_page('Portfolio')) { 
        wp_register_script( 'isotope', get_bloginfo('stylesheet_directory').'/lib/js/jquery.isotope.min.js' );
        wp_enqueue_script ( 'isotope' );
    }
}
 
/** Isotope vars */
add_action('genesis_after', 'child_script_portfolio');
function child_script_portfolio() {
    if(is_page('Portfolio')) { ?>
      <script type="text/javascript">
          var $container = $('#container');
          // initialize isotope
          $container.isotope({
              layoutMode: 'fitRows',
          });
 
          // filter items when filter link is clicked
          $('#filters a').click(function(){
              var selector = $(this).attr('data-filter');
              $container.isotope({ filter: selector });
              return false;
          });
 
      </script>
<?php } }
/** Load scripts on Portfolio page */
add_action('genesis_after_footer', 'child_load_portfolio');
function child_load_portfolio() {
    if(is_page('Portfolio')) { 
        wp_register_script( 'isotope', get_bloginfo('stylesheet_directory').'/lib/js/jquery.isotope.min.js' );
        wp_enqueue_script ( 'isotope' );
    }
}

/** Isotope vars */
add_action('genesis_after', 'child_script_portfolio');
function child_script_portfolio() {
    if(is_page('Portfolio')) { ?>
      <script type="text/javascript">
          var $container = $('#container');
          // initialize isotope
          $container.isotope({
              layoutMode: 'fitRows',
          });

          // filter items when filter link is clicked
          $('#filters a').click(function(){
              var selector = $(this).attr('data-filter');
              $container.isotope({ filter: selector });
              return false;
          });

      </script>
<?php } }

So lets go over it, line by line, to cover what this script is doing.

Line 2: Add our new function after the Genesis closes the footer tag.

Line 4: If the current page is titled Portfolio, execute the code inside the brackets. If not, move along.

Line 5: Register the Isotope script, as well as it’s location. The get_bloginfo('stylesheet_directory') section is especially important when dealing with Genesis, as it points to the child theme folder.

Line 6: Enqueue the script.

As far as registering and enqueuing the script, that’s all there is to it. However, Lines 11 through 29 deal with loading the variables for the Isotope script; so lets look at that, too.

Line 11: This part is especially important. The script variables have to be loaded after its dependency has been loaded (in this case Isotope).

Line 13: Again, if the current page is titled Portfolio, execute the code inside the brackets. If not, move along.

Lines 14-28 These lines are where you place your script variables.

If you found this post helpful, please share it. If you have any questions, I’m more than happy to lend a hand!

Using WP Enqueue Script with Genesis Framework

Generally, it’s a good idea to include JavaScript/jQuery libraries and plugins at the bottom of the page, just before closing the body tag. The reason is pretty simple, HTTP/1.1 specification suggests that browsers not download more than two assets in parallel.

By loading stylesheets and static HTML before JavaScript and jQuery, the page will be able to render (and appear to load) more quickly. This assumes that your scripts are using $(document).ready() or window.onLoad.

If you’re using, for example, document.write, moving jQuery to the bottom of the page will only break your code.

I guess I should note that the performance gained by loading JavaScript and jQuery at the bottom of the page is quite minimal, but it’s good to get in the practice of optimizing as much as possible. It all adds up.

In addition, using wp_enqueue_script is the best way to load JavaScript and jQuery into your WordPress template. It allows for greater control of when and where JS loads on your site. TutsPlus offers a really awesome (free) intro into using wp_enqueue_script, so I’ll skip that and go straight into using it with the Genesis Framework (it’s not much different).

The code below is based on code by Greg Rickaby, but has been changed to improve performance by loading jQuery in the footer.

1
2
3
4
5
6
/** Remove script loading from header */
add_action('wp_enqueue_scripts', 'child_deregister_scripts');
function child_deregister_scripts() {
      wp_deregister_script( 'jquery' );
      wp_deregister_script( 'jquery-ui' );
}
/** Remove script loading from header */
add_action('wp_enqueue_scripts', 'child_deregister_scripts');
function child_deregister_scripts() {
	  wp_deregister_script( 'jquery' );
	  wp_deregister_script( 'jquery-ui' );
}

Here we remove jQuery from loading in the header of Genesis. By default, Genesis uses the self hosted version of jQuery.

1
2
3
4
5
6
7
8
/** Load scripts before closing the body tag */
add_action('genesis_after_footer', 'child_script_managment');
function child_script_managment() {
      wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' );
      wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' );
      wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array( 'jquery' ), '4.0', false );
      wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js', array( 'jquery' ), '1.9.2' );
}
/** Load scripts before closing the body tag */
add_action('genesis_after_footer', 'child_script_managment');
function child_script_managment() {
	  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' );
	  wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' );
	  wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array( 'jquery' ), '4.0', false );
	  wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js', array( 'jquery' ), '1.9.2' );
}

Above we add the Google CDN version of jQuery after closing the footer tag. Using the Google CDN-hosted version of jQuery is another performance gain, because it will be cached for any visitors who have loaded another site that uses the same version.

Reflex for Genesis Framework – A Blank, Responsive Child Theme

I just released the first iteration of a blank child theme for the Genesis Framework, that I am calling Reflex. Brian Gardner blogged in October about the next version of Genesis (1.9) having mobile responsiveness baked in. Reflex is based around the blank child theme by Christopher Cochran at Genesistutorials.com.

I decided to build Reflex for several reasons. First, to help save time building client sites. Using Genesis helps cut down on the amount of code I write, but I wanted a blank child theme that would allow me to easily build responsiveness into my clients’ sites. And while Bones by Eddie Machado is awesome, I wanted to go in a slightly different direction.

Second, I decided it was time to get on board and learn em’s and percentages. I’ve been pretty stubborn about changing the way that I write layouts, because pixels are what I’m comfortable with… but, I finally caved.

I released Reflex because I figured if it was helpful for me, someone else may find it helpful, too.

In future iterations, I’ll be working to clean up and standardize the code, as well as improve the number of responsive styles. This is very, very much a work in progress. On top of that, Genesis 1.9 is still in beta stages.

You can download Reflex on Github.