Title: JQuery Sort
Last modified: August 19, 2016

---

# JQuery Sort

 *  [jdestree](https://wordpress.org/support/users/jdestree/)
 * (@jdestree)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/jquery-sort/)
 * I have a strange question but I found this tutorial: [http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery](http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery)
 * It uses JQuery to filter li elements.
 * I’m looking for some assistance. Is it possible to achieve the same effect with
   blog posts? I know they are divs not lists but that shouldn’t matter all that
   much.
 * In my situation I have preset tags, so I would have a menu of a series of tags
   and the divs would be filtered accordingly.
 * Any ideas? I would be extremely helpful! I took one stab at it and failed. Still
   trying to figure it out.
 * Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [jdestree](https://wordpress.org/support/users/jdestree/)
 * (@jdestree)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/jquery-sort/#post-1290762)
 * Do I have to display posts as
    - ‘s? Is that even possible?
 *  [magaworks](https://wordpress.org/support/users/magaworks/)
 * (@magaworks)
 * [16 years ago](https://wordpress.org/support/topic/jquery-sort/#post-1290997)
 * Hi,
    That link gives a really cool feature, but for those who are not very php
   nor javascript oriented this is very incomplete to use with wordpress. Actually
   it is rather useless. After all the name of the post is: “Create a Filterable
   Portfolio Page in **WordPress **with jQuery” The most important part, using the
   Loop in wordpress is not explained. I would like to share how I coded my portfolio
   in wordpress using the loop. Starting with the basics: – First of all you need
   to add jQuery library. – Second call the filterable.pack.js which you can download
   from the link. [http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip](http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip)–
   Finally the loop to make this work:
 *     ```
       <ul id="portfolio-filter">
       		<li><a href="#all">All</a></li>
       		<li><a href="#criatura-da-semana">Criatura da semana</a></li>
       		<li><a href="#criaturas-criativas">Criaturas Criativas</a></li>
       		<li><a href="#software">Software </a></li>
       		<li><a href="#utilidades">Utilidades </a></li>
       	</ul>
   
               <ul id="portfolio-list">
               <?php query_posts('cat=10,8,4,23&showposts='); ?>
               <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
       <!-- ** store the category slugs for each post in a variable $catSlug ** -->
               <?php
       		foreach((get_the_category()) as $category) {
       			$catSlug = $category->category_nicename . ' ';
       		}
       		?>
       <!-- // echo the category slugs in the class for this to work properly -->
                       <li class="<?php echo $catSlug;  ?>">
       				<?php if( p75HasThumbnail($post->ID) ) { ?>
        <!-- ** This is my own plugin to get the thumbnail from the post - you may use some custom field you have to get the image. ** -->
                           <a href='<?php the_permalink() ?>' title='<?php the_title(); ?>'><img src='<?php echo p75GetThumbnail($post->ID); ?>' alt='<?php the_title(); ?>' /></a>
                           <?php } else { ?>
                           <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="http://yourblogsurl/alternativeThumbnail.jpg" alt="<?php the_title(); ?>" /></a>
                           <?php } ?>
                           <p><?php the_title(); ?></p>
   
                       </li>
                   <? endwhile; ?>
               <? endif; ?>
               </ul>
       ```
   
 * In the first
    -  You just have to replace the href=# with your own category slugs, and in 
      the query_posts, call for your own category IDs.
    - The code inside the
    -  is whatever you want, depending on what you wish to show for each post. Here
      I call for my thumbnail and post title. For the thumbnail I use a plugin, 
      but you can use a custom field or anything else.
       Then you just have to style
      it as you wish. This works. I have implemented it to test and it is running
      smothly.
    - Another thing you may want to alter is the animation for the thumbnails in
      the filterable.js. I personally didn’t like the animation and just wanted 
      a simple fadein/fadeout.
    - Just look inside the filterable.pack.js for these lines:
    -     ```
          /* SHOW: show a single class*/
          			$(this).bind("show", function( e, selectorToShow ){
          				$(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
          			});
      
          			/* SHOW: hide a single class*/
          			$(this).bind("hide", function( e, selectorToHide ){
          				$(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);
          			});
          ```
      
    - Change them to this:
    -     ```
          /* SHOW: show a single class*/
          			$(this).bind("show", function( e, selectorToShow ){
          				$(this).children(selectorToShow).fadeIn('slow');
          			});
      
          			/* SHOW: hide a single class*/
          			$(this).bind("hide", function( e, selectorToHide ){
          				$(this).children(selectorToHide).fadeOut('normal');
          			});
          ```
      
    - Sorry if this is too much code, but I myself am not a php expert and lost 
      half a day making this work in wordpress, so I just though it would be nice
      to share this with others like me who are not php experts and just scratch
      the surface.
    - Anyway, hope this helps someone.
       If you still have questions just ask.
 *  [jasonday](https://wordpress.org/support/users/jasonday/)
 * (@jasonday)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/jquery-sort/#post-1291012)
 * I’m getting “$ is not a function” – line 75 in the filterable code.
 * thoughts?
 * see site – [http://www.thinquetanque.com/portfolio](http://thinquetanque.com/portfolio)
 *  [jasonday](https://wordpress.org/support/users/jasonday/)
 * (@jasonday)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/jquery-sort/#post-1291013)
 * ok – nevermind – i fixed it. I was using a framework and those are always wonky
   with adding new scripts. I just added it to the header instead of through the
   theme functions.
 * My only issue now, is I would like to add a post to multiple categories. However,
   when I do that, the item will only show for one of the categories. Is there something
   i’m missing – or a workaround?
 * thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘JQuery Sort’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 3 participants
 * Last reply from: [jasonday](https://wordpress.org/support/users/jasonday/)
 * Last activity: [15 years, 9 months ago](https://wordpress.org/support/topic/jquery-sort/#post-1291013)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics