Call/link wordpress category with jquery/isotope c

Question

I am working on the portfolio section of my web, and these codes i have in filter.js script (in wp-includes/js folder)

jQuery(document).ready(function(){
    jQuery(".grid-item").first().addClass("comercial");
    jQuery(".grid-item:eq(1)").addClass("residencial");
    jQuery(".grid-item:eq(2)").addClass("cultural");
    jQuery(".grid-item:eq(3)").addClass("interiores");
    jQuery(".grid-item:eq(4)").addClass("residencial");
            jQuery(".grid-item:eq(5)").addClass("residencial");
    jQuery('.grid').isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows'
    });

    jQuery(".dcjq-parent-li ul li a").click(function() {
        jQuery(".dcjq-parent-li ul li a").removeClass("active");
        jQuery(this).addClass("active");
        var filtro=jQuery(this).attr("data-filter");
        jQuery(".grid").isotope({ filter: filtro});
    });

    jQuery(".dcjq-parent").click(function() {
        if(jQuery(this).siblings("ul").css("display")=="block")
            jQuery(this).siblings("ul").slideToggle( "slow" );
        else
        {
            jQuery(".accordionMenu ul").each(function( index ) {
                if(jQuery(this).css('display')=="block")
                {
                    jQuery(this).slideToggle( "slow" );
                    jQuery(this).siblings("a").removeClass("active");
                }
            });
            jQuery(this).siblings("ul").slideToggle( "slow" );
            jQuery(this).addClass("active");
        }
    });

});

I have the different classes in above codes, but i am not sure how to use these classes in wordpress posts or how to create a function/loop to use these classes in posts.

That code i have in my portfolio page:

<div id="aside">
    <ul id="subMenu" class="accordionMenu" data-option-key="filter">                        
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent active">Tipologia<span class="dcjq-icon"></span>
            </a>
            <ul style="display: block;">
                <li><a href="#filter" data-filter="*" class="active">todos</a></li>
                <li><a href="#filter" data-filter=".residencial">Residencial</a></li>
                <li><a href="#filter" data-filter=".comercial">Comercial</a></li>
                <li><a href="#filter" data-filter=".cultural">Cultural</a></li>
                <li><a href="#filter" data-filter=".interiores">Interiores</a></li>
            </ul>
        </li>
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent">Datas<span class="dcjq-icon"></span></a>
            <ul style="display: none;">
                <li><a href="#filter" data-filter="*" class="actv">todos</a></li>
                <li><a href="#filter" data-filter=".1980, .1981, .1982, .1983, .1984">1980 - 1984</a></li><li><a href="#filter" data-filter=".1985, .1986, .1987, .1988, .1989">1985 - 1989</a></li><li><a href="#filter" data-filter=".1990, .1991, .1992, .1993, .1994">1990 - 1994</a></li><li><a href="#filter" data-filter=".1995, .1996, .1997, .1998, .1999">1995 - 1999</a></li><li><a href="#filter" data-filter=".2000, .2001, .2002, .2003, .2004">2000 - 2004</a></li><li><a href="#filter" data-filter=".2005, .2006, .2007, .2008, .2009">2005 - 2009</a></li><li><a href="#filter" data-filter=".2010, .2011, .2012, .2013, .2014">2010 - 2014</a></li>
            </ul>
        </li>                                   
    </ul>
</div>

<div class="projecto"><div class="grid">
<?php $my_query = new WP_Query('post_type=portfolio&posts_per_page=-1');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>

<?php if($feat_image!=''){?>    <li class="grid-item"><a href="<?php the_permalink(); ?>"><div class="proimg"><img alt="" src="<?php echo $feat_image;?>" /></div></a>
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                       <div class="textblock"><?php echo $text = get_post_meta( $post->ID, 'text', true ); ?>
</div>
                       </li><?php } ?>
<?php endwhile;  wp_reset_query(); ?>
</div>
</div>
<?php get_sidebar( $blog-widgets ); ?>
<?php get_footer(); ?>

I have done all these codes by reading the tutorials of wordpress/isotope integration, create the classes in jquery, do codes on project page and what i didn't understand is how to use these isotope/jquery classes in wordpress posts so they will be appear as filters. I know, it could be done via category filtering, tags, metabox or custom loop but i don't know how exactly to create the custom loop, which use the filter classes in categories.

Sorry, if i didn't ask the question in right way, i am a beginner and trying to do everything by tutorials and by the help of experts.

Answer 1

Remove JS code that automatically add the class that you wanted to be added manually,

these lines

jQuery(".grid-item").first().addClass("comercial");
jQuery(".grid-item:eq(1)").addClass("residencial");
jQuery(".grid-item:eq(2)").addClass("cultural");
jQuery(".grid-item:eq(3)").addClass("interiores");
jQuery(".grid-item:eq(4)").addClass("residencial");
jQuery(".grid-item:eq(5)").addClass("residencial");

in your wordpress loop, get the list of categories of the current item and store them in variable separated by space as this will be use as classes later, you can use get_the_category function

//get the category assign to the post
//$cat_objects = get_the_category();
$cat_objects = wp_get_post_terms( get_the_ID(), 'portfolio_category');



/**Define category variable to be use as class, leave empty if you don't want to add global classes you can add 'grid-item' in here and remove it on the LI element, **/
$categories = '';

// Loop through each category object
foreach ( $cat_objects as $cat ) {

    // extract the category slug and add them to $categories variable, 
    $categories .=  ' '. $cat->slug; /** Added Space at the beginning of each category so they will be separated during actual output**/
}

you can then add the list of categories stored in the $categories variable from the code above as additional class for grid-item li's, <li class="grid-item<?php echo $categories; ?>">

Your loop should look something like this

<div class="projecto"><div class="grid">
<?php $my_query = new WP_Query('post_type=portfolio&posts_per_page=-1');
    while ($my_query->have_posts()) : $my_query->the_post(); 

    $cat_objects = get_the_category();
    $categories = '';
    foreach ( $cat_objects as $cat ) {
        $categories .=  ' '. $cat->slug;
    }

    ?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>

<?php if($feat_image!=''){?>  <li class="grid-item<?php echo $categories; ?>"><a href="<?php the_permalink(); ?>"><div class="proimg"><img alt="" src="<?php echo $feat_image;?>" /></div></a>
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                       <div class="textblock"><?php echo $text = get_post_meta( $post->ID, 'text', true ); ?>
</div>
                       </li><?php } ?>
<?php endwhile;  wp_reset_query(); ?>
</div>