Create sortable portfolio in WordPress

1. Download filterable.js and upload it to your_theme/js directory.
Download filterable.js

2. Open your theme’s function.php and add this code

function enqueue_filterable()
{
    wp_enqueue_script( 'filterable', get_template_directory_uri() . '/js/filterable.js', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts', 'enqueue_filterable');

3. Create new template file (for example: portfolio-tempalte.php) with this code and upload it to your theme directory

<?php
/*
Template Name: Portfolio 2 Columns
*/
?>
 
<?php
get_header(); ?>
 
        <div id="primary">
            <div id="content" role="main">
 
            <?php
                 $terms = get_terms("tagportfolio");
                 $count = count($terms);
                 echo '<ul id="portfolio-filter">';
                 echo '<li><a href="#all" title="">All</a></li>';
                 if ( $count > 0 ){
                     
                        foreach ( $terms as $term ) {
                             
                            $termname = strtolower($term->name);
                            $termname = str_replace(' ', '-', $termname);
                            echo '<li><a href="#'.$termname.'" title="" rel="'.$termname.'">'.$term->name.'</a></li>';
                        }
                 }
                 echo "</ul>";
            ?>
                         
            <?php
                $loop = new WP_Query(array('post_type' => 'project', 'posts_per_page' => -1));
                $count =0;
            ?>
             
            <div id="portfolio-wrapper">
                <ul id="portfolio-list">
             
                <?php if ( $loop ) :
                      
                    while ( $loop->have_posts() ) : $loop->the_post(); ?>
                     
                        <?php
                        $terms = get_the_terms( $post->ID, 'tagportfolio' );
                                 
                        if ( $terms && ! is_wp_error( $terms ) ) :
                            $links = array();
 
                            foreach ( $terms as $term )
                            {
                                $links[] = $term->name;
                            }
                            $links = str_replace(' ', '-', $links);
                            $tax = join( " ", $links );    
                        else : 
                            $tax = ''; 
                        endif;
                        ?>
                         
                        <?php $infos = get_post_custom_values('_url'); ?>
                         
                        <li class="portfolio-item <?php echo strtolower($tax); ?> all">
                            <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(400, 160) ); ?></a></div>
                            <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                            <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                            <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
                        </li>
                         
                    <?php endwhile; else: ?>
                      
                    <li class="error-not-found">Sorry, no portfolio entries for while.</li>
                         
                <?php endif; ?>
             
                </ul>
 
                <div class="clearboth"></div>
             
            </div> <!-- end #portfolio-wrapper-->
                 
            <script>
                jQuery(document).ready(function() {
                    jQuery("#portfolio-list").filterable();
                });
            </script>
             
            </div><!-- #content -->
        </div><!-- #primary -->
 
<?php get_footer(); ?>

4. Optional add this css to style.css or style it by yourself

/* CLEARFIX
----------------------------------------------- */
.clearboth {
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
}
/* PORTFOLIO FILTER STYLE
----------------------------------------------- */
#portfolio-filter {
    list-style-type: none;
}
#portfolio-filter li {
    display: inline;
    padding-right: 10px;
}
#portfolio-filter li a {
    color: #777;
    text-decoration: none;
}
#portfolio-filter li .current,
#portfolio-filter li:hover {
    color: #084a9a;
}
/* PORTFOLIO LIST STYLE
----------------------------------------------- */
#portfolio-wrapper {
    padding-bottom: 25px;
}
#portfolio-list {
    list-style-type: none;
}
#portfolio-list .portfolio-item {
    width: 400px;
    float: left;
    margin-right: 5px;
}
#portfolio-list .portfolio-item h3 a {
    color: #084a9a;
    text-transform: uppercase;
    font-weight: bold;
}
#portfolio-list .portfolio-item .excerpt
{
    text-align: justify;
    font-size: 14px;
    line-height: 18px;
    padding-right: 15px;
    margin-bottom: 5px;
}
#portfolio-list .portfolio-item .excerpt a {
    color: #555;
}
#portfolio-list .portfolio-item .excerpt a:hover {
    text-decoration: none;
}

 

Code from Tutplus