by Erik Ford with 35 comments.
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 limit the amount of items 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.
Tutorial Update: Add Post Thumbnails & Place Projects in Multiple Categories
We’ve recently had a client who wanted to replicate this particular function for their own portfolio website with a slight twist. Some of their projects would be listed under multiple categories and they requested the use of the <?php the_post_thumbnail(); ?> for the thumbnails. This is all very simple to achieve without having to alter the jQuery plug in.
You want to first make sure you have added the thumbnail functionality to your functions.php file for this to work. If you do not have a functions.php file, simply create one, add the following line of code and upload it to your theme’s directory.
<?php add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 220, 135, true ); ?>
You will want to change the width and height dimensions to fit your own design, but this is all you will need to be able to use the WordPress thumbnail function. You will now see an option to set a “Featured Image” thumbnail on your Post editing page. Select the image and WordPress will crop to your specified dimensions.
To call this thumbnail within the loop and to allow for multiple categories, use the following lines of code.
<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"> <?php if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a> <?php } else { ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/post-thumb.jpg" width="220" height="135" alt="<?php the_title_attribute(); ?>" /></a> <?php } ?> </li> <?php endwhile; endif ?> <?php wp_reset_query(); ?> </ul>
I know it seems like we’ve added a lot of code, but once you understand what is happening, it is quite ingenious. The first item to take note of is that the class name of “all” now appears outside of the <?php foreach(); ?> statement. This allows you to list the multiple categories your project will reside in, with the the necessary spacing between each category, and end with “all”. In the first version of my code, if you added more than one category, you ended up with something that looked like this <li> class="Web allPrint all"</li> and the plug in would fail.
Secondly, we’ve added a conditional statement to see if the theme supports post thumbnails. If one exists, display the post thumbnail and, if not, display a generic image of my choosing that I’ve uploaded to the theme’s image directory. Simple as pie
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.
@red flood,
Do keep me posted. If I understand you correctly, you would like to apply a filtering aspect to your forum? If so, this probably won’t be the solution to that but I am not completely clear on what the end result is supposed to be.
OK Erik that is u right
The problem is I have a gallery like with minor differences in the
Theme name webfolio but this Theme does not support forum plugin
(Simple:Press) http://simple-press.com/
its dosn’t work
your one have extra effect with jquery it sound so nice
i will take your steps one by one in this file and tell you What problems i faced
hope u r patient with me
http://www.multiupload.com/PC6FQPJM9N
i know its poring and my question seem to be stupied…
but i going to accomplishe a huge website with
myself and i am webdesigner so Some things and concepts were absent
@red flood,
I am glad you are enjoying the tutorial. Unfortunately, we don’t plan on creating video tutorials at the moment. Is there something specific I can help you with?
@AdrianB,
I am a little confused with what you are attempting to do. Why would you want to make one of the filters a custom field? Can you explain a bit more?
what a nice tut
i have one request
If you do not mind can u make this tutorial video
because i am new in wordpress and i am designer not php coder so some points drop
i know its a stupid request ..but can u grant my wish
hello,
cool stuff, but I have one problem.I am trying to replace
Webwith a category using custom fields.I managed to make it work, but for every post in the ” Web ” category I get another Web displayed on the page.For example I get “All” (for all items in the portfolio) and 4 “Web” for 4 items in the “Web” category.
Here is the code I am using:
All
have_posts()) : $featured_query->the_post();
$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<a href="#" title="">
@Amy,
I think what you are looking to do would require something more extensive than this particular plug in can handle. If I understand you correctly, you would like to give your users the ability to select multiple options and create the filter from the options selected? Sorry, but I can’t help you with this one.
Just wondering if this would work if I wanted to combine categories. For example, if I wanted to show Logos AND Web instead of Logos OR Web. I’d like to use something like this for a product catalog, and would like to filter products by more than one category. Mens Shirts AND Blue Shirts, for example, so the customer would see all blue mens shirts. Or…would that be just way too complicated? :/
@jason,
Yes. If your category name is more than one word, with spaces, echoing the category name will not work. You should use the category slug instead. It’s very important that your hash tag match your slugs exactly.
For the menu option highlighting, the script will add the “active” class to the
atag, so you want a corresponding CSS style associated with this tag’s class name in your stylesheet:#portfolio-filter li .current { whatever style you want to apply to current }Erik,
on your example page, when the page is loaded, the all button is highlighted (class=”current”). I can’t seem to make that work. When my page is loaded, the “all” button does not have the current state.
Sorry – meant to post:
change to this line:
<li class="slug . ' '; } ?>all">great idea to add this functionality, but now it’s not working because it’s using the category name instead of the category slug. For a cat name with a space in it, this will not work because the of the class. So the change to the code needs to be changed to work with the slug instead.
@Jason,
I’m uncertain what you are trying to achieve here. Are you looking to have the active filter menu item change or keep the “All” menu item permanently highlighted?
and here’s a stupid thing I can’t get to work – the focus setting (active state) for the “all” menu item on page load.
see: http://thinquetanque.com/portfolio
@Jason,
Continue reading the post as I have added an update to the code to accomplish what you are trying to do.
Hi,
I have this working, however it does not work properly if a portfolio item is in more than one category. I would like to make this work, as most of my portfolio items fit into multiple categories.
Thanks
@sanro,
Create the template file,
work.php, and upload it in the same directory as the theme you are running. Before you upload the file, place the query loop anywhere you would like it to appear on the page. Let me know if that helps. Also, make sure you add the following line of code at the top of the page so WordPress can register the custom template:<?php /*Template Name: Work*/ ?>@Jason,
No, you let the loop do all of the work for you. I’ve added an update to the tutorial to show you how to use the Post thumbnail function within the loop. You can add anything you want displayed (title, excerpt, etc.) as long as it exists within the loop and between the opening and closing
<li>tag.I was researching how to do this, and came across your tutorial. Great job.
Question – could you elaborate or be more specific when you state – “add your portfolio content (images, text, links, etc.) in between the opening and closing tag.”
Do I create a full list of thumbs, links, & titles (because I thought the loop was pulling some of this dynamically) and would it be possible to make this 3.0 compatible – so it pulls the post thumb & excerpt?
thnks but ….
where should I create the page work.php ?
where should I put it ?
where should I put the basic loop querying the category ?
I should do this for every portfolio page I want to create ?
excuse for my un-knowledge
Hi Erik, thank you but I’ve already figured it out by myself
There was some JS conflict with my fancybox plugin. Changed some setting, everything’s fine now works like a charm!
Thank you for the tutorial, perfect for a WP newbie like myself.
Have a nice day,
Irma
@Irma,
I can certainly try. What seems to be the problem?
Hi Erik,
I have followed all your steps but can’t seem to get it to work in my WP install.
Could you provide me some support please?
Thank you,
Irma
Excellent! thank you!
I already found it out…. Thx anyway.
I’m only working out how the hashtags work…
Maybe a stupid question….
What kind of “content” do I have to place between de “Li” tags?
@michele,
I am not certain I understand your question. You would like to exclude a sub-category from the list or from the loop itself?
wow!
It work grat!
Is it possible to exclude some class/div inside id=”portfolio-list” from the filtering?
Very Good site, thank yo mister, it’s help’s me!
@marco,
Have you tried this already? I believe you should be able to have your portfolio items exist in multiple categories since you will be using the
< ?php foreach ?>statement. The only thing you want to make sure of is that thehashtaglinks exactly match your categories.WOw!
I have one problem when one post is associate to two or more categories.. is it possible?
Hi,
Great script!
I only have one problem got about 200 portfolio items. And when displaying the “All” page it list 200 thumbnails. Would be great if this script got a sort of pagination e.g. like this: http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
Cheers!
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.