August 18th, 2006
How to Use WordPress for a Portfolio Site - Part 1
Now 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:
- Thumbnail listing of projects in reverse chronological order, a.k.a. Recent Projects
- Individual project pages with larger picture(s)
- Categorical listing of projects
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):

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:
- Edit your Main Index Template via Presentation >> Theme Editor.
- 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. - 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'); ?>. - 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:lefton your postdivinstructs 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 theh2title to a more managable size.Note: This is only the essential stuff. You’ll have to make the layout look nice yourself!
- 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.
- 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:
- 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:
- Edit your Single Post template via Presentation >> Theme Editor.
- 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. - 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).'" />';?>. - 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:
- Edit your Archives template (the one with the archive.php file name) via Presentation >> Theme Editor.
- 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; ?>. - 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.















32 Comments
August 18th, 2006 at 5:54 am
[…] How to Use WordPress for a Portfolio Site - Part 1 […]
August 19th, 2006 at 2:46 am
Great Post. I think even a technically challenged person like myself could easily set one up
August 27th, 2006 at 6:16 pm
I’ve used Wordpress extensively in setting up portfolio sites because it’s such a breeze to set up. I tend to use unordered lists and style that but I’ll be trying out just styling the divs.
Thanks! Great article. Will be keeping my eye out on more in the series
August 27th, 2006 at 8:55 pm
That was exactly what I am looking for. Many thanks.
August 30th, 2006 at 8:34 pm
[…] In Part 1, we looked at how to setup a simple (mainly graphic-type) portfolio site using nothing other than WordPress (WP). Modifying the WordPress loop to display thumbnails of your projects, individual project pages that displayed a larger image, and categorical listings that also displayed project thumbnails - all in an organised manner - were the key concepts offered then. […]
October 3rd, 2006 at 10:43 am
How do I get the posts to line up after eachother on the frontpage?
November 25th, 2006 at 7:26 pm
There’s missing a “?>” in part 3 of all the changes to be made, at the end of the echo statement. It took me a while to figure it out.
Otherwise it’s a great “how-to” You’ve written!
January 22nd, 2007 at 1:50 pm
Hi,
I am trying to get thumbnails using WP on my homepage (ThisPixel.net), which I have managed to do. What I need to do now is to make them into three or four seperate columns, such as on your homepage. Do you have any ideas?
Thanks.
February 7th, 2007 at 5:47 am
I think it is a great post. But i can’t realise it. Every time i change the Main index Template i get an error when i want to view the site;
the error:
Parse error: parse error, unexpected ‘
February 22nd, 2007 at 4:45 am
this is nice !
March 20th, 2007 at 4:36 am
[…] http://bloghelper.is-there.net/how-to-use-wordpress-for-a-portfolio-site-part-1/ […]
April 16th, 2007 at 7:25 am
i’m using WordPress 2.1.3 actually building my portfolio site with it. Since now i’ve used Pages more than Post (i think pages are new in WP ?) cause it let me display a list of projects very simply (actually its automatic). Each page beeing a project.
Is it possible to use all your method with Pages intead of Posts ? How to do that ?
April 16th, 2007 at 9:15 am
ok i realise now that the Page option don’t let you add tags so it doesn’t really fit (sorry i’m new to WP). So finally i need to use Post like in your article, but how can i do display the alphabetic list of post (=projects) in my main page ? Is it possible ?
June 26th, 2007 at 1:41 am
Hi,
I´ve followed your instructions and I get stuck on the 7th step. Everything seems to work ok, but I can´t make the pages to show the images.
I’ve fixed the missing “?>” in step 3 but nothing happens.
Any suggestion?
Thanks.
June 26th, 2007 at 1:52 am
Hi,
everything ok. I was fixing the ‘echo’ statement incorrectly.
Great article!
July 11th, 2007 at 5:02 am
Great post! I was trying to find a plugin or something to do just that!
July 20th, 2007 at 8:52 pm
[…] Bloghelper - Wordpress for a Portfolio Site The first of a series of articles focusing on using Wordpress as the backend for a portfolio of sorts. […]
September 6th, 2007 at 6:37 pm
I can’t get your code to work, I am trying to use the first set you say to copy and paste with my custom template and when I put your code it just makes elements of my page disappear, can you post the theme you edited or assist? Thanks
September 7th, 2007 at 7:32 am
nevermind I got it to work but not with the custom field plugin, which is odd. In any event you might want to double check your first line of code that you say to paste, you are missing the ?> at the end and for a newb this can mess alot of things up hehe.
September 8th, 2007 at 11:31 am
yeah this definitely doesn’t appear to work with the get custom field plugin, it doesn’t display the thumbnail, any suggestions?
September 9th, 2007 at 7:06 am
thanks it s great job.
September 9th, 2007 at 7:14 am
Interesting. I will have to try this out on my new site.
Thanks.
September 12th, 2007 at 4:15 pm
Where is the moderator to chime in here? I can’t get this to work correctly, I am using wordpress 2.1.3, it appears that everytime I add a new entry it just overwrites the thumbnail of the last entry instead of putting it next to it, how do I fix this?
September 14th, 2007 at 8:04 am
Nevermind, I got this to work, I guess either the instructions aren’t perfectly descriptive or I am just still too new to wordpress, in any event I didn’t realize that what was being posted to the main page was not thumbnails rather they were posts themselves. And with the above problem I didn’t have the code in the loop that is why it kept overwriting the previous thumbnails(posts)
September 18th, 2007 at 11:02 am
[…] How to Use WordPress for a Portfolio Site - Part 1 | blogHelper […]
September 26th, 2007 at 4:47 am
[…] Info: blogHelper Using Wordpress as CMS Using Wordpress for a portfolio website […]
October 25th, 2007 at 7:25 pm
Thank you for your your great post. I will try to have a go at it myself as soon as I have read through it a few more times.
I wonder, do you happen to know how to add META tags to a Wordpress site, as a friend of mine told me that it possible. Unfortunately, he couldn’t help me out with it though.
I thought it may help with being ranked.
Many thanks.
Anthony Marquis
January 3rd, 2008 at 8:46 am
thanx for cool tips!
I got a cool page looks like portfolio gallery(random image toppage using ‘Get Custom Field Values plugin’ & ‘my original plugin for displaying Random Custom Field Values ‘ )!
January 27th, 2008 at 10:40 am
Excellent Blog!Very well designed and focused.
February 7th, 2008 at 2:26 am
[…] articles: - http://bloghelper.is-there.net/how-to-use-wordpress-for-a-portfolio-site-part-1/ - […]
February 27th, 2008 at 3:24 pm
[…] is Twist’n’Shout’s portfolio. Also, check out blogHelper’s two-part series (part 1, part 2) on how build a WP-based […]
March 27th, 2008 at 4:59 am
[…] If you are an agency, a designer or an artist you can show off your portfolio of work just as Twist’n’Shout did. Raj offers links from blogHelper that explain exactly how to do it: Part 1, […]
Leave a Reply