WP SITES

Log in

Use Portfolio Grid Style CPT Layout On Any Archive Page

—

by

Brad Dalton

Genesis makes it super simple to use Custom Post Types and some themes like Executive Pro even include a really nice portfolio/grid style archive page layout.

portfolio grid

But what if you want to use the archive-portfolio.php grid style layout on the front page or category archives?

There’s 3 steps you need to take in order to do this and pre_get_posts is generally the best function to use when modifying any query.

Firstly, copy your archive-portfolio.php file and rename it to front-page.php or category.php if you want to use the portfolio grid layout on all your category archive pages.

Secondly, you need to remove the standard ‘post’ type from the query and replace it with the portfolio custom post type. This removes all posts from the loop so only your single CPT’s display.

Add this code to the end of your child themes functions.php file:

add_action( 'pre_get_posts', 'display_portfolio_archive_front_page' );

function display_portfolio_archive_front_page( $query ) {

	if ( is_front_page() && $query->is_main_query() && !is_admin() ) {
		$query->set( 'post_type', array( 'portfolio' ) );
		$query->set( 'posts_per_page', '999' );
     }
}

The above code will display all portfolio items on the front page of your site.

If you want to use the archive-portfolio.php template on all your category archives, use this code instead:

add_action( 'pre_get_posts', 'display_portfolio_category_archive_pages' );

function display_portfolio_category_archive_pages( $query ) {

	if ( is_category() && $query->is_main_query() && !is_admin() ) {
		$query->set( 'post_type', array( 'post' ) );
     }
}

The last step involves copying and changing the class for some of the CSS code which makes your custom post type featured images display in 3 columns:

.home .entry {
	float: left;
	margin-bottom: 60px;
	margin-bottom: 6rem;
	width: 33.333333333333%;
}

.home .entry:nth-of-type(3n) {
	float: right;
	padding-left: 30px;
	padding-left: 3rem;
}

.home .entry:nth-of-type(3n+1) {
	clear: left;
	padding-right: 30px;
	padding-right: 3rem;
}

The above CSS works from your home or front page.

If you want to use the portfolio grid layout on all category archives, simply change the class from .home to .category.

Other Options & Related Solutions

Comments

3 responses to “Use Portfolio Grid Style CPT Layout On Any Archive Page”

  1. amit Avatar
    amit

    Will it work with Genesis Sample theme as well for category archive page ?

  2. Nathan Avatar
    Nathan

    What if you want to use it on a taxonomy archive? How do you manipulate the query to do this? Also, do you insert the funtion for pre_get_posts into the template page directly, or do you put it in functions.php?

    1. Brad Dalton Avatar
      Brad Dalton

      I’d put the code in functions which is where i tested it as i know it works.

      You can use any conditional tag you like as long as you change the main class for the CSS to match whats output in the body classes in the source code
      [code]
      is_tax()
      [/code]

      pre_get_posts simply modifies the query and has nothing to do with the styling or taxonomy template the posts are displayed on.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.