Create a Filterable Portfolio Page in WordPress with jQuery | pixel8

In the early planning stages of developing our portfolio website I wanted to have a single page display all of our work. As you can see from this old mock up, the page would have a filtering option (via a sub navigation) that would give the user the ability to drill down to specific categories of work. This would cut down on the amount of pages the site would eventually have, but also add an enhanced user experience.

I knew the key to making this work would be jQuery. But there were a couple of important elements I needed to maintain control over:

1. The portfolio page had to still be dynamic using WordPress categories within a WordPress loop.
2. The filtering animation needed to be smooth and the script needed to be light weight. I did not want the load time for this page to be noticeably slower.

The initial hurdle I needed to overcome was the fact that I am not a javascript master.

The initial hurdle I needed to overcome was the fact that I am not a javascript master. There are simple animation effects I can implement, using the jQuery library, but this was going to be a bit out of my grasp. I did find an interesting tutorial at Nettuts with a detailed walk through of how to achieve the effect I was looking for. I’m sure that if I had a better understanding of writing javascript code, this would have been a breeze. But, alas, I do not and I was left scratching my head.

In the end, being under a strictly imposed launch deadline, I had to abandon my initial idea and break down the portfolio into four individual pages (all, web, print and identity). I was down, but not out. I continued to read tutorials and posts from individuals wrestling with the same concept.

Then I struck gold last week when I landed on the stellar portfolio website created by Jay Hollywood. His portfolio page had exactly the user experience I wanted to have and he was kind enough to share how he accomplished this, as well as other jQuery magic, in his blog post, Using jQuery to enhance my website.

Jay introduced me to a filterable jQuery plugin created by New Media Campaigns that had all of the necessary features I required as well as multiple customizable options. And, since links in the sub-navigation use hash marks, you can link directly to a filter! All I needed to do was to configure this script to work with WordPress. This process was relatively simple to achieve and I will share all of the steps I performed to accomplish our newly filterable portfolio page.

Step 1: Download the plug-in & Get your theme ready for the script

Before you begin, make sure you are properly calling for the jQuery library between your

if( !is_admin()){  wp_deregister_script('jquery');   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');   wp_enqueue_script('jquery');  }

This is the correct way to call the jQuery library into a WordPress website. It is not only stable, but prevents plugins that use jQuery from calling another instance of the library. Using this method, you can now call all of your custom scripts and plugins after the line of code.

Now, you will need to download the plugin from New Media Campaigns. Take a moment to read through the documentation to determine how you want to customize the script.

Once you have downloaded and extracted the zip file, you will want to upload the filterable.js file to your javascript directory. Make a call for the plugin in your header.php file after using the following:

Lastly, if you haven’t done so already, create a category in WordPress called “work” (or whatever you want to name it). Create sub categories of this category called “web”, “print” and “logos”.

Step 2: Mark up your sub navigation

As with any website navigation, you will mark up your sub navigation with an unordered list. Create a custom page template named “work.php” and add the following code. Note that, with the exception of “all”, the remaining options correspond with your sub categories.

ul id="portfolio-filter">  	li>a href="#all" title="All">All/a>/li>  	li>a href="#web" title="Web">Web/a>/li>  	li>a href="#print" title="Print">Print/a>/li>  	li>a href="#logos" title="Logos">Logos/a>/li>  /ul>

You can replace these options with your own. The only thing you want to make sure of is that the hash marks links are identical to your sub categories. This is case sensitive. If your sub categories are capitalized, your hash marks links must be capitalized. At this point, you can style your sub navigation according to your mock up in your CSS file.

Step 3: Use the WordPress loop to generate your list of portfolio items

Your portfolio items need to be marked up inside of an unordered list. Each of your list items will need to have a class name of “all” and the corresponding category. And, as I mentioned before, I want this to be completely dynamic. This can all be achieved by using a simple WordPress loop and a call for each individual sub category.

  
 query_posts('cat=17&showposts='); ?>   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  	
   endwhile; ?>   endif; ?>  

As you can see, we open a basic loop querying the category with an id of “17″ (This would be the “work” category id but you should replace this with your category id) and showing an unlimited amount of posts (you can limit this by placing a number after the equal sign). This loop will return all items categorized as “work”, including any sub categories of “work”. In order to return the category name as a class, we use a “php foreach” statement that will echo (output) that name as well as “all”. All that is left for you to do is add your portfolio content (images, text, links, etc.) in between the opening and closing

tag.

Conclusion

With this easily customizable solution, you should be able to add some excellent interactivity to your portfolio page in WordPress. I have to thank Jay Hollywood for sharing his website assets and for the team at New Media Campaigns for releasing their solution for a javascript rookie like myself. In their spirit of “paying forward”, I hope you found this post helpful when you are creating your WordPress driven portfolio site.