A while back I covered Adding the Minimum 2.0 Portfolio to a Different Genesis Theme. However, if you’re like me – you change theme’s a LOT. With the method I presented, you would have to duplicate the process every time you made the switch and as soon as you did – your “Portfolio” section will have disappeared. Today, I’m going to cover how to make this process even easier – by utilizing a plugin. I’ll also briefly cover how to style your portfolio page templates.
By using a plugin for our portfolio custom post type, we can cut out having to enable it in our theme’s ‘functions.php’ file. If you think about it, this makes much more sense (to me anyways). After all your theme should be… well a theme. The look and feel of your website. It doesn’t make much sense to tie functionality to a theme does it? That’s like me having this one pair of pants that attracts the ladies when I go out. If I wear a different pair of pants – then I’m going home alone. Attracting the ladies shouldn’t be tied to my pants! (but now that I think about it…*gasp*). Ridiculous analogy aside – I like to make things simple with some form of method behind the madness, and this does just that.
The plugin we will utilize is Devin Price’s Portfolio Post Type. Keep in mind there are other portfolio plugins out there. I picked this one because Devin is a respected developer in the WordPress community, and I have personally taken the time to browse over the plugins code. It does exactly what I needed it to, and nothing more. I call that a win-win.
What it does:
- Registers a new portfolio post type
- Registers separate portfolio taxonomies for tags and categories
- Displays the portfolio image in the dashboard column view
If you are currently using a theme like Minimum 2.0 that enables the portfolio custom post type – go and remove it from your functions.php first then come back.
Let’s begin! Download and activate Devin’s Portfolio Post Type plugin.
You will now have a new portfolio section on your dashboard, right under “Posts”, where you can add your portfolio entries, categorize, and even tag them. They also pop up under Appearance > Menus – allowing you to easily add them to your custom menus. However the main portfolio archive page will need to be added as a custom link – http://yoursite.com/portfolio.
Now.. we do still need to style things via our theme files. Which goes back to what I said earlier. Look/feel = theme. This plugin gives us our portfolio functionality and our theme makes it look the way we want.
Obviously you’re going to want to style it however you see best fit – but i’m going to give you an example to work off of.
First, download my zip and extract the two included files:
single-portfolio.php
archive-portfolio.php
single-portfolio.php is the page template for your single portfolio entry, and archive-portfolio.php is the archive of your portfolio entries.
Upload both of these files to your child theme’s directory /wp-content/themes/child-theme.
Note: You can edit these just as you would any other page templates via Appearance > Editor.
I also recommend you specify a ‘Portfolio’ image size. Add the following to your theme’s ‘functions.php’ file.
/** Add new image sizes */ add_image_size( 'portfolio', 237, 178, TRUE );
The portfolio archive page is set to check for the ‘portfolio’ size. You can utilize this to optimize your images.
Now we just need to add a little styling. Add the following to your theme’s ‘style.css’ file –
/* Portfolio
------------------------------------------------------------ */
.post-type-archive-portfolio.full-width-content #content {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0;
text-align: center;
}
.post-type-archive-portfolio .portfolio {
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
padding: 0 30px 30px;
width: 33%;
}
.single-portfolio #content {
text-align: center;
}
.post-type-archive-portfolio .hentry, .single-portfolio .hentry {
margin: 0 0 20px;
}
This gives us a nice 3 column portfolio archive that just displays just a centered title and the featured image.
This also styles our single portfolio entry for a centered title/description and the post image.
Few notes:
- When adding your portfolio items, you must insert your image INTO the post as well as set it as the featured image or else it will not show up on the single entry.
- The portfolio will be responsive if you are using a responsive theme – however the archive page will remain 3 columns so they will be extremely tiny on small screens. You will need to add specific styling to your media queries – example: making the .post-type-archive-portfolio .portfolio have a 100% width once you get below 600px in screen width.
Removing the custom post type from Minimum 2.0:
Go to Appearance > Editor > functions.php and remove the following:
/** 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' ),
)
);
}
That’s it! Now you can utilize your portfolio functionality with any of your WordPress themes moving forward by adding two files and a wee bit of CSS.
A plugin is a much better approach for using custom post types. One advantage I see with using CPT’s versus posts is having separate taxonomies. Hmmm, something for me to consider…
It’s a slick method with the plugin. however in some respects, I still like the ‘old’ way with the separate portfolio page template. Rather than a new post type, basing it around post categories and the ability to have multiple categories is easy for the client, as outlined in the appfinite tutorial. But as you say, it does mean modifying the various files.
http://appfinite.com/tutorials/how-to-setup-the-portfolio/
Still a great addition. We include this type of feature on all our new sites. Thanks
This worked like a charm; looking at a beautiful stylized portfolio page for one of my clients!
Many thanks,
David
Thanks for your tute. I was wondering how I actually apply the template to a page. For example, I’ve creatived a page called portfolio, how do I apply the portfolio archive template to my page (it’s not appearing in the dropdown menu)
Thanks,
Cath
Hey Cath, you don’t need to create a page/select page template when you use this method. After you’ve installed plugin and made sure to have permalinks set to ‘Post name’ – you’ll be able to access it by http://yourdomain.com/portfolio (this is automagically created). Also when you add to your menu – you’ll need to add it as a custom link. Hope that helps!
hi
i am building a client site at this demo location http://www.fingerprintdigitalmedia.com/phoenix/portfolio/ and trying to get the Portfolio to work.
i followed the instructions above but when i browse to the portfolio page i am not seeing 3 columns just single entries with a Next and Previous link to other portfolio items
how do i fix this and how do i adjust the Portfolio page so the actual archive and single pages are showing the right hand SIDEBAR in my theme?
thanks
Phil
Hi Phil,
I’m assuming it’s a CSS issue in regards to the display – i’d have to run through the process with the theme you are using. I’ll let you know soon as I get a chance to do so.
However, adding the sidebar is easy enough: In both the archive-portfolio.php and single-portfolio.php files I provided – there is the following line towards the top:
/** Force full width content layout */
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );
Just change that to:
// Force Content-Sidebar Layout
add_filter( ‘genesis_site_layout’, ‘__genesis_return_content_sidebar’ );
Make sure to do that in both files and you’ll have your sidebar (:
Justin,
Great article!
I’m not sure what I’m doing wrong, but I can’t get my layout to look the same as yours. I’m using the Agency child theme. Here’s the link to the page I’m working on right now: http://littlebizsmarts.com/testing1/portfolio/
For some reason, two images are showing up on the archive page. Any ideas?
Thanks!
Hey, thanks for the kind words! This happens if you have “Include Featured Image” checked for content archives. The featured image is being duplicated on our archive page when that is turned on. Try adding the following to your archive-portfolio.php file:
// Remove the duplicate featured image
remove_action( ‘genesis_post_content’, ‘genesis_do_post_image’ );
That will remove the duplicate featured image from our portfolio archive page, and should still allow for the featured images to show up on your other archive pages.
That worked perfectly. Thank you.
I also noticed that it needed to regenerate my images to get them to lay out correctly.
After that, everything looks great.
I really appreciate the help!
Curt
Justin,
Thanks for the plugin! Minor issues going on… Seems the portfolio page is showing full size image along with smaller image. And – when I click on full size image the page it goes to is showing duplicate images. I’ve added the extra code in the archive-portfolio page as you mentioned above. I’d like it to be 3-columns as in your example above.
Thanks! Robin
Hey Robin, I’ll take a look tomorrow and get back to you. It’s a theme specific issue. You know how your posts automatically take your featured images and place them in at the top? That’s what’s doing it – since the portfolio is technically just posts, it’s doing the same thing. Will have to edit that function to keep it from messing with the portfolio post type. Hopefully have it for ya in the AM.
Hey Justin! Thanks for the response. Have you had a chance to research it?
Thanks again,
Robin