WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a code in my functions file that I am using to generate a list of categories so that I can use isotope to filter the current page. However I need to know how to -

How to make it a drop down and how to make the isotope script work with it?

How to populate the drop down with the terms/child terms of the current category being viewed?

This is the code that I am referring to -

    function isotope_categories() {

    $terms = get_terms('videoscategory');

    $html = '<ul id="options">';
    $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>';

    foreach ($terms as $term) {

        $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>";   

    $html .= '</ul>';

    echo $html;

Here is the script I need to make work with a drop down and isotope -

<script type="text/javascript">
   var mycontainer = $('#isocontent');
 itemSelector: '.box'

   // filter items when filter link is clicked
   $('#options a').click(function(){
   var selector = jQuery(this).attr('data-filter');
   mycontainer.isotope({ filter: selector });
   return false;  


EDIT: I was able to make the function into a drop down using this code -

 function isotope_categories() {

    $terms = get_terms('videoscategory');

    $html = '<select class="option-set clearfix"  data-filter-group="leuchtenart">';
    $html .= '<option value="*" data-filter-value="" class="selected">All items</option>';

    foreach ($terms as $term) {

        $html .= "<option value='#filter-leuchtenart-{$term->slug}' data-filter-value='.{$term->slug}'>{$term->name}</option>";   

    $html .= '</select>';

    echo $html;

And I changed the js using the following code, however it's not working and I am receiving a error on the last line "SyntaxError: Illegal Character"

<script type="text/javascript">

  var $container = $('#isocontent'),
      filters = {};

    itemSelector : '.boxes'

  // filter buttons
  jQuery('#filters select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = this.attr('data-filter-group');
    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    var selector = isoFilters.join('');
    jQuerycontainer.isotope({ filter: selector });
    return false;


Any help is appreciated, thanks.

share|improve this question
If you are going to vote my valid question down then atleast state why. – mygm26 Dec 21 '12 at 10:16
Im guessing it was voted down as it's not a WordPress specific question. You might be better of over at stackoverflow. – Cristian Dec 21 '12 at 10:31
Ok that's understandable but the code is for wordpress. If necessary how can I have it migrated to stackoverflow? – mygm26 Dec 21 '12 at 10:46
up vote 2 down vote accepted

Ok, I was able to get the drop down working. I was not able figure out my second question though-

How to populate the drop down with the terms/child terms of the current category being viewed?

Here's how I got the drop down to work - The drop down --

$terms = get_terms("videoscategory");
 $count = count($terms);
 if ( $count > 0 ){
     echo "<select id='filter-select'>";
echo "<option value='*' data-filter-value='' class='selected'>All items</option>";
     foreach ( $terms as $term ) {
         echo "<option value='.{$term->slug}'>" . $term->name . "</option>";
     echo "</select>";

 <div id="filters">

<select id="filter-select2">
 <option value="*" data-filter="*" class="selected">All items</option>
<option value=".product" class="current">Documents</option>
<option value=".videos" class="current">Videos</option>
<option value=".text" class="current">Text</option>    
<option value=".link" class="current">Links</option>  

<div id="isocontent">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>
 <?php $post_type = get_post_type($post->ID); ?>
<div class="box<?php foreach( $terms as $term ) echo ' ' . $term->slug; ?><?php echo ' '.get_post_type( $post->ID ); ?>">

// The Content

<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

The javascript --

<script type="text/javascript">
$( function () {

  var $container = $('#isocontent');


  $('#filter-select,#filter-select2').change( function() {
      filter: this.value

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.