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:
The code creates:
- A portfolio custom post type with item display numbers
- Archive portfolio (with added title & description) and single portfolio page templates
- 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.
Was This Tutorial Helpful?