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!