Add Portfolio Custom Post Type To Focus Theme

In this tutorial, i’ll provide all the working code which creates a custom post type with portfolio style archive page for the Focus child theme by StudioPress.

Here’s a screenshot of what the portfolio archive looks like:

cpt portfolio focus

The code creates:

  1. A portfolio custom post type with item display numbers
  2. Archive portfolio (with added title & description) and single portfolio page templates
  3. CSS code to style your portfolio archives and single custom post types.

Create Portfolio Custom Post Type

This code goes at the end of your child themes functions.php file.

add_action( 'init', 'focus_portfolio_post_type' );
function focus_portfolio_post_type() {
	register_post_type( 'portfolio',
		array(
			'labels' => array(
				'name' => __( 'Portfolio', 'focus' ),
				'singular_name' => __( 'Portfolio', 'focus' ),
			),
			'exclude_from_search' => true,
			'has_archive' => true,
			'hierarchical' => true,
			'menu_icon' => get_stylesheet_directory_uri() . '/images/icons/portfolio.png',
			'public' => true,
			'show_ui' => true,
            'show_in_menu' => 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', 'focus_portfolio_items' );
function focus_portfolio_items( $query ) {

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

}

Archive Portfolio Template

This code needs to be pasted into a new file using a code editor and named archive-portfolio.php

<?php
/**
 * The custom portfolio post type archive template
 */

/** 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_before_post_content', 'genesis_post_info' );

/** Remove the post content */
remove_action( 'genesis_post_content', 'genesis_do_post_content' );

/** Remove the post image */
remove_action( 'genesis_post_content', 'genesis_do_post_image' );

/** Add the featured image after post title */
add_action( 'genesis_post_title', 'focus_portfolio_grid' );
function focus_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_after_post_content', 'genesis_post_meta' );

genesis();

Single Portfolio Template

This code needs to be pasted into a new file using a code editor and named single-portfolio.php

<?php
/**
 * The custom portfolio post type single post template
 */
 
 /** 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_before_post_content', 'genesis_post_info' );

/** Remove the author box on single posts */
remove_action( 'genesis_after_post', 'genesis_do_author_box_single' );

/** Remove the post meta function */
remove_action( 'genesis_after_post_content', 'genesis_post_meta' );

/** Remove the comments template */
remove_action( 'genesis_after_post', 'genesis_get_comments_template' );

genesis();
[/code]

<h3>Styling For Archive & Single Portfolio Template</h3>

This code goes at the end of your child themes style.css file.

[code]
.post-type-archive-portfolio .portfolio {
	float: left;
	margin: 0 15px 30px;
	width: 284px;
	text-align: center;
	
	
}

.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;
}

.single-portfolio h1 {
	margin: 0 0 20px;
}

.archive-title {
text-align: center;
}

I’ve centered the archive titles which you can easily remove if needed.

Video Result (With Relaxing Music)

Here’s the video showing you the result of adding the code above and how it works.


Comments

6 responses to “Add Portfolio Custom Post Type To Focus Theme”

  1. Awesome!

    Why can’t we add the pre_get_posts hook into the single-portfolio.php? That way we can get rid off the conditionals, and just use:


    add_action( 'pre_get_posts', 'focus_portfolio_items' );
    function focus_portfolio_items( $query ) {
    $query->set( 'posts_per_page', '12' );
    }

    I’m kind of a fan about putting the minimal code on functions.php, if it can be placed in a template file. Would that work?

    1. Brad Dalton Avatar
      Brad Dalton

      Because it relates to the portfolio items number, not the single post.

      1. Sorry, I meant in the archive-portfolio.php instead of functions.php

        1. Brad Dalton Avatar
          Brad Dalton

          Try it and please let me know if it works.

          1. Not working at all. It’s weird, since the conditional on the functions.php is the same as putting the function on the archive-portfolio.php.

            I think Nacin told something about it on “You don’t know the query” on WC Netherlands last year, because pre_get_posts runs before WP_Query has been setup.

            Thanks again, Brad!

          2. Brad Dalton Avatar
            Brad Dalton

            No worries Joan. Been a busy week so hard to trouble shoot today.

Leave a Reply

Join 5000+ Followers

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