Adding The Minimum 2.0 Portfolio to a Different Genesis Theme

The Minimum 2.0 child theme uses a custom post type for the Portfolio, which I personally love. This tutorial will show you how to add this portfolio to any theme that is currently not using a portfolio page template or widget area (such as the Balance child theme).

Before we begin make sure you are using custom permalinks via Dashboard > Settings > Permalinks. I have mine using Post name. This is necessary because the portfolio custom post type will be adding a ‘portfolio’ slug.

First, lets add the necessary files.

You can either pull the following files from the Minimum 2.0 theme, or click on my provided links below and download via Github.

Upload archive-portfolio.php and single-portfolio.php to your child theme directory. (/wp-content/themes/childtheme)

Next, navigate over to /wp-content/themes/childtheme/images and make a new folder named icons. Now upload portfolio.png (right click save as) to this folder. This is the image used on next to your “Portfolio” tab on the dashboard.

Now we’re ready to jump into the coding.

First let’s add our Portfolio image sizes. Your theme more than likely already has a few image sizes being specified, so if it does you can add these right below them.

Add the following to your theme’s functions.php file:

/** Add new image sizes */
add_image_size( 'portfolio', 330, 230, TRUE );
add_image_size( 'portfolio-large', 760, 520, TRUE );

The first size ‘portfolio’ will be the thumbnail size on your portfolio archive page, and the second ‘portfolio-large’ will be the thumbnail size on the individual portfolio page. You can vary these dimensions to meet your size requirements. The TRUE is specifying what type of crop to perform. True – Hard crop mode. False – Soft proportional crop mode.

Next, we will create the custom post type. Add the following to your functions.php file:

/** Create portfolio custom post type */
add_action( 'init', 'minimum_portfolio_post_type' );
function minimum_portfolio_post_type() {
	register_post_type( 'portfolio',
		array(
			'labels' => array(
				'name' => __( 'Portfolio', 'minimum' ),
				'singular_name' => __( 'Portfolio', 'minimum' ),
			),
			'exclude_from_search' => true,
			'has_archive' => true,
			'hierarchical' => true,
			'menu_icon' => get_stylesheet_directory_uri() . '/images/icons/portfolio.png',
			'public' => true,
			'rewrite' => array( 'slug' => 'portfolio' ),
			'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'page-attributes', 'genesis-seo' ),
		)
	);
}

/** Change the number of portfolio items to be displayed (props Bill Erickson) */
add_action( 'pre_get_posts', 'minimum_portfolio_items' );
function minimum_portfolio_items( $query ) {

	if( $query->is_main_query() && !is_admin() && is_post_type_archive( 'portfolio' ) ) {
		$query->set( 'posts_per_page', '12' );
	}

}

/** Add the featured image section */
add_action( 'genesis_post_title', 'minimum_featured_image' );
function minimum_featured_image() {
	if ( is_singular( 'portfolio' ) && has_post_thumbnail() ){
		echo '<div id="featured-image">';
		echo get_the_post_thumbnail($thumbnail->ID, 'portfolio-large');
		echo '</div>';
	}
}

I placed it right before /** Register widget areas */ section. Also, you can change the various ‘minimum’ areas to your theme name. Or just leave it alone (:

Let me explain a little bit about the code above. The first action is just adding our new portfolio custom post type.

The second action is limiting the amount of portfolio items that display on the portfolio. Right now it’s set to 12 ($query->set( ‘posts_per_page’, ’12’ );) – just change 12 to however many portfolio items you want to display on the portfolio archive.

The third action automatically inserts your portfolio post’s featured image using the “portfolio-large” size so you don’t have to manually insert the image into the post. I have modified this to only perform this action on your single portfolio area.

That’ll get your portfolio up and running, which you should now be able to view at http://www.yoursite.com/portfolio.

Next, go in and add some Portfolio items via Dashboard > Portfolio > Add New. For the image, just set it as the “Featured Image”. No need to insert it manually into the post.

After adding a few entries go view your portfolio page. Chances are, it doesn’t look too great- we’ll need to pretty it up via CSS.

Add the following to your theme’s style.css file:

/* Portfolio
------------------------------------------------------------ */

.post-type-archive-portfolio .portfolio {
	float: left;
	margin: 0 15px 30px;
	width: 340px;
}

.portfolio-featured-image a img {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	border: 10px solid #f5f5f5;
	transition: all 0.2s ease-in-out;
}

.portfolio-featured-image a img:hover{
	border: 10px solid #ddd;
}

.single-portfolio #content {
	text-align: center;
}

.single-portfolio img {
	border: 20px solid #f5f5f5;
}

Now take a look at your portfolio page. Chances are, it got the styling added – but the alignment is all out of whack.

You’ll need to tweak a few things to get it to line up. As an example, I set up a portfolio on Genesis Tweaks which has a full width content area of 960px, and wanted to display the portfolio in 3 columns. To achieve this I changed the width of the portfolio boxes (.post-type-archive-portfolio .portfolio in the code above) to 290px, like so:

.post-type-archive-portfolio .portfolio {
	float: left;
	margin: 0 15px 30px;
	width: 290px;
}

If you have to change this then you will need to adjust your “portfolio” image size that we specified earlier in functions.php. In my case, I needed to change this to 270px. Why? The total width of the portfolio div is now 290px and the “portfolio” image is set to 330px. Since it has a 10px border around the image, I needed to change the size to 270px:

/** Add new image sizes */
add_image_size( 'portfolio', 270, 230, TRUE );
add_image_size( 'portfolio-large', 760, 520, TRUE );

You can view my example here.

Finally, if you’re using a mobile responsive child theme you will need to make some changes to make your portfolio responsive as well. The changes you will need to make will vary from theme to theme. But as an example on Genesis Tweaks I added the following after my @media only screen and (max-width: 600px) {

	.post-type-archive-portfolio .portfolio {
		margin: 0 0 20px;
		text-align: center;
		width: 100%;
	}

	.portfolio-featured-image a img,
	.portfolio-featured-image a img:hover {
		border: none;
	}

	.single-portfolio img {
		border: none;
	}