Updated on July 19, 2017
This tutorial provides the steps to display entries of a portfolio Custom Post Type in a filterable grid on the CPT's archive page.
There will be a row of filters that are portfolio categories above the grid.
For each grid item, there will be a featured image (or a fallback image if there's no featured image) with item title overlayed at the lower left. Hovering over the image reveals entry title and excerpt. The images link to their respective permalinks.
The filtering functionality is via Isotope.
From 1024px and below, titles and excerpts will appear below the images.
From 800px and below, 2 items per row will appear in the grid and from 500px and below, 1 per row.
Step 1
Install and activate Portfolio Post Type plugin.
Add your portfolio items and set featured images for each. The ideal size of the images (for the sake of this tutorial) is 500 x 350.
Also, assign the items to their appropriate portfolio categories.
Step 2
Add the following in child theme's functions.php:
// Add Archive Settings option to Portolio CPT.
add_post_type_support( 'portfolio', 'genesis-cpt-archives-settings' );
// Define a custom image size for images on Portfolio archives.
add_image_size( 'portfolio', 500, 350, true );
add_filter( 'template_include', 'custom_template_redirect' );
/**
* Use `archive-portfolio.php` for portfolio category and tag taxonomy archives.
*/
function custom_template_redirect( $template ) {
if ( is_tax( 'portfolio_category' ) || is_tax( 'portfolio_tag' ) ) {
$template = get_query_template( 'archive-portfolio' );
}
return $template;
}
add_action( 'pre_get_posts', 'custom_change_portfolio_posts_per_page' );
/**
* Set all the entries to appear on Portfolio archive page.
*
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @param object $query WP_Query object.
*/
function custom_change_portfolio_posts_per_page( $query ) {
if ( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
$query->set( 'posts_per_page', '-1' );
}
}
// Relocate custom headline and / or description on category / tag / taxonomy archive pages.
remove_action( 'genesis_before_loop', 'genesis_do_taxonomy_title_description', 15 );
add_action( 'genesis_before_content', 'genesis_do_taxonomy_title_description' );
Regenerate thumbnails if needed.
Step 3
Upload isotope.pkgd.min.js and imagesloaded.pkgd.min.js to child theme's js directory.
Create a file named say, isotope-init.js in the same location having this code:
