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.
https://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="https://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.
