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:
- The portfolio page had to still be dynamic using WordPress categories within a WordPress loop.
- 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 <head> tags. In the rare chance you are not, simply add the following lines of code to your functions.php file. If you do not have a functions.php file, simply create a new one and upload it to your theme directory.
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 <?php wp_head(); ?> 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 <?php wp_head(); ?> using the following:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/filterable.js"></script>
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.
<ul id="portfolio-list"> <?php query_posts('cat=17&showposts='); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li class="<?php foreach((get_the_category()) as $category ) { echo $category->cat_name . ' all'; } ?>"><!-- add your portfolio item content --></li> <?php endwhile; ?> <?php endif; ?> </ul>
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 <li> 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.
Chad,
I would love to. What seems to be the problem?
Hello Erik, Great tutorial…I can’t seem to get this working properly, could you provide some support for me…
Great example of javascript. Thanks for sharing
@Design Informer,
The season isn’t over just yet. The Giants made it difficult, but they aren’t out of the playoff mix. Plus, how many rings do the Eagles have again?
This is excellent Erik. Very good. I’m not much of a javascript/jquery guy myself so any tutorial involving these are always very helpful.
Oh, and sorry I had to mention this but my EAGLES beat your GIANTS yesterday.
I’m a big-time Philadelphia Eagles fan.