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"> </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.
Popularity: 3% [?]
A quick tip for you
empty anchor elements are bad. The better thing to do is to use a div with an id that you link to - in your example a div with an id of SOCA would work exactly the same as an anchor with a name of SOCA.
And it’s less code :)
Otherwise it’s a nice idea. I like to use wordpress for things other than blogs too.
Good point - til I tested it just now, I didn’t realize spaces were allowed in the id attribute, example:
<div id=”Artful Lodger”>
But sure enough it works.
Another stunning entry!! Great great job.
Hi Darren,
Great post ! I am implementing the same kind of feature for one of my client. But I have a question: I want to divide my homepage into 2 parts. The 1st one is the last “leader” post. It belongs to the category “leader”. And below, I have the others post. But I would like to have the older “leader” posts too.
What i dit is to implement query post to show 1 post from cat=1 but for the rest of the page I would like to implement quesry post show all articles EXCEPT last article cat=1.
Do you know how I could to that ? You can contact me by email if you think it is not exactly the subject of that article… Sorry for flooding…
Thx
Francis
This is my first post
just saying HI
I loved your post. This is a very innovative idea for a portolio. I thought that your users might also benefit from my article on How to Create a Traditional Design Portolio - http://allgraphicdesign.com/graphicsblog/2007/10/01/how-to-create-a-traditional-graphic-design-portfolio-yes-with-an-actual-case/ - sort of the opposite of your post.
Thanks for the great post.
Rachel
Greatfully, the conseption of your portfolio will help me to create my own plugin. Thanks.
Hey Darren
I don’t think it was mentioned, but what is controlling the thumbs from cat 4 to display in 2 rows of 2 instead of one row of 4?
Each portfolio summary on the Cat4 homepage sits in a left-floating div, with the class of “sample”. Since they float against each other inside a larger div, they break down to the next line and begin to “tile”. It took a little experimentation to get the widths right.