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.

category design portfolio page
All images from unsplash.com



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.
 Archive Headline

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

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

14 responses to “Add Category Template for Portfolio to Genesis Modern Portfolio Pro”

  1. Sal says:

    Hi Marcy, Thank you for this great blog! This is exactly what I’m looking for.

    I’ve added the template file (and named it category-{slug}.php as you suggest) but for some reason my css file doesn’t recognize the class .category-{slug}. In fact, even the more general class .category is not recognized. Do I still need to define these classes somewhere? Background: I’m using the Agency-Pro theme of Genesis. And as you might conclude from this question, I’m really not familiar with php.

    Anyways, your insight is really appreciated!

    • Marcy Diaz says:

      I’m glad this will help you, Sal.
      Your theme only has .archive which could work for your styles.
      You need to add .category-slug to your style.css. Be sure to add it below the section that has .archive.

  2. Sal says:

    thank you for your prompt reply, Marcy! I have indeed added the .category-slug class to my css (at the very end), but it doesn’t work.

    So, let’s say the slug is called lydia. By adding
    .category-lydia entry-title { color: #fff; font-size: 12px;}
    I expect that my page […]/category/lydia will be affected such that the post titles are white and rather small.

    However, the entry-title on this page is black and big. Firebug (add-on in Mozilla) reveals that the page […]/category/lydia uses the class “.entry-title” and not the class “.category-lydia .entry-title” which is defined below the former. It is as if i still need to connect the class .category-lydia to the category page….

    Am I missing something here? Cheers;)

  3. Sal says:

    thank you. that was a clumsy typo, but I did have it correct in my css document. In the meanwhile I have solved the issue: When I put the same code higher in the css document (instead of in the end) it worked perfectly (although I don’t have a clue why:-). Keep up the great work, Marcy.

  4. julie says:

    Thank you for this post. This was very helpful.

    I just have one question. I want to print the Category name as the title of the archive. How do I do that?

    • Marcy Diaz says:

      I’m glad it helped you, Julie!

      You need to add the Category name under Posts > Categories, and then click on your category. You will need to fill in Archive Headline down the page.

      You can follow this tutorial on how to add category titles and descriptions. Go down to the Genesis Sample Child Theme section. There is a screenshot to show you how.

  5. Sheila Bergman says:

    Hi Marcy,
    I would like to apply this category template to the Workstation Pro theme. What would I have to modify to make that happen?

    Great tutorial!
    Sheila

  6. Sheila Bergman says:

    Cool, Thanks. The code references to portfolio image made me think that those were references to the Portfolio theme.

  7. Geekyard says:

    Hi Marcy Diaz,

    Nice Genesis customisation. It makes the site look unique. Your code is helpful for Genesis Framework lovers!!!

  8. Peter says:

    Hello.
    I found this article. It fits perfectly with my need.
    I tried to apply the tutorial to my site on WordPress with Genesis and Metro Pro, but the CSS code has not worked for me. The category file works well.
    To find my error: 1) I installed Modern Portfolio Pro theme, 2) I create the category design, 3) I loaded to the server the file category-design. php and 5) I inserted the contents of the file style.css in the style sheet of theme, after the code corresponding to the Home Page.
    What have I done wrong?
    Thank you for this article.

    • Marcy Diaz says:

      Hi, Peter,
      The CSS has the class “category-design” before all the selectors. This class is added automatically, depending on your template name. So if your template is catefory-design.php, then you use the class “category-design” in your CSS. If your template is category-somethingelse.php, then the CSS selectors all need to have “.category-somethingelse” instead of “.category-design”

Leave a Reply

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