Using the Wordpress Link Manager to Display Your Portfolio

Published August 11, 2008 • 27 Comments • 70 Delicious Bookmarks

For web designers or other businesses alike, setting up a quality portfolio is essential. This tutorial will show you how you can use Wordpress’s Link Manager to create and display your portfolio. This will allow you to use Wordpress to it’s fullest extent, without the need of extra plugins or any hacked code.

Step 1. Supplying the Data

Lets start off by populating our Links manager with some data. In the screenshot below you can see the fields that I am using:

  • Name – Client Name
  • Web Address – To link back to. This can either be an internal posting explaining the project in detail or the actual client website (which is what I use).
  • Description – For title and alt attributes.
  • Categories – Skills that were used in creating the project.
  • Advanced: Image Address – Link to the screenshot of your project
  • Advanced: Notes – Description of the project

Optional fields include “Target” where you can force your links to open into a new browser window and “Keep this link private.” This is how you can set up a portfolio entry but not have it shown in the display on the site. This could be helpful for when you have a project finished, but you can’t show it until it’s live.

When you are finished adding all your portfolio entries, you can go to Your WP Dashboard > Manage > Links to see the full list.

Step 2. Display Your Portfolio

Wordpress has two different ways to display it’s “bookmarks” which we are now using as portfolio entries. They are wp_list_bookmarks and get_bookmarks

We will use the get_bookmarks template tag because it allows us to manipulate how our “bookmarks” look. The only caveat is that this template tag returns an array – which we will need to use some PHP code to parse though it. To see the data that get_bookmarks outputs, I quickly added this little snippet to my code:

<?php
$arr_portfolio = get_bookmarks();
print_r ($arr_portfolio);
?>

The output from the print_r on get_bookmarks shows how the array is structured.

From that file, we can decipher enough to get the rest of the data echo’d out into an unordered list. The only thing that took a little tweaking was the fact that you have to find your own categories by running SQL on the wp_term_relationships and wp_terms tables in order to derive the category names by their id and the link’s id.

<?php
$arr_portfolio = get_bookmarks();
//print_r ($arr_portfolio);
echo "<ul>";
foreach ($arr_portfolio as $site) {

   echo "<li>";
   echo "<h3>". $site->link_name ."</h3>";
   echo "<a href=\"". $site->link_url ."\" title=\"". $site->link_description ."\">";
   echo "<img src=\"". $site->link_image ."\" /></a>";
   echo "<p>". $site->link_notes ."</p>";

   $cats = $wpdb->get_results("SELECT * FROM wp_term_relationships, wp_terms WHERE wp_term_relationships.object_id = $site->link_id AND wp_terms.term_id = wp_term_relationships.term_taxonomy_id");
   echo "<p>Skills Used: ";
   foreach ($cats as $cat) {
   	echo $cat->name .", ";
   }

   echo "</p></li>";
}
echo "</ul>";
?>

The great thing is that this code doesn’t need to be placed within the_Loop. It will work great within it’s own template or on the sidebar.

View the demo portfolio using this code.

This entry was posted under Tutorials, Wordpress and has an RSS feed
27 Comments | Save to Del.ico.us (70 Saves) |  

27 Comments

  1. September 2nd, 2008 @ 3:03 am

    Trav said:

    This is a great tutorial, it’s exactly what I need to do to display my portfolio. What I’m wondering though is where abouts in my Wordpress templates do I paste the PHP snippet? Any help would be much appreciated. Thanks in advance.

  2. September 2nd, 2008 @ 7:50 am

    Chris Cagle said:

    @Trav – You can put it anywhere. In the demo you can see the “View Source” and I just placed it in it’s own, brand new template in place of the <?php the_content(); ?> tag. You could also put it in your sidebar.php if you have small enough thumbnails of the portfolio sites.

  3. September 2nd, 2008 @ 8:06 am

    10 Amazing Things You Can Do With WordPress Other Than Blogging :: WP Freedom Blog said:

    [...] Using the Wordpress Link Manager to Display Your Portfolio: Are you a web designer? Use the built-in link manager feature to showcase your portfolio. [...]

  4. September 3rd, 2008 @ 1:17 am

    Joop said:

    Great tutorial! Thanks man :-)

  5. September 3rd, 2008 @ 1:35 am

    Joop said:

    to display correctly, I had to do two things:

    remove the “//print_r ($arr_portfolio);” part from your string
    adjust the name of the tables. (I have a different prefix then wp_)

    Check out the result on http://www.vueto.com/portfolio

  6. September 3rd, 2008 @ 7:50 am

    Chris Cagle said:

    @Joop – Thanks!

    The //print_r command is commented out, so i don’t know how that could have been a problem.

    Good catch on the wp_ for the table prefix. I just used the default, but I see how that will get many people… thanks for the help!!

  7. September 3rd, 2008 @ 2:07 pm

    Mike said:

    Thank you for the very interesting and helpful tutorial. Definitely tagging this one. As a relative WP noob, this seems like a very logical and simple way to structure my portfolio page. I’ve looked at several ways to do this, and was set on the the query_posts function, but I like this way better.

    One question I had revolves around the display of the items on the page. In Joop’s link above, you can see his portfolio items are in the right sidebar. As I test locally, the same thing happens to me; the items appear, but as descendants of the sidebar. This happens despite the fact that I inserted the code in my “leftcontent” div, which is floated to the left. It doesn’t appear to be containing the output. Any ideas?

  8. September 3rd, 2008 @ 2:40 pm

    Chris Cagle said:

    @Mike – Well, I am not sure. I include no CSS in this tutorial, and that is the only reason why it wouldn’t show up in the place you are putting the code. As you can see, my demo is working fine – with no custom CSS made specifically for it.

    If you do a “View Source” on the page, is the code being output within the leftcontent div?

  9. September 3rd, 2008 @ 2:57 pm

    Mike said:

    Thanks for the quick response. So it turns out I’m just a goof and had the wrong template assigned to the Portfolio page. I had saved a previous portfolio template, which was not structured correctly. After switching that, the page looks perfect. That’s all it was (as I should have guessed).

    Hope you continue to do some write-ups on WP. Stumbled, dugg, and delicified this one for you.

  10. September 3rd, 2008 @ 3:31 pm

    Chris Cagle said:

    Awesome! I wish all my visitors did that!!

  11. September 4th, 2008 @ 2:23 am

    Leonaut.com said:

    Using the Wordpress Link Manager to Display Your Portfolio…

    For web designers or other businesses alike, setting up a quality portfolio is essential. This tutorial will show you how you can use Wordpress’s Link Manager to create and display your portfolio. This will allow you to use Wordpress to it’s fullest …

  12. December 10th, 2008 @ 1:26 am

    WPTUT - Wordpress Tutorials said:

    [...] Using the Wordpress Link Manager to Display Your Portfolio Submitted by: Guest| Date: 11 22nd, 2008 | Category: Functions Views: 1 | Votes: 0 | [...]

  13. December 15th, 2008 @ 9:34 pm

    mike said:

    Hi Im running my website on my on local server for testing. And for some reason I was just tweaking with the design and when I changed the php line it keeps shooting out random skills used.

    Ok so for example lets say I had these categories added : CMS, Wordpress Theme, CSS, XHTML, MySQL, Javascript, FLASH, Java and Graphic Design. And I added a website called The Linker and for The Linker I put the categories: Java, CSS, XHTML. So, that works fine but when you view it, it will not say those categories instead it will say: CMS, Javascript, FLASH, Graphic Design or something like that.

    Let me know what you think. Here is the altered code along with the css that applies to it. The php code (altered) is all within the div class=”entry” 

    <?php $arr_portfolio = get_bookmarks(); echo ""; foreach ($arr_portfolio as $site) { echo ""; echo "link_url ."\" title=\"". $site->link_description ."\">"; echo "link_image ."\" />TAKE ME THERE!"; echo "". $site->link_name .""; echo "". $site->link_notes .""; $cats = $wpdb->get_results("SELECT * FROM wp_term_relationships, wp_terms WHERE wp_term_relationships.object_id = $site->link_id AND wp_terms.term_id = wp_term_relationships.term_taxonomy_id"); echo "Skills Used: "; foreach ($cats as $cat) { echo $cat->name .", "; } echo ""; } echo ""; ?> 
    
.entry3 li {list-style:none;padding:0 0 100px 0;margin:0;clear:both;}
.entry3 ul {padding:0px;}
.entry3 img {width:260px;height:160px; padding: 0 0 10px 0;border:0;}
.entry3 a {text-decoration:none; display:block;}
.descrip {color:#ffbe6a; font-style:italic;}
.skills {font-size:11px;margin:-5px 0 0 0;padding:12px;}
.webimg {float:left; text-align:center;margin: 0 20px 0 0;}


Thank You!

  14. February 10th, 2009 @ 4:42 pm

    Damien said:

    Great tutorial!
    Was wondering tho how would I use this method of creating a portfolio to also display the most recent items in the portfolio on the main page as thumbnails?
    Thanx again for the tutorial.

  15. February 15th, 2009 @ 3:43 pm

    Hotels said:

    Hey guys!

    I hope you can help to me. I’ve a WordPress blog and I would like organize my travel links through a quality link directory. At this moment the “WordPress Link Directory by Alec Tang” is the only plug-in what I found with the official plug-in searcher of WordPress.org site, but it’s not a W3C compatible solution :( However after the installation of this plug-in I got 7 bugs according to the W3C validator. Could you offer to me a professional link directory solution which is W3C compatible? Your quick response would be greatly appreciated.

  16. February 18th, 2009 @ 11:16 pm

    Creating a Design Portfolio in WordPress | SayShea: Indiana Kentucky Web Designer said:

    [...] Using the Wordpress Link Manager to Display your Portfolio Tags: Portfolio, wordpress You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  17. April 11th, 2009 @ 8:44 pm

    Roberto Ciccolella said:

    Hi,
    Thanks for this tutorial. I have installed the script on my web site. I use Wordpress 2.7 so the last version. Everything seems ok but unfortunately I have a very annoying problem. Is about the link category listing. I am getting all the time the category “Uncategorized” as first in the list of the “SKILL USED”.
    I tried to delete this category but nothing. I tried to setup a different default category but no way it still there:FIRST IN THE LIST! Furthermore I am not getting right the category selected, I mean that some category is displayed and some not. Her is the link: http://ciaoweb.co.uk/portfolio

    Any help?

    Thanks

  18. April 12th, 2009 @ 7:53 am

    Chris Cagle said:

    @Roberto – I sort of remember running into a problem with something like this… but I can’t recall what it was b/c it was so long ago. Did you happen to try Mike’s solution in the comments above?

  19. April 12th, 2009 @ 8:51 pm

    Heather said:

    How can i get the most recent additions to show up top… And I am having the same problem as Roberto my news category always showing up first even though its not my default category for links or even in my list of link categories

  20. April 12th, 2009 @ 10:07 pm

    Heather said:

    also is there a way to add pagination

  21. April 14th, 2009 @ 9:02 am

    Roberto Ciccolella said:

    Hi Chris,

    I tried Mike’s solution but I get an error page.
    I just copied the code from his post and pasted in may template page replacing yours.
    At the moment I have just deleted the portion of code about categories.

    Thanks anyway for your reply.

    Regards
    Roberto

  22. May 19th, 2009 @ 7:28 pm

    rmlumley said:

    Greetings,

    Thanks for this tutorial, but I’m having the same problem with Uncategorized showing up.

    http://rmlumley.com/portfolio/

  23. May 19th, 2009 @ 11:53 pm

    few small changes to the site « rmlumley.com said:

    [...] that everyone is familiar with. I added a Portfolio link which I created using the method found on Cagintranet Web Design. It is a pretty clever method to create a portfolio using [...]

  24. August 31st, 2009 @ 5:03 pm

    15 Unconventional Uses of WordPress in Action said:

    [...] 8. Create a Portfolio using WordPress [...]

  25. September 16th, 2009 @ 3:06 am

    WordPress – More Than Just a Blogging Platform said:

    [...] How about setting up WordPress to showcase your talents? You can create a portfolio if you are a photographer, web designer or artist. You can either utilize a specially made theme, or you can use the link manager contained within WordPress itself to create and display your portfolio. Simply enter all the data, such as name, link to website, special attributes, categories, description, screenshots etc., and once this is complete you can then use WordPress tags and codes to display it. You can see a step-by-step guide here. [...]

  26. September 17th, 2009 @ 2:47 pm

    Lukas said:

    Hey,
    I cant display the right cats !!
    what is wrong?

    6,
    ‘categorize’ => 1,
    ‘category_orderby’ => ‘name’,
    ‘category_order’ => ‘ASC’,
    ));
    //print_r ($arr_portfolio);
    foreach ($arr_portfolio as $site) {
    echo “”;
    echo “link_image .”\” rel=\”lightbox\”>link_image .”\” />“;
    echo “link_url .”\” title=\”". $site->link_description .”\”>” . $site->link_name .”“;
    echo “link_image .”\” rel=\”lightbox\”>“;
    /*echo “”. $site->link_notes .”";*/

    $cats = $wpdb->get_results(“SELECT * FROM wp_term_relationships, wp_terms WHERE wp_term_relationships.object_id = $site->link_id AND wp_terms.term_id = wp_term_relationships.term_taxonomy_id”);
    echo “Skills Used: “;
    foreach ($cats as $cat) {
    echo $cat->name .”, “;
    }

    echo “”;
    echo “”;
    }
    ?>

    link to the homepage: http://new.lflory.de/portfolio/

  27. October 6th, 2009 @ 11:05 am

    Alexander Osipov said:

    Nice tutotrial for my own portfolio, thank you very much!!)

Leave your Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get your own Gravatar