How to Create a Web Design Portfolio Page in WordPress: Part 1

Portfolio

There are many different ways of displaying a portfolio in a WordPress site. These often involve special portfolio themes, plugins, or tricks with post categories. When I searched Google for tutorials on creating a portfolio in WordPress, I was not satisfied with the results. All I got were lists of WordPress themes that I'd have to buy to make a portfolio page.

So, I decided to figure out my own way to do this, without relying on special themes or plugins. Instead, we will use a feature built right into WordPress: the Links Manager.

The WordPress Links Manager is usually used for displaying a blogroll, but it can also be used for other types of links, such as links to past work. It makes sense, because a web design portfolio would include a bunch of links.

To see what we will be making, here is an example.

In the first part of this series, we will be creating the basic functionality of our portfolio page. In the next part, we will be styling it to make it look nice, and adding a bit of jQuery animation to it.

Add the Links

Login to your WordPress admin panel. Under "Links", go to "Add New". For this tutorial, we will fill out the form fields in the following way:

  • Name: The name of the portfolio item
  • Web Address: The URL for the item
  • Description: A short description of the project
  • Category: Set this to "Portfolio". If you don't have that category, create it.
  • Image Address: The URL of the image for that item
  • Notes: A longer paragraph describing the project.

Repeat those steps for each item you want to add. You should now have all of your links ready to be used for your portfolio.

The Page Template

We can now create a new page template for our portfolio. Inside your theme directory, create a new file called portfolio.php.

The default template for pages should be in the page.php file. So copy the contents of page.php over to portfolio.php.

We are now ready to work with our portfolio page template. First, add the following code to the very top of the template file. This is to tell WordPress that this file is indeed a page template.

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

The Actual Portfolio Code

After setting everything up, we can finally get to what you've all been waiting for: the code for the portfolio.

Pick a place in the template to put your portfolio. I suggest right below the_content().

Once you've picked a location, add in a div, with the class attribute set to "portfolio". Inside of that, insert a new block.

To display our portfolio, we will use the get_bookmarks() function, included in WordPress. We can use the category_name parameter to only get the links from a certain category.

$folio = get_bookmarks('category_name=Portfolio');

Now, the variable $folio should be an array containing each of the links in the Portfolio category. We can then use a foreach loop to go through each link and display it in a certain way.

foreach ($folio as $link) {
    // What will be displayed for each portfolio item
}

In between the curly brackets, we can use the following variables to display different information about each link.

  • $link->link_name: The name of the link
  • $link->link_url: The link's URL
  • $link->link_description: The short description of the item
  • $link->link_notes: The full description of the link
  • $link->link_image: The URL for the item's image

You now have everything you need to put together a good portfolio. But I'm not just going to stop there. Here is the way we will display our variables for an example in this tutorial.

echo '<div class="portfolio-item clearing">'

Each portfolio item will have a class of portfolio-item and clearing (Just a class with the CSS clear: both; applied).

echo '<h3>' . $link->link_name . '</h3>';

At the top of each portfolio item, we will display the name of the item, in h3 tags.

echo '<div class="portfolio-image-container">';
echo '<img src="' . $link->link_image . '" alt="' . $link->link_name .'" class="portfolio-image" width="150" height="150" />';
echo '</div>';

Our image will be a 150px square with a class of portfolio-image, inside of a div with a class of portfolio-image-container (You'll see why we have this container later).

echo '<p>' . $link->link_notes . '</p>';
echo '<p><a href="' . $link->link_url . '" target="_blank" class="visit-link">View</a></p>';

This displays the full description of the portfolio item, in the form of a paragraph, with the link to the item below it.

echo '</div>';

Finally, we can close off the portfolio-item div. The portfolio section of our page template should now look something like this:

<div class="portfolio">
    <?php
        $folio = get_bookmarks('category_name=Portfolio');
 
        foreach ($folio as $link) {
            echo '<div class="portfolio-item clearing">';
 
            echo '<h3>' . $link->link_name . '</h3>';
            echo '<div class="portfolio-image-container alignleft">';
            echo '<img src="' . $link->link_image . '" alt="' . $link->link_name .'" class="portfolio-image" width="150" height="150" />';
            echo '<div class="portfolio-desc"><p>' . $link->link_description . '</p></div>';
            echo '</div>';
            echo '<p>' . $link->link_notes . '</p>';
            echo '<p><a href="' . $link->link_url . '" target="_blank" class="visit-link">View</a></p>';
 
            echo '</div>';
        }
    ?>
</div>

Create the Portfolio Page

We are creating a portfolio page, so we need to apply the template we created to a new page.

Create a new page from the WordPress admin, and set the template to "Portfolio" under Attributes. Set the title to Portfolio (or similar), and enter a brief introduction text for your portfolio. Save the page, and view it in your browser. You should now see the links for your portfolio. If you don't go back and make sure that you've followed all the steps correctly.

Conclusion

That's it for today. Can't wait for the next part of the tutorial? Subscribe to the RSS feed, or get updates via email, to be notified when the next part is published.

In the next post of this series, we will be styling our portfolio page to make it look nice, and we will also be using some jQuery to enhance our portfolio with a bit of animation.

Update: Check out the second part of this series!

Do you have any questions, or problems? Have you used a similar technique to do this? Can you think of any other ways a technique like this can be used?

Be sure to leave a comment, and share your thoughts.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

4 Comments

  1. billy
    October 9, 2011

    what do you use to highlight the code syntax in your blog?

  2. October 10, 2011

    Hello,

    Firstly, thanks for your article.

    I have problem with that. I tried to get categories and tags of current post (custom post type) by some functions bellow:

    - the_category()
    - get_the_taxonomies($post->ID);
    - get_the_category( $id );
    - ...

    but nothing appeard on page...

    Please tell me where I were wrong ?

    Thanks !

Trackbacks/Pingbacks