Isotope + Wordpress + Verlinkung

<!-- Ausgabe Kategorien auf den jeweiligen Seiten-->








<ul id="filters">
            <?php 
              $terms = get_terms("category"); // get all categories, but you can use any taxonomy
              $count = count($terms); //How many are they?
                if ( $count > 0 ){  //If there are more than 0 terms
                    foreach ( $terms as $term ) {  //for each term:
                      echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
                      //create a list item with the current term slug for sorting, and name for label
                    }
                }
            ?>
            <li><a href="http://localhost:8888/listen/listenleipzig" data-filter="http://localhost:8888/listen/listenleipzig">listenleipzig</a></li>
            <li><a href="http://localhost:8888/listen/about" data-filter="http://localhost:8888/listen/about">listenberlin</a></li>
            <li><a href="http://localhost:8888/listen/about" data-filter="http://localhost:8888/listen/about">listenmünster</a></li>




</ul>


<!-- Isotope Jquery-->


jQuery(function ($) {
 
    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item',
        layoutMode : 'masonry'
    });
 
        // filter items when filter link is clicked
        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });          
 
});

<div class="page-header">
   <?php 
    if (is_front_page()) {
       echo '<ul id="filters">';
    } else {
       echo '<ul id="cookiefilter">';
    }
       $terms = get_terms("category", array( 'orderby' => 'slug')); // get all categories, but you can use any taxonomy
       $count = count($terms); //How many are they?
       if ( $count > 0 ){  //If there are more than 0 terms
       foreach ( $terms as $term ) 
         {  //for each term:
       echo "<li><a href='http://localhost:8888/listen#filter=.".$term->name."' data-filter='.".$term->slug."'>" .$term->name . "</a></li>\n";
       //create a list item with the current term slug for sorting, and name for label
    }
    } 
   ?>
<li><a href="http://localhost:8888/listen/listenleipzig" data-filter="http://localhost:8888/listen/listenleipzig">listenleipzig</a></li>
<li><a href="http://localhost:8888/listen/about" data-filter="http://localhost:8888/listen/about">listenberlin</a></li>
<li><a href="http://localhost:8888/listen/about" data-filter="http://localhost:8888/listen/about">listenmünster</a></li>
</ul>
</div>

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
jQuery.cookie = function (key, value, options) {




    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);




        if (value === null || value === undefined) {
            options.expires = -1;
        }




        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }




        value = String(value);




        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }




    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

jQuery(function ($) {
 
    var $container = $('#isotope-list'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item',
        layoutMode : 'masonry'
    });
 
        // filter items when filter link is clicked
        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });




        // Set cookie based on filter selector
        $('#cookiefilter a').click(function(){
            var selector = $(this).attr('data-filter');
            $.cookie("listfilter", selector, { path: '/' });
        });
        
        if ( $.cookie("listfilter") ) {
            $container.isotope({ filter: $.cookie("listfilter") });
            $.cookie("listfilter", null, { path: '/' });
            return false;
        }               
 
});