Build A Dynamic Design Portfolio with WordPress

Any content pulled from WordPress qualifies as “dynamic” by definition, but there are varying degrees of how to break down and print that data. As seen in other articles, I’m a fan of exploiting WordPress’s query_posts function for purposes other than blogging.

The Scenario

I recently needed a solution to power the Portfolio section of my company’s website. Ideally, we wished to have a custom database to handle data tables like these, but our programming team was indefinitely busy with client work. So since WordPress was being used to publish the flat pages and the News section anyway, I decided to create a new post-category for portfolio items and use the query_posts function to call them.

Homepage Excerpts

Take a look at the “Recent Projects” section of the homepage. Each sample contains a thumbnail image, title and summary. Each is actually is a separate post under one category called “Portfolio”, and when clicked they take you to the corresponding details on the main Portfolio page. How do we get this all to work?

Creating the Post

Let’s start with the SOCA project. Begin a new post and a new category called “Portfolio”:

Make sure you have the WP visual editor turned off. Then paste in the necessary table data (what appears on the detail page), making sure to insert an anchor jump like this:

This will allow excerpts on the homepage to jump to the corresponding item on the main Portfolio page. Scroll down to the “Optional Excerpt” field and insert whatever text you want for the homepage:

Scroll down even further and we’ll create a custom field for the thumbnail image. Name your key “Thumbnail”, and for the value just type the image filename:

The Homepage Template Code

We will now need a piece of template code to query the “Portfolio” category for its last four entries, print the thumbnail, title and excerpt for each, and wrap the entire thing with a jump-anchor:

<?php query_posts('showposts=4&cat=46'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sample">
<a href="/portfolio#<?php the_title(); ?>" title="Read more about <?php the_title(); ?>">
<img src="/images/<?php $values = get_post_custom_values("Thumbnail"); echo $values[0]; ?>" />
<span><?php the_title(); ?></span><?php the_excerpt(); ?>
</a>
</div>
<?php endwhile; ?>

The Portfolio Template Code

If you’re already familiar with template tags, the code for this page be self-explanatory. I’ve also hardcoded in the little flower icon (“divider”) which appears between portfolio items:

<?php query_posts('showposts=10&cat=46'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<div class="divider">&nbsp;</div>
<?php endwhile; ?>

Excluding the Category

After all portfolio items are entered in the database, we’ll need to make sure they don’t show up in the “Latest News” section of the homepage. That’s as easy as creating a category called “News” and making sure to call only those items:

<?php query_posts('showposts=3&cat=44'); ?>

Using WordPress to drive our portfolio is not a permanent solution, but it will make future updates much easier than they had been. It’s another example of how WordPress can function as much more than a blog.