I am using the isotope by metafizzy script, need to use it on projects page of my website, it's working fine but what i want to do is filtering by custom post categories (portfolio categories), here's the code on that project 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="ercial">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>

Here's the link to filters code, where i added the classes

What i want to do is, to do a custom loop or php function so i can display the categories items as isotope filters. Alternatively i would like to use the tags to filter the posts with isotope, if that's an easy option. I am not good in wordpress functions and php, i did the all integration by the tutorials on web and isotope, jquery is implemented in right way.

I need the help to filter the post categories, or some function, easy solution.

I am using the isotope by metafizzy script, need to use it on projects page of my website, it's working fine but what i want to do is filtering by custom post categories (portfolio categories), here's the code on that project 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=".ercial">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>

Here's the link to filters code, where i added the classes http://goo.gl/y4cXLB

What i want to do is, to do a custom loop or php function so i can display the categories items as isotope filters. Alternatively i would like to use the tags to filter the posts with isotope, if that's an easy option. I am not good in wordpress functions and php, i did the all integration by the tutorials on web and isotope, jquery is implemented in right way.

I need the help to filter the post categories, or some function, easy solution.

• javascript
• php
• wordpress
• jquery-isotope

1 Answer 1

There is a isotope plugin for wordpress: http://mintthemes./isotope-for-wordpress/

If you want to integrate isotope (with category filtering) yourself these tutorials (part 1 and 2) walk you through the process.

Part 1: http://www.aliciaramirez./2014/03/integrating-isotope-with-wordpress/

Part 2: http://www.aliciaramirez./2014/07/integrate-isotope-with-wordpress-part-2-categories/