WP Smith

Creating WordPress & Genesis Websites Since 2010

How to Add a Genesis Top Navigation System

Adding a top navigationn menu to a Genesis child theme is quite easy. There are a couple of approaches. First, one can simply move the primary navigation to the top.

<?php
/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );
view raw reposition_primary.php hosted with ❤ by GitHub

Howevever, if you are already using the primary navigation, this may not work for you and a different approach may be necessary.

The approach depends on what menus you are currently using (e.g., using both primary and secondary or just primary with secondary not registered, etc). You would need to first, register the menu and second, then, output the menu.

Register the Menu

First locate something like the following in your functions.php file.
https://gist.github.com/4496105

If you don't then, you have the default Genesis setup. This is the same as having the following in your functions.php file.

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' )
'secondary' => __( 'Secondary Navigation Menu', 'child-domain' )
)
);
view raw genesis-menus-default.php hosted with ❤ by GitHub

So you have two options:

  1. If not using the secondary navigation, you can use secondary navigation as the top menu
  2. Create a new top menu navigation system

Use Secondary Navigation as Top Menu

<?php
/** Reposition the secondary navigation */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before', 'genesis_do_subnav' );
view raw reposition_secondary.php hosted with ❤ by GitHub

Create Top Navigation

To create a new navigation system, you need to do the following in your functions.php:

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' ),
'secondary' => __( 'Secondary Navigation Menu', 'child-domain' ),
'top' => __( 'Top Navigation Menu', 'child-domain' ),
)
);
view raw genesis-menus-top.php hosted with ❤ by GitHub

This will add a menu system of Top that you can find in Appearance > Menus. If you just want primary and top, remove the secondary menu from the middle.

<?php
add_theme_support(
'genesis-menus',
array(
'primary' => __( 'Primary Navigation Menu', 'child-domain' ),
'top' => __( 'Top Navigation Menu', 'child-domain' ),
)
);
view raw genesis-menus-top-2.php hosted with ❤ by GitHub

Output the Menu

Finally, you will need to output the menu.

<?php
add_action( 'genesis_before', 'wps_do_top_nav' );
/**
* Output Top Navigation
*/
function wps_do_top_nav() {
/** Do nothing if menu not supported */
if ( ! genesis_nav_menu_supported( 'top' ) )
return;
/** If menu is assigned to theme location, output */
if ( has_nav_menu( 'top' ) ) {
$args = array(
'theme_location' => 'top',
'container' => '',
'menu_class' => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
'echo' => 0,
);
$nav = wp_nav_menu( $args );
/** Wrap nav menu with div and .wrap div if applied to #nav */
$nav_output = sprintf( '<div id="top-nav">%2$s%1$s%3$s</div>', $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );
echo $nav_output;
}
}
view raw wps_do_top_nav.php hosted with ❤ by GitHub

This will output your top navigation the same as you output your primary navigation with all references to nav changed to top-nav.

Genesis Grid Loop in Genesis 1.9

Some people may be experiencing some issues with the Genesis Grid Loop in Genesis 1.9 (and rightly so).

[php]
if ( function_exists( 'genesis_grid_loop' ) ) {
genesis_grid_loop(
array(
'features' => 0,
'feature_image_size' => 0,
'feature_image_class' => 'alignright post-image',
'feature_content_limit' => 0,
'grid_image_size' => 'thumbnail',
'grid_image_class' => 'alignleft',
'grid_content_limit' => 250,
'more' => __( '[Read more...]', 'child-domain' ),
'posts_per_page' => 25,
/** Remove categories from loop */
'category__not_in' => array( 1, 2, 3, )
)
);
} else {
genesis_standard_loop();
}
[/php]

However, with Genesis 1.9, this will no longer work. Instead you must modify the query as you should via pre_get_posts hook. Bill Erickson has a great tutorial on how to do customize the WordPress Query, which I will also re-iterate here.

Custom Grid Loop Conditional

First, I love the Grid Loop setup that Gary and Bill did here. However, both Gary and Bill admit that there are other better options than using the genesis_grid_loop() such as Bill's Better, Easier Grid Loop.

However, some sites are just not worth re-doing. So in the meantime a fix is necessary. So here it is. Personally, I would use the function child_is_doing_grid_loop() from the Advanced Grid Loop. This will be the function where you declare all the places that you want the Grid Loop to appear using the WordPress Conditionals. This will keep your code organized.

<?php
/**
* Possibly amend the loop.
*
* Specify the conditions under which the grid loop should be used.
*
* @author Bill Erickson
* @author Gary Jones
* @author Travis Smith
* @link http://code.garyjones.co.uk/genesis-grid-loop-advanced/
* @link http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
*
* @return boolean Return true of doing the grid loop, false if not.
*/
function wps_is_doing_grid_loop() {
// Amend this conditional to pick where this grid looping occurs.
// This says to use the grid loop everywhere except single posts,
// single pages and single attachments.
return ( ! is_singular() );
}
view raw wps_is_doing_grid_loop.php hosted with ❤ by GitHub

Modify the WordPress Query Correctly

Then you need to modify the WordPress Query via pre_get_posts hook. Here's how you can modify the query to exclude a category.

<?php
add_action( 'pre_get_posts', 'wps_exclude_cat_in_grid' );
/**
* Exclude Category from Grid
*
* @author Bill Erickson
* @author Travis Smith
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @link http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
* @param object $query WP Query data
*
*/
function wps_exclude_cat_in_grid( $query ) {
if( $query->is_main_query() && wps_is_doing_grid_loop() ) {
$query->set( 'cat', '-1,-2' );
}
}
view raw wps_exclude_cat_in_grid.php hosted with ❤ by GitHub

Here's how you can modify the query to limit the query to a category.

<?php
add_action( 'pre_get_posts', 'wps_include_cat_in_grid' );
/**
* Limit Query to one Category
*
* @author Bill Erickson
* @author Travis Smith
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @link http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
* @param object $query WP Query data
*
*/
function wps_include_cat_in_grid( $query ) {
if( $query->is_main_query() && wps_is_doing_grid_loop() ) {
$query->set( 'cat', '4' );
}
}
view raw wps_include_cat_in_grid.php hosted with ❤ by GitHub

Here's how you can modify the query to change the posts_per_page.

<?php
add_action( 'pre_get_posts', 'wps_change_posts_per_page_in_grid' );
/**
* Change Posts Per Page
*
* @author Bill Erickson
* @author Travis Smith
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @link http://wpsmith.net/2013/genesis/genesis-grid-loop-in-genesis-1-9/
* @param object $query WP Query data
*
*/
function wps_change_posts_per_page_in_grid( $query ) {
global $wp_the_query;
if( $query->is_main_query() && wps_is_doing_grid_loop() ) {
$query->set( 'posts_per_page', '15' );
}
}
view raw wps_change_posts_per_page_in_grid.php hosted with ❤ by GitHub

Please note that all of this code belongs in functions.php or some other custom file. I personally recommend a custom query.php or grid.php file to keep your code clean.

So back in your template file, you can change the original loop function to:
[php]
if ( function_exists( 'genesis_grid_loop' ) ) {
genesis_grid_loop(
array(
'features' => 0,
'feature_image_size' => 0,
'feature_image_class' => 'alignright post-image',
'feature_content_limit' => 0,
'grid_image_size' => 'thumbnail',
'grid_image_class' => 'alignleft',
'grid_content_limit' => 250,
'more' => __( '[Read more...]', 'child-domain' ),
)
);
} else {
genesis_standard_loop();
}
[/php]
These are the necessary components for displaying the loop, which is modified via pre_get_posts now.

Genesis Child Theme Code Audit

Calling all Genesis developers! Through January 2nd, I am offering a basic initial audit of up to 4 Genesis child themes for $50 and only $50!

Get it Now!

You may be thinking, "Why should I audit my theme if it is selling already so well?" Or, "My theme is on the Genesis Marketplace and doesn't need to be audited." Or, "I purchased this from the Genesis Marketplace, so the theme has already been audited." Or, "I developed this theme for a client who won't know." Or, "I had this theme developed by another Genesis developer, and I am just not sure about it."

First, themes on the Genesis Marketplace have not necessarily been audited. Genesis Marketplace themes are developer dependent. While StudioPress recommended these themes be audited by myself or Gary Jones or another developer, the submitting developer may or may not have done this because until now, audits were expensive. Thus, the theme may or may not be written to WordPress standards and/or best practices.

Second, themes audited almost always reveal something, which will lead to easier maintenance, lower support costs, code confidence, and happier customers! Customers always find out how good or bad the code is/was that was written. The theme/site may come into conflict with a plugin that they want to use. The theme/site may have issues with the Genesis/WordPress upgrade cycle. Whatever the case, they either return to you, try to do it themselves, or hire another Genesis developer. Even themes/sites I've built six months ago give me shivers when I go back and work on them. I've worked on themes that were originally developed by many Genesis developers and surely there have been Genesis developers who have worked on sites that I originally created. If, however, I had the theme/site audited then I would have most definitely produced a better product and had more confidence in my code.

Get the Audit Today

Enable Lazy Load on Genesis

If you would like to enable Lazy Load on Genesis, you may notice that the feature images do not lazy load. Because of the simplicity of Lazy Load, it is quite easy to add this functionality.

Add the following to your functions.php file. And BOOM! you're done!

The later function, wps_lazyload_placeholder_image, will enable you to setup a default image instead of the Lazy Load's default placeholder image, which is 1x1.trans.gif. However, if you are good with the 1x1 gif, then you don't need the second function.

Resize Genesis Footer Widgets to Equal Sizes

This weekend, I wrote a set of code that makes all the footer widgets the same size dynamically, which is perfect for CSS styling. For example, if you wanted side borders on the footer widgets, you were either stuck with unequal vertical bars or setting the footer widgets a specific size for design purposes. However, with this code snippet, then you are good to go.

This code makes the footer widgets the same size if the browser is greater than 960px. If less, it drops it to { height: auto } for you to handle using media queries and other responsive code.