Ash Blue Web Design

Create a WordPress Portfolio Tutorial

WordPress tutorials tend to be spread out and hard to find, especially information on using it to build a portfolio. After drinking large quantities of coffee to run through countless hours of Google results, I found nothing… You might ask “Come on, you didn’t find anything?” Well I did find a few simple WordPress tutorials that started me on the long journey of developing a portfolio, but nothing that took me through step by step. It seems that you must master WordPress syntax tags or buy a theme template to develop a basic portfolio these days, but alas! I will show you how to build a really cool portfolio thats 100% WordPress CMS powered. Check out the demo below for what we’re creating (this demo has only been tested with version 2.8 and 2.9).

List of steps

Here is how we’ll be developing our portfolio for this tutorial.

1. Create the portfolio’s items
2. Create a custom function
3. Create a portfolio template
4. Create a Portfolio page and link it to the template

1. Creating the portfolio’s items

We could create a custom database with MySQL for our new portfolio, but why waste time doing that when we can use tools already built into WordPress? In the WordPress CMS go to Posts->Add New and start by giving your first portfolio item a title. Give your item a description, then select the Portfolio category from the Categories tab. If you don’t have a Portfolio category, then click “+ Add New Category” in the Categories tab to create a Portfolio category.

To finish our post we need to add data under the Custom Fields tab. Select Link under the name dropdown, if you don’t have that option you’ll need to create a new custom field called Link. We can do so by clicking “Enter new” and inserting the name Link (its that simple). For our custom Link field create a description like this http://www.yourwebsitehere.com Make sure that discussion and trackbacks are shut off under the Discussion tab too.

Lastly we need to attach our image to the WordPress post. Before we upload our image I suggest making it the exact proportions you want, you could have WordPress resize it for you, but that tends to decrease the quality more than a premium product like Adobe Photoshop would. You can attach the image to our post by finding “Upload/Insert” under your post’s title. Click the first icon and upload your image as normal. For this to work YOU MUST click Save all changes instead of “Insert into post.” We want the image data attached to the post, not actually inside of its description. This way we can pull images from the post out of WordPress’s MySQL database.

Repeat step 2 without creating another Portfolio category or Link field and you should have several items in your new portfolio. As a warning these posts will show up in your normal WordPress post loops, but don’t worry. I’ll show you how to remove these items from the normal WordPress loop later.

2. Create a custom function

To pull in our portfolio page we’re going to keep things as clean as possible. To do so we’re going to create a custom function. Go to your current themes directory and open up the functions.php file. If you don’t have one create it with a <?php at the beginning and ?> at the end (save the file to your current theme’s root directory). Insert the code below into the functions.php file and save it.

function portfolio_items() {

    if ($images = get_children(array(
        'post_type' => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => get_the_ID(),
        'post_mime_type' => 'image',
    ))) {

        foreach ($images as $image) {
            $pimage = wp_get_attachment_url($image->ID);
            $ptitle = get_the_title();
            $plink = get_post_custom_values("Link");

            echo '<li>';
                echo '<img src="' . $pimage . '" alt="' . $ptitle . '" />';
                echo '<h3>' . $ptitle . '</h3>';
                the_content('Read the rest of this entry &raquo;');
                echo '<p class="link"><a href="' . $plink[0] . '">Visit ' . $ptitle . '&#39;s website</a></p>';
                echo '<div class="clear"></div>';
            echo '</li>';
        }
    }
}

Wow! Thats a lot of code and it probably looks intense to most WordPress users. But whats going on isn’t too incredibly complex. We’re creating a loop with the first if statement to look through our current post and grab its image. Then for each image we find, we’re going to echo back the image formatted with echo statements into a list. Thats all, also this new function we just created can be used anywhere in your WordPress website since its a function (not just our portfolio site).

You may want to include the empty div with a class of clear if you want your portfolio to look like the demo page. Feed it the CSS value below with your style sheet to make your life easier.

.clear { clear: both };

3. Creating a portfolio page template

Next you’ll need to create a new PHP file called page-portfolio.php in your current theme’s root folder. Start out by inserting this code into the document.

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>

<div id="content">
    <!-- This code will pull any data we have on the Portfolio page into this file -->
    <?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>

    <ul>
        <!-- Our loop we will insert next goes here -->
    </ul>
 </div>

<?php get_footer(); ?>

We’re creating a new template called Portfolio and inserting our data between WordPress’s header and footer. The the_content tag will grab any extra data we want to display to people directly from the page we created in the WordPress CMS. For instance you could display data similar to the demo page like “This tutorial demonstrates a simple and easy way to create a WordPress portfolio” to give people a brief introduction. Now we’re going to add a few different loops and snippets of code under the the_content tag to get the portfolio functioning.

<?php $my_query = new WP_Query('category_name=Portfolio&posts_per_page=5'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<?php endwhile;?>

This is the basic WordPress loop we will be using to grab all of our portfolio data. We’re using category_name to specifically grab posts from the Portfolio category only. You can also modify this code to specify the exact number of posts you want to grab. For this tutorials I’m specifying posts_per_page to only grab the five most recent portfolio items.

<?php $my_query = new  WP_Query('category_name=Portfolio&posts_per_page=5'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();  ?>

<!-- Build gallery with post data -->
<?php portfolio_items(); ?>

<?php endwhile;?>

We’ve now put our new function into our WordPress loop to create a clean and sturdy portfolio. Below you’ll find what your completed code should look like. Don’t forget to save it to your current theme’s root folder.

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>

<div id="content">
    <!-- This code will pull any data we have on the Portfolio page into this file -->
    <?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>

    <ul>
        <?php $my_query = new  WP_Query('category_name=Portfolio&posts_per_page=5'); ?>
        <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

        <!-- Build gallery with post data -->
        <?php portfolio_items(); ?>

        <?php endwhile; ?>
    </ul>
</div>

<?php get_footer(); ?>

4. Plugging in the new portfolio page

Lets start out by creating a new WordPress Page by going to Pages->Add New, giving it a title of Portfolio, and saving it. Go to the Attribute tab in the right hand column and click the drop down under Template. Choose the new template we just created called Portfolio. Also make sure to deselect all the check boxes under the discussion tab. After saving your page should look similar to the picture below.

Thats it, we’re done. You might need to go back and tweak the custom function we created, but that should be all. Feel free to ask any questions or post your tutorial results here.

Remove portfolio posts from the WordPress loop

I mentioned earlier that this will dump Portfolio posts into your normal WordPress loops, you can remove it by adding this bit of code. Replace the 3 with your Portfolio’s category number. To find the category number go into your WordPress CMS and go to Posts->Categories->Portfolio and look in your URL at the top of the screen. It should have the category number at or near the end of the URL.

<!-- Replace the 3 with your category number-->
<?php query_posts($query_string . '&cat=-3'); ?>

Example websites with a similar technique

Here are a few websites that use a similar technique to your new portfolio. With some jQuery and creativity you can make your portfolio dazzle the masses.

Resources for building more complex portfolios

• WordPress loop documentation
• Digging Into WordPress on image attachments
• Smashing Magazine’s guide to creating a WordPress portfolio

Currently rewriting this tutorial

As a quick heads up, this post really doesn’t cut it for WordPress 3.0 I’ve developed a few sites now with an extremely improved method from what was used here. Subscribe below to be notified when its available (very soon).