Add Category Template for Portfolio to Genesis Modern Portfolio Pro

This weekend my daughter decided she needed to update her design portfolio website. Her current site was an html website that she did while she was in school. She wanted to move her site to WordPress, and she wanted to do it quickly. I didn’t have a lot of time to help her either, so we decided to start with the Genesis Modern Portfolio Pro theme, since it had an option to display the latest portfolio posts on the front page in a grid layout, and it would be easy for her to edit the styles.

We set up the theme according to the instructions from StudioPress, and my daughter started uploading her images and content. And that’s when she realized that Modern Portfolio Pro displays all posts using the normal blog (archive) layout with title, thumbnail image, and content. She wanted a page for her design category that displayed identically to the home page portfolio area. She also wanted to use a normal post and not a custom post type for her design posts, so that ruled out a portfolio plugin.

We decided to create a new template just for the design category. We started with the portfolio custom post type archive template from the Minimum Pro theme. You can create your own category template too.

You can download a GitHub Gist to start your design category template.

And if you want to change the number of posts per page for your design archive, see Change the Posts Per Page…

Create the Category Template

Note that this template will display the category page: yoursite.com/category/design or /category/your-slug. Once completed, this page can also be added to your main menu under Appearance > Menus.

We edited the original template as follows; you will want to follow along, so that you can personalize your own template, using the code in the next section.

1. The first thing we did was rename the template to match the design category –> category-design.php. This will display posts in the Design category with the slug “design”.
   If your category is “Design Portfolio” and your slug is “design-portfolio”, you would name the template category-design-portfolio.php.
   The format for naming your template is category-{slug}.php. You can learn more about the WordPress Template Hierarchy, especially the chart.
2. Next change the description of the template at the top of your template. This can be anything you like.
3. Minimum Pro displays the images in a two column grid. We needed a three column grid, so we removed the section adding the odd and even post classes.
4. Then we moved the image to the genesis_entry_header, above the title.
5. The last thing we looked at was the custom image size. Both themes use the custom image size “portfolio”, so we didn’t need to edit that.
6. We kept all the sections that remove the entry-header, entry-footer, and content.

The Category Design Template

This is the entire design category template with the code sections commented.
Name the file according to item 1. above.

<?php
/**
 * The custom template for the design category
 */

//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Remove the entry meta in the entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

//* Remove the entry content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

//* Remove the entry image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Add the featured image before post title
add_action( 'genesis_entry_header', 'minimum_portfolio_grid', 8 );
function minimum_portfolio_grid() {

	if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
		printf( '<div class="portfolio-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
	}
}

//* Remove the entry meta in the entry footer
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );

//* Run the Genesis loop
genesis();

Use FTP to add the template to your child theme folder (yoursite.com/wp-content/themes/modern-portfolio-pro).

Now the images are sized like the home page, but they just flow down the page instead of displaying in a three-across grid. And the titles are a bit large.

Style the New Category Template

Open your child theme style.css in a text editor. Find the Home Page section. You want to add a new section below that called Category Design Entries. We can use the CSS in the Home Page section for featuredpost selector to reproduce the same layout for our design page. Comments explain each selector.
Note that you target the selectors with the body class for your category; for us it’s .category-design. It’s the same as your template name: .category-{slug}

The grid is created with :nth-of-type. You can read more about using :nth-of-type to target selectors.

/* Category Design Entries
--------------------------------------------- */

/* Adds the opacity and hover feature to images */
.category-design img {
	margin-bottom: 16px;
	margin-bottom: 1.6rem;
	opacity: 0.8;
}

.category-design  img:hover {
	opacity: 1;
}

/* Adds the grid column width the same as the home page */
.category-design .entry {
	float: left;
	margin-right: 5.263157894737%; /* 60px / 1140px */
	width: 29.824561403509%; /* 340px / 1140px */
}

/* Removes the right margin on the 3rd, 6th, 9th, etc. posts */
.category-design .entry:nth-of-type(3n+3) {
	margin-right: 0;
}

/* Clears the float to start a new row for the 4th, 7th, etc. posts */
.category-design .entry:nth-of-type(3n+1) {
	clear: left;
}

/* Smaller title size */
.category-design .entry-title {
	font-size: 18px;
}

Add the Styles for Mobile

At smaller screen sizes you want the posts to be only one across, instead of three.

So find the @media section, @media only screen and (max-width: 600px) {

Add the following CSS:

@media only screen and (max-width: 600px) {
	/* Category Design Entries 
	--------------------------------------- */
	
	/* Centers the posts or entries */
	.category-design .entry {
		text-align: center;
	}
	
	/* Removes the three across grid */
	.category-design .entry,
	.category-design .entry:nth-of-type(3n+3) {
		float: none;
		margin: 0 auto 24px;
		margin: 0 auto 2.4rem;
		max-width: 340px;
		width: 100%;
	}
}

Add a Title to the Category Design Page

1. From your WordPress Dashboard, click on Posts > Categories.
2. Click the Design (or your) category.
3. Scroll down until you see Category Archive Settings.
4. Add an Archive Heading and, if you like, Archive Intro Text.

So now you have a nice template for displaying your design category in a three-across portfolio layout.