The Blog

How To Create A Dynamic Portfolio in WordPress Using Categories

Posted on 01/18/10 in blog, development about development, php, tutorial, wordpress

There are plenty of portfolio themes for sale out there, but many just don’t have “it” as far as the certain design element you’re looking for in your portfolio. Sometimes it’s just better to design one yourself. But what if you want to put it in WordPress and make your portfolio a little easier to update?

Right now, I’m working on redoing this whole site to make it a bit cleaner and prettier. The site has exploded in terms of both traffic and content so things are getting a little claustrophic over here. I’m also planning on moving the whole site over to WordPress, because as it is, the portfolio is a major PIA to update right now – I have to manually update the recent section on the homepage AND the portfolio AND the blog sections every time I add a new piece…that’s over 10 images I have to make!

For that reason alone, I thought I’d share with you a great way to make a dynamic portfolio page – that will update your blog, portfolio and homepage recent projects section. You can see how I did this at www.emaginewebmarketing.com where I was tasked with combining 3 different pre-made themes and had to do most of the portfolio section by hand.

Let’s see what we’re looking at on the homepage:

And this is what the “Portfolio” page will look like:

You can also decided to include the portfolio in your blog as well if you have one.

Note: This example makes use of timthumb. Make sure that’s installed and working, otherwise you’re images won’t resize right.

Step 1 : The Category

Create a category called “Portfolio” in your admin section. This is how we’ll pull your pieces into both pages.

Now, in WordPress you can have multiple templates for everything, you’re not just stuck with the same “category” template for everyone.

Open up a new PHP document and name it “category-portfolio.php” and save it to your theme directory. This will allow you to strip out the side bar and customize the portfolio content without affecting any other category. WordPress will automatically pull the page for you.

Step 2: The Portfolio Code

Now to make the page pull only the first image from the post, and not the title or description, copy and paste this code into your category-portfolio.php page:

<?php get_header(); ?>

<?php query_posts(“showposts=$ebusiness_catnum_posts&paged=$paged&cat=$cat”); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<?php $thumb = get_thumbnail(); ?>

<div class=”thumb-gallery<?php if ($i%4 == 0) echo(” last”); ?>”>

<a href=”<?php the_permalink() ?>” title=”<?php printf(__ (‘Permanent Link to %s’, ‘Lumin’), get_the_title()) ?>”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/timthumb.php?src=<?php echo $thumb; ?>&amp;h=123&amp;w=123&amp;zc=1″ alt=”<?php echo the_title(); ?>” width=”123″ height=”123″ class=”preview-thumb” /></a>

</div> <!– end .thumb-gallery –>

<?php endwhile; ?>

<?php get_footer(); ?>

</body>

</html>

Step 3: The Functions

Copy and paste this code into your functions.php file. This defines “get_thumbnail” and also tells it to pull the first image from the post:

function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}

function get_thumbnail()
{
global $post, $shortname, $posts;
$thumb = get_post_meta($post->ID, ‘Thumbnail’, $single = true);
if (($thumb == ”) && ((get_option($shortname.’_grab_image’)) == ‘on’)) $thumb = catch_that_image();
return $thumb;
}

Check your portfolio category site. You can either link to it in your navigation or visit it via your blog. It should now display thumbnails of all your posts from the category portfolio. Of course you’ll need to edit the HTML and CSS!

Step 4: Displaying it on your homepage

Let’s say we want the 5 newest portfolio pieces to show on the homepage. In order to do this we need to call the loop and tell it which category to pull from. Copy and paste this code into your homepage, or wherever you want the latest portfolio pieces to show.

<?php query_posts(‘category_name=portfolio&showposts=5′); ?>
<?php while (have_posts()) : the_post(); ?>

<?php $thumb = get_thumbnail(); ?>

<a href=”<?php the_permalink() ?>” title=”<?php printf(__ (‘Permanent Link to %s’), get_the_title()) ?>”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/timthumb.php?src=<?php echo $thumb; ?>&amp;h=123&amp;w=123&amp;zc=1″ alt=”<?php echo the_title(); ?>” width=”123″ height=”123″ class=”preview-thumb” /></a>

<?php endwhile;?>

This should now show your newest portfolio pieces!

What did you think of this tutorial?

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet