August 18th, 2006

How to Use WordPress for a Portfolio Site - Part 1

Part of the Using WordPress as CMS SeriesNow that we’re done with a large portion of the technical basics of Using WordPress (WP) as a CMS, let’s continue on with the next step: Using WP for a portfolio site (primarily graphics and design-based).

If you need a brief overview of portfolio sites and a couple of examples of WP-powered ones, take a short detour to one of my introductory posts. If not, here’s what we’re going to be working on today:

I’ll be using the WordPress Default 1.5 theme (a.k.a. Kubrick) to illustrate all the steps explained in this post, so you might have to adapt the steps given for other themes (usually this just involves adding a few template pages and tags).

Thumbnail Listing of Recent Projects

The main index of one of the more popular kinds of portfolios usually looks something like this (but much, much better looking of course):
Thumbnail Listing Screenshot
More often than not, this listing will also be in reverse chronological order from top to bottom, and left to right. Here’s an overview of my preferred method of getting something like that using WordPress’ posts system:

  • Optional Introductory Reading: We’ll be modifiying the WP loop later, so you might want to read a bit on it and how it works first if you’re not familiar with it.
  • Method Overview: This method involves using each post as a portfolio project, and using the custom fields in each post to store the URLs of each project’s thumbnail (for the front page thumbnail listing) and big images (for the individual project page). Then, we modify the Loop to call the contents of these custom fields to show thumbnails on the main page, and big images (plus content text and project tags) on the individual project pages.

And here’s the step-by-step instructions:

  1. Edit your Main Index Template via Presentation >> Theme Editor.
  2. Delete everything between <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> and </div> <?php endwhile; ?> (only the stuff between the two sets of code, so don’t delete these lines as well!). Don’t worry, all you deleted is code describing how each post on the main page normally looks like.
  3. Replace the stuff you just deleted with:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

    <?php echo '<img class="thumb" src="'.get_post_meta($post->ID, 'thumbnail', TRUE).'" />';

    </a>   

    This basically tells WordPress to fetch the contents of the custom field named “thumbnail” (which should be the URL of your thumbnail image), and output it within a normal html <img> tag. You’ve also surrounded the thumbnail with a hyperlink to your individual project page.

    Note: Alternatively, you may want to use the Get Custom Field Values plugin to replace my use of the get_post_meta() template tag. If you choose this route, replace <?php echo '<img class="thumb" src="'.get_post_meta($post->ID, 'thumbnail', TRUE).'" />'; ?> with <?php echo c2c_get_custom('thumbnail', '<img class="thumb" src="', '" />', 'blank'); ?>.

  4. The backend is done. Now to style your output. This is what I placed at the end of my CSS file to get what you saw just now:

    .narrowcolumn .post {float:left; width:125px; height:90px; text-align:center; margin:0 0 15px; padding:0;}

    .narrowcolumn .post h2 a {font-size:10px;}

    The float:left on your post div instructs the browser to align your thumbnails from left to right as long as the width of the page hasn’t been exceeded, while I set fixed widths and heights to ensure uniformity in layout. The last line merely reduces the size of the h2 title to a more managable size.

    Note: This is only the essential stuff. You’ll have to make the layout look nice yourself!

  5. With all that, you are now ready to create your portfolio projects. First up, create a post via Write Post. Fill in the title with the project name, choose a category for it, and fill in the content box with any details about the project you want to share.
  6. Next, create two custom fields under the Custom Fields tab. The first one should be named something like “thumbnail” (that’s what we used just now), while the second one named something like “big_image” (for your individual post page later). Fill in the values of both fields with their respective image URLs. When complete, it should look something like this:
    Custom Fields Screenshot
  7. And that’s it. Don’t forget to Publish the post.

Yep, that’s it for your thumbnail listing. There are a number of alternatives to this method, such as using the_excerpt() to store your thumbnail rather than a custom field - though to my knowledge, none are as flexible and extensible as using custom fields. Nevertheless, you might find alternative methods more intuitive, and they have their own supporters. For example, Hamza over at FreeWay Design.com uses the the_excerpt() method to handle his thumbnail listing, and his layout turns out pretty much the same.

Individual Project Pages

If you could get the thumbnail listing done, this will be a breeze since the steps involved are mostly the same. Here are the step-by-step instructions:

  1. Edit your Single Post template via Presentation >> Theme Editor.
  2. Delete everything between <h2><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2> and </div> <?php comments_template(); ?> <?php endwhile; else: ?>. You might also want to delete <?php comments_template(); ?> to disable comments on your individual project pages.
  3. Replace what you deleted with:

    <?php echo '<img class="bigimg" src="'.get_post_meta($post->ID, 'big_image', TRUE).'" />';?>

    <?php the_content(); ?>

    The first line fetches the contents of the custom field named “big_image” (which should contain the URL of your big image), while the last line instructs WP to display the contents of your post (e.g. your project details, etc.).

    Note: If you chose to use the Get Custom Field Values plugin, replace <?php echo '<img class="bigimg" src="'.get_post_meta($post->ID, 'big_image', TRUE).'" />';?> with <?php echo '<img class="bigimg" src="'.get_post_meta($post->ID, 'big_image', TRUE).'" />';?>.

  4. I chose not to style the output… but that’s why it looks like crap.

Categorical listing of projects

The layout for your category listings is basically the same as the layout for your main index page, so the steps you need to take are pretty much the same. Here’s what you need to do:

  1. Edit your Archives template (the one with the archive.php file name) via Presentation >> Theme Editor.
  2. Delete everything between <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3> and </div> <?php endwhile; ?>.
  3. Replace the stuff you just deleted with:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

    <?php echo '<img class="thumb" src="'.get_post_meta($post->ID, 'thumbnail', TRUE).'" />';

    </a>   

    This step is exactly the same as the Step 3 for your thumbnail listing.

Conclusion

And this ends Part 1 and most of the fundamental stuff necessary in a portfolio site. I’ve setup a demo site built on the exact same steps seen in this post just to show you how it works out. Very simplistic, but it works. Feel free to clarify anything or suggest other features necessary in a portfolio site.

In Part 2 (which is now available), we’ll look at the more optional extras, including project tagging (e.g. did code-only, did design-only, etc.), a Most Recent Project(s) section, a featured projects section and blog-portfolio integration.

P.S.: This post is part of the Using WordPress as a CMS series.

If you found this post useful, keep updated with future posts by subscribing to blogHelper (for free) through RSS or email.

Remember to share this post as well (if you liked it, of course): These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Fark
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • YahooMyWeb

Posted by ZMAng

Filed under Guides, Plugins, WordPress

92 Comments

Leave a Reply