Create A Professional Portfolio Using WordPress 3.0 Custom Post Types
WordPress 3.0 will be released in the near future and the first release candidate (RC1) is currently available to download and have a play around with. There are lots of great new features included in the latest update with one of the most interesting and useful being that of custom post types.
In this tutorial I’ll show you how to make use of the new custom post functionality to create a portfolio for your WordPress site.
What Are Custom Posts?
Custom posts are similar to blog posts in that you can add and edit them in the same way, but they differ in that they can be used to represent any sort of concept. So, for example, you might use a custom post to add a new project to a portfolio, a book to an online library, or a new member to subscription site.
When you create a new custom post type it will appear in your WordPress Admin menu and will enable you to create new “things” in much the same way you currently create posts and pages.
There are several advantages to this – for instance, it will make things much tidier and easier to manage as we’ll no longer have to use numerous custom fields to create sites that have portfolios, galleries, products, and any other type of custom post.
It will also be much better for those who are not experienced WordPress users – it will make it far easier for them to configure and maintain sites themselves as the interface will be much more intuitive.
For example, when adding a new product to an ecommerce site, all they will need to do is select the “Add New Product” link, provide some details about that product (e.g. a name, image, price and description) in the fields provided, and then save their updates.
Nice and easy!
Creating A Portfolio
Now we know what custom posts are, it’s time to get our hands dirty. We’ll be adding a website portfolio that makes use of the new custom post functionality to the Kanzoo WordPress theme. Whilst I’ll be using this theme to demonstrate what you need to do, you’ll be able to use the code provided in any of your own sites/themes.
We’re aiming for something simple that has just a few portfolio items – you can then use this as a template to create a bigger and better portfolio – this is what we’re looking to build:
Create The Custom Post Type
The first step in creating the portfolio is to actually create the new custom post type – you can do this by adding the following code to your functions.php file:
<?php add_action('init', 'create_portfolio'); function create_portfolio() { $portfolio_args = array( 'label' => __('Portfolio'), 'singular_label' => __('Portfolio'), 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => false, 'rewrite' => true, 'supports' => array('title', 'editor', 'thumbnail') ); register_post_type('portfolio',$portfolio_args); } ?>
The first line of this code uses the “init” hook to ensure that the “create_portfolio” function is called when WordPress is initialized. This function is then defined on line 2 and essentially creates the new custom type via an array called $portfolio_args.
The “register_post_type” function is then passed the name of our custom post type (i.e. “portfolio”) and the “$portfolio_args” array that defines the custom type.
You can view the available arguments for “register_post_type” in the WordPress codex.
Input Fields For Our Portfolio
The next step is to create an input field that allows the user to enter some related details about the portfolio items. We’re going to keep things simple and will add a textfield where users can enter a website URL that points to a live demo of a project – add the following code to your functions.php file:
<?php add_action("admin_init", "add_portfolio"); add_action('save_post', 'update_website_url'); function add_portfolio(){ add_meta_box("portfolio_details", "Portfolio Options", "portfolio_options", "portfolio", "normal", "low"); } function portfolio_options(){ global $post; $custom = get_post_custom($post->ID); $website_url = $custom["website_url"][0]; ?> <div id="portfolio-options"> <label>Website URL:</label><input name="website_url" value="<?php echo $website_url; ?>" /> </div><!--end portfolio-options--> <?php } function update_website_url(){ global $post; update_post_meta($post->ID, "website_url", $_POST["website_url"]); } ?>
The first line of code here simply states that when the WordPress admin panel is initializing, call the “add_portfolio” function. This is defined on line 3 and basically adds a new section to the custom post called “Portfolio Options” and tells WordPress to use the “portfolio_options” function (line6) to display the appropriate elements in the new section.
The second line of code above is for recording user input whenever a custom post is updated – this is implemented by calling the “update_website_url” function which then ensures that any input is stored.
Your portfolio page should look something like the following (you can access this page by selecting the new “Portfolio” link in your WP Admin):
We now need to add some more appropriate columns to the the “Portfolio Overview” page – add the following code to the functions.php file:
<?php add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns"); add_action("manage_posts_custom_column", "portfolio_columns_display"); function portfolio_edit_columns($portfolio_columns){ $portfolio_columns = array( "cb" => "<input type=\"checkbox\" />", "title" => "Project Title", "description" => "Description", ); return $portfolio_columns; } function portfolio_columns_display($portfolio_columns){ switch ($portfolio_columns) { case "description": the_excerpt(); break; } } ?>
This will enable users to easily see details of the projects that they have added to their portfolio:
Displaying The Portfolio
OK, so now that we have the backend sorted and the custom “portfolio” post type created, we want to display the portfolio items on the screen. Let’s create a new page template called “portfolio.php” – here’s the code for that file:
<?php /* Template Name: Portfolio */ ?> <?php get_header(); ?> <div id="content"> <?php $loop = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 10)); ?> <?php while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php $custom = get_post_custom($post->ID); $screenshot_url = $custom["screenshot_url"][0]; $website_url = $custom["website_url"][0]; ?> <div id="portfolio-item"> <h1><?php the_title(); ?></h1> <a href="<?=$website_url?>"><?php the_post_thumbnail(); ?> </a> <?php the_content(); ?> </div> <?php endwhile; ?> </div><!-- #content --> <?php get_footer(); ?>
Let’s break that down a bit – lines 1-3 tell WordPress that this is a page template called “Portfolio”:
/*
Template Name: Portfolio
*/The important bit of code is the following:
$loop = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 10));
This tells WordPress to loop through the portfolio post type and display the individual portfolio items. The rest of the code is essentially defining what should be displayed on the screen for each individual portfolio item.
Now create a new page in your WordPress admin panel and assign the “Portfolio” template that we just created to it.
Now create some new portfolio items and add a thumbnail to each one:
If you now view your page in the browser, you should see the thumbnails being displayed for each individual project, along with the project title and description. However, it may look a little messy and require some styling – here’s the CSS code that I used for the Kanzoo theme – you many need to adapt this for your site to make the look and feel consistent:
<style> #content { width: 1200px; margin: 20px 0 0 -60px; } #portfolio-item { float: left; margin: 0 0 0 60px; width: 280px; } #portfolio-item h1 { font-size: 16px; margin: 20px 0 5px 0; } #portfolio-item img { border: 1px #ccc solid; margin: 0 0 10px 0; } </style>
This results in the Portfolio looking a little tidier:
All Done!
So, that’s it – the example provided in this tutorial can be adapted for all sorts of custom posts (books, people, products, films, phones, cars, etc.), so have a play around and see how it easy it is to enhance your themes.
I hope you found the tutorial useful – leave comment below if you have any questions/feedback.
February 2nd, 2011 at 5:48 am
Thanks a lot for posting this Chris! Very helpful. Here’s mine implemented on Genesis: http://www.trostleinc.com/portfolio/
February 9th, 2011 at 2:55 pm
Hey Chris first of all it’s an amazing turorial it is exactly what i was looking for, i just have 1 minor detail on my portfolio template the”" does not show the URL i wrote it just shows the same , i hope you could help me, regards.
February 9th, 2011 at 3:58 pm
what i mean is that the website url does not show with the am i missing something? =(
February 10th, 2011 at 8:38 pm
For some reason, I can’t get it to show up in my custom portfolio template. Any ideas?I I’ve been racking my brain for hours on this.
March 13th, 2011 at 8:55 am
Well i have a little problem with the code. I was expecting that this “loop” creates different pages for keep it in order. That if you have more than 10items on the portfolio it creates new pages when you add more, but it don’t do that. I know an option is put more than 10 on the :
‘portfolio’, ‘posts_per_page’ => 10));
?>
but, is a way to make it create more pages when you add more items?
July 12th, 2011 at 7:19 am
I had the same problem and nobody answered… so I helped myself.
Here the solution.
replace the following code:
$loop = new WP_Query(array(‘post_type’ => ‘portfolio’, ‘posts_per_page’ => 10);
with this:
$loop = new WP_Query(array(‘post_type’ => ‘portfolio’, ‘posts_per_page’ => 10, ‘paged’ => $paged));
Now paging works. Next we have to add the Page Navigation.
After the we put this code:
query(‘showposts=5′.’&paged=’.$paged);
?>
Now we have a paged custom portfolio.
Greets
July 12th, 2011 at 7:23 am
Oh, the important code is missing. Here it is.
After the closing porfolio div (or whereever you like to display your navigation) we put this code:
query(‘showposts=5′.’&paged=’.$paged);
?>
July 12th, 2011 at 7:26 am
//PHP START TAG//
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query(‘showposts=5′.’&paged=’.$paged);
//PHP CLOSING TAG//
//PHP START TAG// $wp_query = null; $wp_query = $temp; //PHP CLOSING TAG//
July 12th, 2011 at 7:33 am
NOW THIS ONE IS CORRECT! The commentforms convert the php and html code…
After the closing portfolio div put this code:
//PHP START TAG//
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query(‘showposts=5′.’&paged=’.$paged);
//PHP CLOSING TAG//
//DIV START TAG// class=”navigation” //DIV CLOSING TAG//
//DIV START TAG// class=”alignleft”>//PHP START TAG// previous_posts_link(‘« Previous’) //PHP CLOSING TAG// //DIV CLOSING TAG//
//DIV START TAG// class=”alignright”>//PHP START TAG// next_posts_link(‘More »’) //PHP CLOSING TAG// //DIV CLOSING TAG//
//DIV CLOSING TAG//
//PHP START TAG// $wp_query = null; $wp_query = $temp; //PHP CLOSING TAG//
March 20th, 2011 at 4:26 am
Hi Chris,
You have shared a gr8 tips, I appreciate your help. Chris I am having some problem with the coding.
The coding work in the whole but there is some issue just like when I am adding any site link in the portfolio section the link is hyperlink to with the Featured Image but its in the following way
http://localhost/wordpress/%3C?=$website_url?%3E
and you have written in your code to show 10 posts in the portfolio section, In order to match my theme I want to show 4 posts in the front page, so I reduced the value to 4 and its work gr8 but the thing is rest of the portfolio Item disappear, so is there any way to show in pagination wise, suppose after showing the latest 4 items the rest old items will be move to the next page of the portfolio section, so that this will help to everyone who have more portfolio items.
I hope you will read my this comment and reply me. This will help everyone.
Thanks.
March 21st, 2011 at 11:43 pm
Wow wow! Thanks you very much in advanced…. It’s really helpful ….
March 22nd, 2011 at 12:20 am
Hi Chris!… Could you tell me more about making a link?
I would like to know how to make a link on clicking on picture, then go to another pages… like “Page Details”.
Please everyone help me!
Thanks!
April 5th, 2011 at 4:56 pm
Hey,
If you, set the Custom Post Type, to anything you want “Current on that tutorial it is Portfolio”
Then create a new page called “single-portfolio.php”
Then on that page, Add the Norm code to display posts’
”
<div id=”post-”>
<?php the_content('Read the rest of this entry »’); ?>
”
Then change the Portfolio Templates Code from..
” <a href="”> ”
To
” <a href="”> ”
Stewart,
July 23rd, 2011 at 1:27 am
I think what you mean here is the below which retrieves the link to the post and also if helpful shows the excerpt so you can use this on the portfolio page but link to the full detail of the post.
<a href=" “>
March 26th, 2011 at 7:20 pm
I am having problems displaying the website link.
April 12th, 2011 at 10:47 am
Hi Chris,
You have shared a Good tips, I appreciate your help but Chris I am having little problem with the coding. I have followed all the steps given by you. Everything works good and I have also decorate my Portfolio Page with custom CSS styles.
Everything is fine but the problem is the Portfolio Link is not at all working and is there any way when we will add more stuffs to the portfolio section then the pagination will be added automatically so that we can check navigate to the second page.
Everybody have similar issue. You have contributed a gr8 thing but it not looking good when you are not replying to us and not helping in these small thing. As We know you are Good in Coding so please find some time for our problem and help us in fixing these small issues.
I will wait for your reply.
Thanks
Ron
April 12th, 2011 at 11:16 pm
hi…I have some problem to display page number in the bottom of portfolio pages, because if I post more than 10 portfolio, the older post cant display again…please help me…:)
May 11th, 2011 at 11:53 am
The URl doesn’t show, or if it was meant to be a link, it doesn’t work.
How can i add an input field to write a description, besides being the content? And call that description inside a div or something of the sorts?
Thanks. Really helpfull tutorial.
May 16th, 2011 at 8:32 am
Hi Chris,
Great post but I keep getting the same error when I try to update any of the pages or posts since I updated the funtions.php.
Warning: Cannot modify header information – headers already sent by (output started at /home/awesomec/public_html/wp-content/themes/mark/functions.php:548) in /home/awesomec/public_html/wp-includes/pluggable.php on line 897
I was wondering if there is a way to fix it? I’m very much a novice so you’ll need to talk slow.
Mark
May 21st, 2011 at 5:53 am
Mark, I too initially had the problem, if you remove the ?> from the end of each one it should work if not email me and I’ll send you on my code, but I did get it working on http://www.rusola.co.uk/portfolio which should websites that I have designed.
May 21st, 2011 at 5:50 am
Hi Chris this is fantastic it’s just what I’ve been looking for, I too have implemented it on our website which is based on genesis if you want have a look http://www.rusola.co.uk/portfolio. I’m going to start applying different CSS for website design for different types of businesses.
June 18th, 2011 at 3:13 pm
Hey. The same problem as Marc already said. When I create more than 10 items, the portfolio don’t create more pages and no pagination. How to do that?
Greets
June 26th, 2011 at 2:18 pm
F’n brilliant… been searching for days to find something like this. Well done!
July 1st, 2011 at 3:39 am
Great tut! But as many others, the website_url doesnt work..
I’ll look into it and see if i can solve it on my own, but any help on it?
July 5th, 2011 at 4:09 pm
I managed to solve the website_url problem. Keep in mind I don’t know PHP: -
On the portfolio template
Replace <a href="”>
with <a href="http://www.”>
Now now when you add a url to your portfolio items all you need to do is simply type the website name, websitename.com no need to add the http or www parts.
Bryan
July 5th, 2011 at 4:17 pm
July 5th, 2011 at 4:19 pm
^Replace it with that
July 5th, 2011 at 4:22 pm
and one more time view the code here…
pastebin .com/TDkDCMgr
July 12th, 2011 at 6:51 am
Hey
I ask again…
When I create more than 10 items, the portfolio don’t create more pages and no pagination. How to do that?
Greets
July 13th, 2011 at 8:44 am
Stick the following code snippet above the line with $loop in it on the template file: -
pastebin.com/pNvVj6Ky
and stick the wp pagenavi plugin code at the bottom…
BOOM pagenation!
July 20th, 2011 at 7:40 am
Hey, thanks for your help! Found a related solution.
Greets
July 22nd, 2011 at 2:42 am
Thanks for this helpful guide. Is there a way to link through to the full post for the item without having to add a manual url? Ie show title, thumbnail and excerpt in portfolio view but then link through to project details like your demo does? Thanks.
July 22nd, 2011 at 2:43 pm
Written in very descriptive manner.Like it very much.Thanks for the writeup:)