WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Aug 15 2011

How to Make a Custom Taxonomy Genesis Grid Archive Template

First, catch up on the Grid Loops by reading these posts:

  • Customizing the Genesis Grid Content, by Bill Erickson
  • How to Use the Genesis Grid Loop, by Brian Gardner
  • Genesis Grid Loop Advanced, by Gary Jones

Now, that you have a basic understanding of the Grid, let's apply this to a custom taxonomy archives.

First, you need a new document saved as taxonomy-{taxName}.php (for more information, see the WordPress Codex). So if you have a custom taxonomy of "Book Type," registered as 'book_type,' then the file name will be taxonomy-book_type.php.

Second, create the header, just like a page template. This is primarily for your organization and your information. So I just model it after the page template just to be consistent.

[php]<?php
/*
Template Name: Book Type Taxonomy Archive
*/[/php]

Third, you want to set all your customizations like remove post meta, post info, page layout, etc.

Fourth, you want to include the Grid Looper Helper function. This is a standard protocol for the Genesis Grid Loop:
[php]<?php

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'wps_grid_loop_helper' );
/** Add support for Genesis Grid Loop **/
function wps_grid_loop_helper() {
global $grid_args, $post;
$taxonomy = 'book_type'; //change me
$term = get_query_var( 'term' );
$term_obj = get_term_by( 'slug' , $term , $taxonomy );
$cpt = 'wps_books'; //change me

if ( function_exists( 'genesis_grid_loop' ) ) {
$grid_args_tax = array(
'features' => 0,
'feature_image_size' => 'book_featured',
'feature_image_class' => 'aligncenter post-image',
'feature_content_limit' => 100,
'grid_image_size' => 'book_thumb',
'grid_image_class' => 'aligncenter post-image',
'grid_content_limit' => 0,
'more' => '',
'posts_per_page' => 10,
'post_type' => $cpt,
'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => array( $term_obj->slug ),
)
)
);

printf('<h2 class="book-section"> %s Books</h2>' , $term_obj->name );
genesis_grid_loop($grid_args_tax);
} else {
genesis_standard_loop();
}
}
[/php]

Now, this can be rather complicated and intimidating, so let me break this down for you. While everything is the same as the previous Grid posts, there is one major change and that is the 'tax_query' (WordPress Codex). But just for those readers, who didn't take my advice to read the previous articles, let me briefly explain the $grid_args_tax (for those who know the basic args, skip the next paragraph).

'features' refers to the number of featured posts in the grid loop. So if you want to display 10 but feature 2, you would set this number to 2, posts_per_page to 10 and Genesis will do the math to ensure that everything is kosher. However, in our example, we want zero features for the taxonomy listing. 'feature_image_size' and 'grid_image_size' are the post thumbnail size that you want the image to appear as. 'feature_image_class' and 'grid_image_class' refer to the CSS image class for styling. 'feature_content_limit' and 'grid_content_limit' refers to the number of characters allowed in the content. See the StudioPress articles for futher explanations.

Now 'tax_query' refers to the taxonomy args. It must take an array of arrays of the following args:

  • taxonomy (string): the taxonomy
  • field (string): select taxonomy term by 'id' or 'slug'
  • terms (int/string/array): taxonomy terms
  • operator (string): 'IN', 'NOT IN', 'AND'

In our example, we have the template for a predetermined specific taxonomy and the template dynamically grabbing the appropriate taxonomy term (so someone may be searching for a 'Fiction' Book Type). If you wanted, it could also fetch the taxonomy dynamically, if you wanted all of your taxonomy archives to be on the grid. To do this, simply add the following code: $taxonomy = get_query_var( 'taxonomy' );. For tags and categories, you probably could use this same method; however, there is also a simpler method which I will explain in a later post (Tags and Same Categories and Different Categories).

So, after you set the post type ('post', 'page', or some other custom post type registered name, e.g., 'wps_books') and the taxonomy (which is the same as the latter half of the file name, so in this example 'book_type'), the function first grabs the slug of the term: $term = get_query_var( 'term' ); (more information: get_query_var). Then it calls for the genesis custom grid loop.

Now obviously, with this custom post type, I am going to want to determine my own grid loop content. To do this, I simply make these additions:

[php] <?php
add_action('genesis_before_post', 'wps_custom_grid');
function wps_custom_grid() {
remove_action('genesis_post_content', 'genesis_grid_loop_content');
add_action('genesis_post_content', 'wps_grid_loop_content');
}

function wps_grid_loop_content() {
global $_genesis_loop_args, $wp_query;
//do something
}
[/php]

For an excellent post on customizing the content, see Bill Erickson's post, Customizing the Genesis Grid Loop Content.

Some other good grid functions include the following:
[php]<?php
// Add some extra post classes to the grid loop so we can style the columns
add_filter( 'genesis_grid_loop_post_class', 'wps_grid_loop_post_class' );
/**
* Add some extra body classes to grid posts.
*
* Change the $columns value to alter how many columns wide the grid uses.
*
* @author Gary Jones
* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm
*
* @global array $_genesis_loop_args
* @global integer $loop_counter
* @param array $classes
*/
function wps_grid_loop_post_class( $grid_classes ) {
global $_genesis_loop_args, $loop_counter;

// Alter this number to change the number of columns - used to add class names
$columns = 3;

// Only want extra classes on grid posts, not feature posts
if ( $loop_counter >= $_genesis_loop_args['features'] ) {

// Add genesis-grid-column-? class to know how many columns across we are
$grid_classes[] = sprintf( 'genesis-grid-column-%s', ( ( $loop_counter - $_genesis_loop_args['features'] ) % $columns ) + 1 );

// Add size1of? class to make it correct width
$grid_classes[] = sprintf( 'size1of%s', $columns );
}
return $grid_classes;
}

// Make sure the first page has a balanced grid
add_action( 'genesis_loop', 'wps_bal_grid_loop' );
function wps_bal_grid_loop() {
global $query_string, $paged, $grid_args, $_genesis_loop_args;

if ( 0 == $paged )
// If first page, add number of features to grid posts, so balance is maintained
$grid_args['posts_per_page'] += $grid_args['features'];
else
// Keep the offset maintained from our page 1 adjustment
$grid_args['offset'] = ( $paged - 1 ) * $grid_args['posts_per_page'] + $grid_args['features'];
}
[/php]

Written by Travis Smith · Categorized: Genesis, Genesis Grid Loop, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Aaron Terry says

    May 16, 2012 at 11:44 pm

    Awesome post. This is going to be a life saver.

    Reply
  2. Thien says

    December 15, 2012 at 12:18 am

    Hi Travis,
    Your tutorial I so great,
    I built my site with 2 columns and one Features on front (or Balanced Grid)
    and I can change style in column by use “#content .genesis-grid-column-1 {” and “#content .genesis-grid-column-2 {” but when i tried to change style in Featured ( or Balanced grid) by use “#content .genesis-grid {” , It’s not working. I don’t know, maybe i choose wrong class for “features”, i think.
    Please help me solve this problem.
    Thanks

    Reply
    • Travis Smith says

      December 23, 2012 at 8:59 pm

      Hi Thien,

      I am not sure what you are asking. Can you please provide more details?

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in