About Jon Bellah

Radio silence broken. Over the weekend I worked hard to make finishing touches to my new blog, CSSForge.com, and get it launched.

Going forward, I will be posting on both CSS Forge and this site. CSS Forge will be geared more towards inspiration, tutorials and general web development news. Some articles will be cross-posted between here and there, but for the most part I will try and keep the content unique to each.

As a result, this site will be geared more towards the projects that I am working on. Some of those will have to remain nameless, because of NDA’s and what-not.

I hope you all like the new CSSForge site. I’m working on a post about device agnostic design (which is the approach that I took there).

When I first started using the Genesis Framework, it was pretty intimidating. I previously had no experience with using hooks and PHP logic was still rather fuzzy to me.

Once I started digging into the Genesis core and saw how things worked, though, it all became infinitely more clear.

Creating custom footers is one of those ways to get the functionality you want, where you want it, without having to resort to rebuilding the entire template from the ground up (which is, not-so-coincidentally, one of the things I love most about Genesis).

So without further ado, here is the code to replace the default footer with a custom footer. Place the code below in your themes functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12

/** Customize the footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5);
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15);
function child_custom_footer() { ?>
 
    <footer>
        <!-- Home page footer -->
    </footer>
 
<?php }
add_action( 'genesis_footer', 'child_custom_footer' ); 

/** Customize the footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5);
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15);
function child_custom_footer() { ?>

  	<footer>
  	    <!-- Home page footer -->
  	</footer>

<?php }
add_action( 'genesis_footer', 'child_custom_footer' ); 

That's all there is to it. Quite simple, actually... but what if you want to display one footer on the home page, but a different one on every other page?

Well here's how you would do that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/** Customize the footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5);
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15);
function child_custom_footer() { 
 
  if(is_front_page()) {?>
 
    <footer>
        <!-- Home page footer -->
    </footer>
    
  <?php }
 
  elseif (!is_front_page()) {?>
 
    <footer>
        <!-- Your other footer -->
    </footer>
 
  <?php }
}
add_action( 'genesis_footer', 'child_customer_footer' ); 

/** Customize the footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5);
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15);
function child_custom_footer() { 

  if(is_front_page()) {?>

  	<footer>
  	    <!-- Home page footer -->
  	</footer>
  	
  <?php }

  elseif (!is_front_page()) {?>

	<footer>
		<!-- Your other footer -->
	</footer>

  <?php }
}
add_action( 'genesis_footer', 'child_customer_footer' ); 

Let's take a quick look at it, line by line, and figure out what this function is doing.

Lines 2-4: These lines are removing the default Genesis footer.

Line 5: Name our new function child_custom_footer.

Line 7: If the current page is the front page of the site, execute the code in the brackets. If not, move to the elseif.

Lines 9-11: This is where you'll place your HTML.

Line 15: If the page is not the home page, execute the code in the brackets.

Lines 17-19: This is where you add the HTML for your alternate footer.

Line 23: Add our new function in the genesis_footer section of the Genesis Framework.

If you have any questions, feel free to leave me a comment!

---
Full disclosure: the above link to the Genesis Framework is an affiliate link... so you should totally buy it.

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!

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.

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.