How to Create a Dynamic Design Portfolio with WordPress

UPDATE – Sept. 20th 2009: The system described in this tutorial is no longer in use in the new website. I’ll update the tutorial as soon as possible with picture references of the old system.

As anticipated in a recent post I have set out to turn my Portfolio and Freebies pages into dynamic lists that update automatically every time I add new content. The process is finally complete. Here’s how I did it.

dynamic-portfolio

The first thing I did was of course search for tutorials on this subject and although I did find some useful resources there was nothing that suited my needs.
I wanted to have an integrated blog/portfolio site which would allow me to write articles about my works, detailing my design process, while at the same time having a schematic list of my projects on a dedicated page. In a similar fashion I wanted to be able to write posts about the free icon sets and desktop wallpapers I release on a regular basis and having them show up in a nice clean gallery for your viewing and downloading pleasure.

The solution lies in using custom fields for the posts. Normally posts have only a few items associated with them: the title, the content, the date, the categories, the tags. These items can be directly manipulated and displayed using their specific template tags and this is what we all do when creating WordPress themes. Anything else you might want in a post can be added by creating a custom field for it.
I’m not a programmer, I’m a resourceful designer who’s taught himself how to code websites. Although I have a fairly good knowledge of XHTML and CSS I’m still a total newbie when it comes to WordPress. Therefore it stands as proof that WordPress is really amazing that in a short time I was able to devise a system that would work for me.

The very idea: display the usual post items in the blog, create additional items using custom fields and create a portfolio page template that displays them.

Depending on how you design your portfolio page you will have to add different custom fields to your posts. I have chosen to display for each project: a clickable thumbnail that opens a full-size image, the project title, a short description and a link to the full-blown blog article. Like this (click to enlarge):
project-view
Knowledge of WordPress is required to follow the next steps. Let’s get technical now!
In WordPress’s Admin panel create a new post. Call it “My newest artwork.”
create-new-post
It’s important that the post be assigned to the “Portfolio” category. Also add any other category that applies (ex. identity, print, 3d etc)
add-portfolio-category
Now create some content using images and descriptive text to showcase your awesome work and outline your design process. This is the article that will appear in your blog. Now our goal is to automatically generate a schematic version of this article to appear in list or tabular form on our portfolio page. To accomplish this we need to add a few custom fields to our post.

Scroll down the Edit Post page to the Custom Fields section where it says “Add new custom field” and you should see that custom fields have two parameters: Name and Value.
custom-fields-dialog
Let’s add a thumbnail to our post: under Name enter “thumbnail”, under Value enter the full path to your (previously uploaded) thumbnail picture. The best way to do this is to open the Media browser, select the thumbnail image and where it says Link URL click on File URL. Copy the address that appears, click on None (to clear the link) and close the Media browser. (click to enlarge)
media-browser
Now hit Ctrl+V in the Value field to paste the file’s URL and click on the “Add custom field” button to finish. Our post now has a thumbnail associated with it.
thumbnail-custom-field
Repeat the same process to add a “fullsize-img” custom field, entering the path to the full-size picture as Value (doh! I know…)
Now create the “project-description” custom field. Under Value write a short descriptive text, the first couple of sentences from the blog article will do just fine. Here’s a screenshot of our three custom fields:
final-custom-fields
Our work in the Admin panel is done, let’s get coding.

Fire up your favorite text editor, create a new PHP document and save it as “portfolio.php”. In order for WordPress to recognize this file as a page template we need to mark it as such. Enter the following code at the top of the page:

<?php
/*
Template Name: portfolio.php
*/
?>

Now let’s start our template.
Include the header, create a main div for the page, place the page title and write some introductory text (see highlighted code). Here’s our template so far:

<php
/*
Template Name: portfolio.php
*/
?>;

<?php get_header(); ?>
<div id="portfolio">

  <h1 id="page-title"><?php the_title(); ?></h1>
  A selection of my finest creative output.

</div>

Now we need to tell WordPress to only list posts belonging to the category “Portfolio”. To do this place this code in your template:

<php
/*
Template Name: portfolio.php
*/
?>;

<?php get_header(); ?>
<div id="portfolio">

  <h1 id="page-title"><?php the_title(); ?></h1>
  A selection of my finest creative output.
  <?php query_posts(showposts=-1&amp;cat='60'); ?>

</div>

What this does is filter all posts to only include those assigned to the category with an ID of 60. What’s 60? It’s the ID of my Portfolio category. Yours will have a different ID so change this value to reflect that. The attribute “showposts” lets you decide how many posts to display. Type -1 to display all.
Now that our filter is in place we will add the Loop. I’m sure you know what it is. If you don’t I can’t believe you’re still following me!

<php
/*
Template Name: portfolio.php
*/
?>;

<?php get_header(); ?>
<div id="portfolio">

  <h1 id="page-title"><?php the_title(); ?></h1>
  A selection of my finest creative output.
  <?php query_posts(showposts=-1&amp;cat='60'); ?>
  <?php while (have_posts()) : the_post(); ?>
  --- YOUR CODE HERE ---
 <?php endwhile; ?>;

</div>

This tells WordPress to look for posts and, if it finds any, display them according to the following code, which we will enter in Line 14 above:

<div class="project" id="post-<?php the_ID(); ?>">

<div class="thumbnail">
  <a href="<?php $values = get_post_custom_values("fullsize-image"); echo $values[0]; ?>">
  <img src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" />
  </a>
</div>	
      
<div class="project-description">
  <h2><?php the_title(); ?></h2>
  <div><?php $values = get_post_custom_values("project-description"); echo $values[0]; ?><br />
  <a href="<?php the_permalink(); ?>" title="design process">Design process</a>
  </div>
</div>

</div>

That’s a lot of code. Let’s dissect it piece by piece.

<div class="project" id="post-<?php the_ID(); ?>">

First we’ll put each post inside a div with both a class and an ID. The class is for CSS styling, the ID for targeting each post individually. That last PHP tag (the_ID) pulls the post’s ID from the database so each post will automatically have a unique identifier.

<div class="thumbnail">
  <a href="<?php $values = get_post_custom_values("fullsize-image"); echo $values[0]; ?>">
  <img src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" />
</a>
</div>

Here we create a div for the project thumbnail with its own eponymous class. Calling up the values of the custom fields created earlier we display the thumbnail and link it to the full-size image associated with the post.

<div class="project-description">
  <h2><?php the_title(); ?></h2>
  <div><?php $values = get_post_custom_values("project-description"); echo $values[0]; ?><br />
  <a href="<?php the_permalink(); ?>" title="design process">Design process</a>
  </div>
</div>

Now we create a div for the project title and project description, adding a link to the full-blown blog article. Again we use PHP tags to get the values we need from the database. And we’re done!
Let’s see the full page template:

<php
/*
Template Name: portfolio.php
*/
?>;

<?php get_header(); ?>
<div id="portfolio">

  <h1 id="page-title"><?php the_title(); ?></h1>
  A selection of my finest creative output.
  <?php query_posts(showposts=-1&amp;cat='60'); ?>
  <?php while (have_posts()) : the_post(); ?>
  <div class="project" id="post-<?php the_ID(); ?>">

  <div class="thumbnail">
    <a href="<?php $values = get_post_custom_values("fullsize-image"); echo $values[0]; ?>">
    <img src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" />
    </a>
  </div>
      
  <div class="project-description">
    <h2><?php the_title(); ?></h2>
    <div><?php $values = get_post_custom_values("project-description"); echo $values[0]; ?><br />
    <a href="<?php the_permalink(); ?>" title="design process">Design process</a>
    </div>
  </div>

  </div> 
  <?php endwhile; ?>

</div>

See the template in action. Now go create beautiful work and blog about it!

Share this post with the world!

separator

31 Very Welcome Comments:

  • Hey;
    I’m not sure on the performance difference between how you grab the meta and how I do but I do it like this…

    <a href=”<?php echo get_post_meta($post->ID,”fullsize-image” , true) ?>”>
    <img src=”<?php echo get_post_meta($post->ID,”thumbnail” , true) ?>” />

    although I normally grab the $post -> ID as a value rather than look it up each time

    • Andrea says:

      Phill as I say in the article I’m not really a programmer. Couldn’t say if your code is faster though it looks shorter than mine. I’m still learning WordPress and for now I’m satisfied with my version. The post is more about the workflow than the code anyway.

  • HI Andrea,

    This is a great tutorial, but I’m obviously missing something. I followed your steps exactly, but I’m not sure what exactly to do with the portfolio.php page

    I created a page in WordPress and chose the portfolio page as the page template, but when I view portfolio, I get nothing but a white screen. Here’s the portfolio page that used as template for my static Portfolio page. I also tried it with only the code you show above, without calling sidebar/footer, etc, and I still get a blank page.

    I do need to create a page and use the newly created portfolio.php as the page template,right.

    I know this is easy, and you’ve given a simply step by step tutorial, but I’m missing something.

    Thanks, Yael

    A selection of my finest creative output.

    <div class=”project” id=”post-”>

    <a href=”">
    <img src=”" />

    <a href=”" title=”design process”>Design process

    • Andrea says:

      Yael,

      you need to create a new page and select portfolio.php as template. Make sure you have some posts under the Portfolio category and check its ID (just hover over it in the admin panel and the browser’s status bar will show it). Make sure the ID you enter in

      <?php query_posts(showposts=-1&cat='60'); ?>

      is the same. If you still have problems drop me an email and attach your files, I’ll see what I can do to help.

      • Jorge says:

        Hi are you sure it works with this code Because I tried it and did not work with this code was missing this To function not know if I’m wrong but check for other users having the same problem.

        For desert you for the tutorial I served much the same nothing happened I docked my needs and found it cost me because I do not find work but because I work and I’m happy = D jajaja

  • Andrea,

    You are so wonderful to respond. Really, thank you.

    I created the portfolio.php page and changed the cat ID # to my portfolio category, added one post, but I get that dreaded white screen when I go to the portfolio page, so I’m obviously messing up the there.

    I”ll send you my portfolio.php page by email. Thanks again for offering to help!

    Yael

  • Excellent job Yael. I used some of the same basic ideas for my upcoming portfolio.

  • tucchus johnson says:

    woh! have you ever heard of textpattern? much easier to set this kind of site up in there.

    • Andrea says:

      tucchus,
      I’ve never heard of textpattern. I think nothing beats WordPress for ease of use and flexibility but thanks for pointing that out.

      • I am with Andrea on this :) Even I never heard of textpattern and it might be easier to set up this kind of site using it but wordpress is flexible enough to make any kind of site!

  • Yael, I’ve gotten the same blank page as well. I’m not sure why that is, but I’ve gotten it to work with a different setup that I found elsewhere. It uses this code right before the div containing the permalink:

    $cat,
    ‘showposts’ => $showposts,
    ‘caller_get_posts’ => $do_not_show_stickies,
    );
    $my_query = new WP_Query($args);

    ?>

    have_posts() ) : ?>

    have_posts()) : $my_query->the_post(); ?>
    in_the_loop = true;
    ?>

  • Erm, looks like I can’t paste php code. Anyway, the code is outlined on this Codex link: http://codex.wordpress.org/Pages#A_Page_of_Posts

  • b00m says:

    Hi Andrea,
    At first I got an error line 12 in portfolio.php. To fix the bug I just change: query_posts(showposts=-1&cat=’3′) to query_posts(‘showposts=-1&cat=3′).
    Anyway, tnx for sharing your tuts.

  • Arlo says:

    I’m working on a portfolio using WordPress, as well, and the way you’ve set up your template will be very helpful. Thanks for the tips.

    One thing that is helping me tremendously is the Flutter plugin:

    http://flutter.freshout.us/

    It allowed me to create a custom panel under Posts called “Portfolio”. I don’t have to remember the labels for my custom fields, and the inline image upload could save you tons of hassle from having to copy-and-paste image URLs. You should check it out.

    (I have nothing to do with the development of Flutter–I’m just a fan.)

  • Great post… good suggestions…thanks!

  • Hey, Thanks for this awesome tutorial.. Just what I was looking for! Tutorials like this are of great help to people who are new to wordpress :) Keep up the good work.. thanks..
    P.S.: Tweeted!

  • Hi Andrea,
    Like I said before. I was trying to implement what you taught in this tutorial in another way using jQuery and stuff.. Its not yet 100% complete but you can still take a look and give me your views and suggestions on it.. :) I would really appreciate it a lot…

  • twisty says:

    Hey great post, i’ve been thinking about something like this for a while.
    One question i have is: i have my permalinks set up in the popular /%category%/%postname%/ structure.
    If i have a page called portfolio and a category called porfolio is that going to make problems?
    How did you get around it?

  • Sandeep says:

    Thanks for this awesome tutorial..

  • Hey Andrea, just want to say thanks for the great tutorial!

  • Casey says:

    Hi Andrea,

    Thank you so much for the tutorial! I had been searching for days and this was exactly what I was looking for. One problem…. the portfolio page works in Firefox and Safari, but in Internet Explorer it is off center (nearly cut off on the left side). The homepage and everything else looks fine, it’s just the portfolio page that I added. Any idea what could be causing this? I am a newbie at coding and WordPress, so any help would be much appreciated.

    Thanks,
    Casey

  • thanks for posting dis tutorial.. It is of gr8 help

  • Thanks so much of the tip Andrea but I just can’t replicate the tutorial. Am just getting a white screen with nothing. Changed the IDs to match but nothing!

    • Andrea says:

      Arthur, there are just so many things that could be problematic that I can’t really help you. Sorry. Just check that everything is all right another time :-)

  • Great Tutorial… very very thanks.

  • hi
    I need your help to create my portfolio>

  • Great tutorial what if i want multiple pages of portfolio? thanks

  • Good one. Thanks for this post.

Speak Your Mind