Create Portfolio Archive and Single Pages
- In your Genesis child theme folder, create a file called archive-portfolio.php
This page creates the portfolio archive page and displays the title and featured image for each single portfolio page in a grid layout. - Paste the following code in the archive-portfolio.php file and save it:
<?php /** * The custom portfolio post type archive template originally by Brian Gardner at http://www.briangardner.com * Modified by yo for Genesis 2.0 */ /** Force full width content layout */ add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); /** Remove the post info function */ remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); /** Remove the post content */ remove_action( 'genesis_entry_content', 'genesis_do_post_content' ); /** Remove the post image */ remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 ); /** Add the featured image after post title */ add_action( 'genesis_entry_header', 'minimum_portfolio_grid' ); function minimum_portfolio_grid() { if ( has_post_thumbnail() ){ echo '<div class="portfolio-featured-image">'; echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">'; echo get_the_post_thumbnail($thumbnail->ID, 'portfolio' ); echo '</a>'; echo '</div>'; } } /** Remove the post meta function */ remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); genesis(); - In your Genesis child theme folder, create a file called single-portfolio.php
This page creates the individual, full-width portfolio pages. - Paste the following code in the single-portfolio.php file and save it:
<?php /** * The custom portfolio post type single post template * originally by Brian Gardner at http://www.briangardner.com * Modified by me for Genesis 2.0 */ /** Force full width content layout */ add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); /** Remove the post info function */ remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); //* Remove post comments in category ID #1 /** Remove the author box on single posts */ remove_action( 'genesis_after_entry', 'genesis_do_author_box_single' ); /** Remove the post meta function */ remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); /** Remove the comments template */ remove_action( 'genesis_after_entry', 'genesis_get_comments_template' ); genesis();
Add the portfolio code to your Genesis child theme functions.php
Open the Genesis child theme functions.php file and insert the following code. This code adds the custom portfolio post type to your theme:
Note: The code below includes taxonomy for tags. If you want categories, replace this ‘taxonomies’ => array( ‘post_tag’ ), with this ‘taxonomies’ => array( ‘category’, ‘post_tag’ ),
/* ----------------------- PORTFOLIO CODE --------------------------- */
/** Creates portfolio featured image for archive grid */
add_image_size( 'portfolio', 330, 230, TRUE );
/** Create portfolio custom post type */
add_action( 'init', 'portfolio_post_type' );
function portfolio_post_type() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio' ),
'singular_name' => __( 'Portfolio' ),
),
'exclude_from_search' => true,
'has_archive' => true,
'hierarchical' => true,
'taxonomies' => array( 'post_tag' ),
'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', 'genesis-cpt-archives-settings' ),
)
);
}
/** 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' );
}
}Copy the Portfolio Menu Image
Right-click on the following portfolio image and save it to
/wp-content/themes/your_theme/images/icons 
Add portfolio css rules to your theme’s styles.css
Add the following code to your child theme style.css file
/* portfolio
------------------------------------------------------------ */
.post-type-archive-portfolio .portfolio {
float: left;
margin: 0 15px 30px;
width: 340px;
}
body.archive.post-type-archive-portfolio .entry:first-child {
padding-top: 30px;
padding-top: 3rem;
}
.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;
max-width: 100%;
}
.portfolio-featured-image a img:hover{
border: 10px solid #ddd;
}
.single-portfolio #content {
text-align: center;
}
.single-portfolio article.portfolio img {
border: 20px solid #f5f5f5;
}
article.portfolio .built-with img {
border: 2px solid #f5f5f5;
padding: 4px;
margin-right: 20px;
display: block;
float: left;
}
article.portfolio h2 {
font-size: 18px;
}
article.portfolio .really_simple_share, article.portfolio .nr_related_placeholder {
display: none;
}
article.portfolio .entry-title {
width:50%;
float:left;
}
article.portfolio .portnav {
width: 50%;
float: right;
text-align: right;
}
.entry-header.porthead {
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}
.attachment-portfolio.wp-post-image {max-width: 85%;}
@media only screen and (max-width: 768px) {
article.portfolio .entry-title {
width:100%;
float:left;
font-size: 16px;
}
article.portfolio .portnav {
width: 100%;
float: left;
text-align: left;
font-size: 14px;
}
}
@media only screen and (max-width: 594px) {
.post-type-archive-portfolio .portfolio {
float: left;
margin: 0 15px 30px;
max-width: 100%;
}
article.portfolio .entry-title {
width:100%;
float:left;
font-size: 14px;
}
article.portfolio .portnav {
width: 100%;
float: left;
text-align: left;
font-size: 14px;
}
article.portfolio .built-with img {
border: 2px solid #f5f5f5;
padding: 4px;
margin-right: 10px;
display: block;
float: left;
}
.custom-fields h3 {
font-size: 14px;
}
}Optional – Add Custom Fields code to functions.php
The following code adds custom fields to your single portfolio pages. The reason I added these fields is because every time I created a portfolio entry, I had to insert a url and several thumnail images to indicate the CMS and template framework I used to build the site.
The following images show the custom portfolio fields in the Editor screen and on the single portfolio page.
Renee says
I very much appreciate you posting this code. I recently upgraded to WordPress 3.6 with Genesis 2.0.
Nathan Schmidt says
Thank you for this tutorial. I had been trying to do this using a portfolio custom post type from another Studiopress theme I have and it wouldn’t work. Looks like some of the hooks have changed in the new Genesis 2.0 framework, which seemed to be the issue. My portfolio is working well, now.
Would you have a recommendation on what to use to get the archive page to display the posts in a particular order based on the ‘order’ field in the custom post type? I originally used a custom field for ‘order’, but then I noticed that in WP, the ‘order’ field is already built in to the ‘attributes’ panel on the new post admin page. I used WP_query w/ an array in my archive-portfolio.php page to try to populate the posts by the ‘order’ I had designated, but I’m not having any luck.
Any help would be appreciated… even a link to some documentation. I find a lot of posts on utilizing WP_Query, but nothing recent enough or along the lines of incorporating into a Genesis (2.0) theme.
Pat Fortino says
Not sure how to sort by order field. There are plenty of plugins that do that; seems like that would be easiest.
Nathan Schmidt says
I found a way to do it after breaking it a lot. I tried w/ WP_Query kind of unsuccessfully, but eventually, adding this in after the function that outputs the page header and before the function that plots out the posts got it to do what I wanted:
query_posts( array( 'post_type'=>'product-categories' , 'orderby' => 'menu_order' , 'order' => 'ASC' ));
Also, I saw on another post from Carrie Dils that activated the archive-page settings if you wish to add in content prior to the post output on the archive post page.
I found this useful, as well. Basically, in the function registering the custom-post-type, you add in:
‘genesis-cpt-archives-settings’ into the register_post_type function’s array where ‘supports’ are listed.
I found this to be a pretty cool baked in feature for Genesis 2.0
Pat Fortino says
Hi Nathan. Thanks for the update. I forgot about the genesis-cpt-archives-settings. I’m going to update my portfolio tutorial to include it since it makes adding a title or description to the ctp archive much easier.
Regarding your comment:
Not sure I understand what you mean. I don’t see any order field or option for it in the posts screen? Is this something you added using a plugin?
Nathan Schmidt says
I have to correct that earlier statement. The page attributes panel is only located in the ‘page’ screen when making or editing a page, not post (located in panel to the right of the description field). I hadn’t realized that the tutorial made the custom post type more of a page layout rather than post, but it looks like by adding the ‘page_attributes’ in the ‘supports’ array in the registering function (in function.php), it adds this behavior.
I suppose if you wanted to order posts in this manner, you could use a custom field and then integrate that into the query. This is likely why it wasn’t working before—I was trying to query posts rather than perhaps using something w/ page attributes. I hadn’t noticed this behavior until you brought this up. Now, I realize why it takes on the page attributes.
Pat Fortino says
Nathan. Thanks for that clarification.
WriteNoWrong says
Awesome tutorial! I know this wasn’t really covered, but how would you suggest going about adding custom taxonomies to said Custom Post Types and then presenting them?
Pat Fortino says
The current code has taxonomies for tags. If you want categories, add category to taxonimies. See below.
‘taxonomies’ => array( ‘category’, ‘post_tag’ ),
WriteNoWrong says
So say if I registered a custom taxonomy called “location.” I could theoretically just add that into the taxonomies line and it would present that data on the custom post type posting?
‘taxonomies’ => array( ‘location’, ‘category’, ‘post_tag’ ),
Pat Fortino says
In order to create a custom taxonomy, you need to register it. See this url for explanation: http://codex.wordpress.org/Taxonomies