Concevoir un portfolio responsive avec filtre via Isotope.js sous WordPress

/* Portfolio */
function cpt_ntp_portfolio() {
	$labels                = array(
		'name'                => _x('Portfolio', 'Post Type General Name', 'ntp_framework'),
		'singular_name'       => _x('Portfolio', 'Post Type Singular Name', 'ntp_framework'),
		'menu_name'           => __('Portfolio', 'ntp_framework'),
		'parent_item_colon'   => __('Portfolio parent :', 'ntp_framework'),
		'all_items'           => __('Tous les portfolios', 'ntp_framework'),
		'view_item'           => __('Voir le portfolio', 'ntp_framework'),
		'add_new_item'        => __('Ajouter un portfolio', 'ntp_framework'),
		'add_new'             => __('Nouveau portfolio', 'ntp_framework'),
		'edit_item'           => __('Editer un portfolio', 'ntp_framework'),
		'update_item'         => __('Mettre à jour le portfolio', 'ntp_framework'),
		'search_items'        => __('Rechercher des produits', 'ntp_framework'),
		'not_found'           => __('Aucun portfolio trouvé', 'ntp_framework'),
		'not_found_in_trash'  => __('Aucun portfolio trouvé dans la corbeille', 'ntp_framework'),
	);
	$rewrite               = array(
		'slug'                => 'portfolio',
		'with_front'          => true,
		'pages'               => false,
		'feeds'               => false,
	);
	$args                  = array(
		'label'               => __('portfolio', 'ntp_framework'),
		'description'         => __('Les créations de votre entreprise', 'ntp_framework'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'revisions', 'custom-fields',),
		'taxonomies'          => array('type'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 20,
		'menu_icon'           => '',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => true,
		'publicly_queryable'  => true,
		'query_var'           => 'portfolio',
		'rewrite'             => $rewrite,
		'capability_type'     => 'page',
	);
	register_post_type('portfolio', $args);
}
add_action('init', 'cpt_ntp_portfolio', 0);

/* Type */
function ct_ntp_type() {
	$labels                        = array(
		'name'                        => _x('Types', 'Taxonomy General Name', 'ntp_framework'),
		'singular_name'               => _x('Type', 'Taxonomy Singular Name', 'ntp_framework'),
		'menu_name'                   => __('Types', 'ntp_framework'),
		'all_items'                   => __('Tous les types', 'ntp_framework'),
		'parent_item'                 => __('Type parent', 'ntp_framework'),
		'parent_item_colon'           => __('Type parent :', 'ntp_framework'),
		'new_item_name'               => __('Nouveau type', 'ntp_framework'),
		'add_new_item'                => __('Ajouter un type', 'ntp_framework'),
		'edit_item'                   => __('Editer un type', 'ntp_framework'),
		'update_item'                 => __('Mettre à jour', 'ntp_framework'),
		'separate_items_with_commas'  => __('Séparer les types par des virgules', 'ntp_framework'),
		'search_items'                => __('Rechercher des types', 'ntp_framework'),
		'add_or_remove_items'         => __('Ajouter ou supprimer des types', 'ntp_framework'),
		'choose_from_most_used'       => __('Choisir parmi les types les plus utilisés', 'ntp_framework'),
	);
	$rewrite                       = array(
		'slug'                        => 'type',
		'with_front'                  => true,
		'hierarchical'                => true,
	);
	$args                          = array(
		'labels'                      => $labels,
		'hierarchical'                => true,
		'public'                      => true,
		'show_ui'                     => true,
		'show_admin_column'           => true,
		'show_in_nav_menus'           => true,
		'show_tagcloud'               => true,
		'query_var'                   => 'type',
		'rewrite'                     => $rewrite,
	);
	register_taxonomy('type', 'portfolio', $args);
}
add_action('init', 'ct_ntp_type', 0);

<?php get_header(); ?>
<div id="content" class="container">
	<div class="row">
		<div id="main" class="span12" role="main">

			<div class="page-header">
				<h1 class="archive_title h2">
					<?php post_type_archive_title(); ?> - <small><?php _e('Some of our best work', 'ntp_framework'); ?></small>
				</h1>
			</div>

			<?php 
				$terms = get_terms("type"); 
				$count = count($terms); 
				echo '<ul id="portfolio-filter" class="filter">'; 
				echo '<li class="active-tag btn btn-small"><a href="#all" data-filter="*" title="Tout">Tout</a></li>'; 
				if ( $count > 0 ) { 
					foreach ( $terms as $term ) { 
						$termname = ($term->slug); 
						echo ' <li class="btn btn-small"><a href="#'.$termname.'" title="" data-filter=".'.$termname.'" rel="'.$termname.'">'.$term->name.'</a></li>'; 
					} 
				} 
				echo "</ul>"; 
			?>

			<div id="portfolio-wrapper">
				<ul id="portfolio-list" class="thumbnails isotope">

				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<li id="post-<?php the_ID(); ?>" <?php post_class('item-portfolio'); ?> role="article">
						<?php
							$image_id = get_post_thumbnail_id();
							$image_url = wp_get_attachment_image_src($image_id, 'large');
							$image_url = $image_url[0];
						?>

						<a class="fancybox thumbnail" id="post-<?php the_ID(); ?>" href="<?php echo $image_url ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('medium', array('class' => 'aligncenter photo')); ?></a>
					</li>

				<?php endwhile; ?> 

				<?php else : ?>

					<article id="post-not-found">
						<header>
							<h1><?php _e("No portfolio yet", "ntp_framework"); ?></h1>
						</header>

						<section class="post_content">
							<p><?php _e("Sorry, What you were looking for is not here.", "ntp_framework"); ?></p>
						</section>
					</article>

				<?php endif; ?>

				</ul>
			</div>
		</div> 
	</div> 
</div>
<?php get_footer(); ?>

/* Ajout des scripts JavaScript */
function ntp_js() {
	wp_register_script('isotope', get_template_directory_uri().'/inc/js/jquery.isotope.min.js', array('jquery'), '1.5.19', true);if (is_post_type_archive('portfolio')) {
		wp_enqueue_script('isotope');
	}
}
add_action('wp_enqueue_scripts', 'ntp_js');

/* Ajout des termes dans les classes CSS des éléments du portfolio */
function ntp_item_portfolio_class($classes, $class, $ID) {
	$taxonomy = 'type';
	$terms = get_the_terms((int) $ID, $taxonomy);
	if(!empty($terms)) {
		foreach((array) $terms as $order => $term) {
			if(!in_array($term->slug, $classes)) {
				$classes[] = $term->slug;
			}
		}
	}
	return $classes;
}
add_filter('post_class', 'ntp_item_portfolio_class', 10, 3);

/* Ajout du JavaScript isotope sur le portfolio */
function ntp_isotope_js() { 
 if (!is_admin() && is_post_type_archive('portfolio')) { ?>
 <script> 
 jQuery(function($) {
 $(window).load(function() {

 /* Code principal */
 function ntp_portfolio_isotope() {
 var $container = $('#portfolio-list');
 $container.imagesLoaded(function(){
 $container.isotope({
 itemSelector: '.item-portfolio',
 layoutMode: 'masonry' 
 });
 });
 } ntp_portfolio_isotope();

 /* Filtre */
 $('.filter a').click(function() {
 var selector = $(this).attr('data-filter');
 $('#portfolio-list').isotope({ filter: selector });
 $(this).parents('ul').find('a').removeClass('active');
 $(this).addClass('active');
 return false;
 });

 /* Redimensionnement */
 var isIE8 = $.browser.msie &&  $.browser.version === 8;
 if (isIE8) {
 document.body.onresize = function () {
 ntp_portfolio_isotope();
 };
 } else {
 $(window).resize(function () {
 ntp_portfolio_isotope();
 });
 }

 /* Orientation */
 window.addEventListener("orientationchange", function() {
 ntp_portfolio_isotope();
 });

 });
 });
</script> 
<?php } }
add_action ('wp_footer', 'ntp_isotope_js');

/*--------------------------------------------------------------
    Portfolio
-------------------------------------------------------------- */

/* Grille portfolio */
ul#portfolio-list { 
    margin-top: 20px;    
}
ul#portfolio-list h2 { 
    font-weight: lighter;
}
.thumbnail { 
    width: 85%;
}
.isotope, .isotope .isotope-item {
    -webkit-transition: all 0.6s ;
    -moz-transition: all 0.6s ;
    -ms-transition: all 0.6s ;
    -o-transition: all 0.6s ;
    transition: all 0.6s ;
}
.isotope {
    transition-property: height, width;
}
.isotope .isotope-item {
    transition-property: transform, opacity;
}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    transition-duration: 0s;
}
ul#portfolio-filter {
    margin-top: 20px;
}
a.thumbnail:hover, a.thumbnail:focus {
    border-color: #27AAE2;
    box-shadow: none;
    outline: 0 none;
}
.thumbnail {
    border: 1px solid #EEEEEE;
    border-radius: 0 0 0 0;
    box-shadow: none;
}
.single-portfolio header {
    text-align: center;
}
.single-portfolio h1 {
    margin: 50px auto 0;
}
.single-portfolio h2 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: lighter;
    margin: 0;
}
#bg-portfolio {
    background: rgb(69,72,77); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6  */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4  */
    background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10 ,Safari5.1  */
    background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10  */
    background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10  */
    background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #D4D4D4;
    border-top: 1px solid #D4D4D4;
    margin: 20px 0;
    padding: 50px 0;
}
ul#project-details li {
    margin: 10px 0;
}
.single-portfolio .carousel img {
    height: auto;
    left: 0;
    margin: 0 auto;
    min-width: inherit;
    position: relative;
    top: 0;
}

/* Nombre d'items à afficher dans le portfolio */
function ntp_cpt_item($query) {
	if (is_post_type_archive('portfolio')) {
 		$query->set('posts_per_page', 99);
		return;
	}
}
add_action('pre_get_posts', 'ntp_cpt_item', 1);