Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a custom post type and now I need to filter the projects according to their categories and without being directed to another page. Also I need to have all category which would show all the projects. Link to the test site. I would appreciate any help.

portfolio-type.php:

 <?php

 if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 270, 170, true ); // Normal post thumbnails
    add_image_size( 'screen-shot', 720, 540 ); // Full size screen
 }

 add_action('init', 'portfolio_register');  

 function portfolio_register() {
 $labels = array(
    'name' => _x('Portfolio', 'post type general name'),
    'singular_name' => _x('Portfolio Item', 'post type singular name'),
    'add_new' => _x('Add New', 'portfolio item'),
    'add_new_item' => __('Add New Portfolio Item'),
    'edit_item' => __('Edit Portfolio Item'),
    'new_item' => __('New Portfolio Item'),
    'view_item' => __('View Portfolio Item'),
    'search_items' => __('Search Portfolio Items'),
    'not_found' =>  __('Nothing found'),
    'not_found_in_trash' => __('Nothing found in Trash'),
    'parent_item_colon' => ''
);
$args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'supports' => array('title','editor','thumbnail')
); 
register_post_type( 'portfolio' , $args );
}

function create_portfolio_taxonomies() {
$labels = array(
    'name'              => _x( 'Categories', 'taxonomy general name' ),
    'singular_name'     => _x( 'Category', 'taxonomy singular name' ),
    'search_items'      => __( 'Search Categories' ),
    'all_items'         => __( 'All Categories' ),
    'parent_item'       => __( 'Parent Category' ),
    'parent_item_colon' => __( 'Parent Category:' ),
    'edit_item'         => __( 'Edit Category' ),
    'update_item'       => __( 'Update Category' ),
    'add_new_item'      => __( 'Add New Category' ),
    'new_item_name'     => __( 'New Category Name' ),
    'menu_name'         => __( 'Categories' ),
);

$args = array(
    'hierarchical'      => true, // Set this to 'false' for non-hierarchical taxonomy (like tags)
    'labels'            => $labels,
    'show_ui'           => true,
    'show_admin_column' => true,
    'query_var'         => true,
    'rewrite'           => array( 'slug' => 'categories' ),
);

register_taxonomy( 'portfolio_categories', array( 'portfolio' ), $args );
}
 add_action( 'init', 'create_portfolio_taxonomies', 0 );

?>

index.php:

        <!-- Start Portfolio Page -->

    <section id="portfolio" class="page">
        <div class="container">
            <div class="row">
                <div class="span12">

                    <div class="title">Portfoolio</div>
                    <hr>
                    <div class="sub-title visible-desktop">Tööd:</div>

                            <!-- Start Filters -->

                      <?php

                      $taxonomy = 'portfolio_categories';
                      $terms = get_terms($taxonomy); // Get all terms of a taxonomy

                      if ( $terms && !is_wp_error( $terms ) ) :
                      ?>
                          <ul class="option-set" data-option-key="filter">
                            <li class="filter-icon hidden-phone">&#0065;</li>
                              <?php foreach ( $terms as $term ) { ?>
                                  <li><a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" ><?php echo $term->name; ?></a></li>
                              <?php } ?>
                          </ul>
                      <?php endif;?>

                        <!-- End Filters -->            

                        <!-- Start Projects -->

                    <div id="posts" class="row isotope">


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

                          <?php  
                              $title= str_ireplace('"', '', trim(get_the_title()));  
                              $desc= str_ireplace('"', '', trim(get_the_content()));  
                          ?>     

                          <div class="item post item span4 isotope-item">

                            <a class="project-wrp fancybox" title="<?=$title?>" rel="lightbox[work]" href="<?php print portfolio_thumbnail_url($post->ID) ?>"><div class="profile-photo"><div class="profile-icon">&#0102;</div><?php the_post_thumbnail(array('230','170'),array('alt' => '')); ?> </div>  
                            <div class="project-name"><?php echo $title; ?></div>
                            <div class="project-client"><?php echo $desc; ?></div>
                            </a>
                          </div>  
                      <?php endwhile; endif; ?>  

                    </div>

                </div>                    
            </div>
        </div>

    </section>

    <!-- End Portfolio Page -->
share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

From Isotope Docs:

HTML:

<ul id="filters">
  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".metal">metal</a></li>
  <li><a href="#" data-filter=".transition">transition</a></li>
  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
  <li><a href="#" data-filter=":not(.transition)">not transition</a></li>
  <li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>
<div id="container">
  <div class="element transition metal">...</div>
  <div class="element post-transition metal">...</div>
  <div class="element alkali metal">...</div>
  <div class="element transition metal">...</div>
  <div class="element lanthanoid metal inner-transition">...</div> 
  <div class="element halogen nonmetal">...</div> 
  <div class="element alkaline-earth metal">...</div>
  ...
</div>

JS Logic:

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

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

It seems you missed an "data-filter" attribute on your filter links and the class to filter on inside of the class attribute of your post items You could print the category slug in the "data-filter" attribute and print the same value on class attribute of your post items.

UPDATE

According to the new replies,

index.php

<!-- Taken from index.php -->

<!-- Start Filters -->
<?php
    $taxonomy = 'portfolio_categories';
    $terms = get_terms($taxonomy); // Get all terms of a taxonomy

    if ( $terms && !is_wp_error( $terms ) ) :


?>


<ul class="option-set" data-option-key="filter"> 
  <li class="filter-icon hidden-phone">&#0065;</li> 
  <li><a href="#" data-option-value="*">All</a></li> 
  <?php foreach ( $terms as $term ) { ?> 
  <li><a data-option-value=".<?php echo $term->slug; ?>" href="#" ><?php echo $term->name; ?></a></li> 
<?php } ?> 
</ul>
<?php endif;?>
<!-- End Filters -->

<!-- Start Portfolio items loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<?php  
    $title= str_ireplace('"', '', trim(get_the_title()));  
    $desc= str_ireplace('"', '', trim(get_the_content()));

    /*
     * Note: get_the_terms() function, retrieves all the terms of a taxonomy, that belong to the post.
     * Return: (array|false|wp_error)
     *  1. array of terms object
     *  2. false if no terms in taxonomy
     *  3. wp_error object if the given taxonomy is an invalid one
     */

    $termsObj = get_the_terms( $post->ID, 'portfolio_categories' );
    if ( $termsObj && !is_wp_error( $termsObj ) ) :
        //We need only the slug of this/these term(s) so looping through the result to grab only the slug value and store it in a new array
        $terms = array();
        foreach( $termsObj as $obj ){
            $terms[] = $obj->slug;
        }
        //Join or implode the new array to a string and then put it in the class attribute of the portoflio item
        $termsString = join( ' ', $terms);
    endif;
?>     

<div class="item post item span4 isotope-item <?php echo $termsString; ?>">
    <a class="project-wrp fancybox" title="<?=$title?>" rel="lightbox[work]" href="<?php print portfolio_thumbnail_url($post->ID) ?>">
        <div class="profile-photo"><div class="profile-icon">&#0102;</div><?php the_post_thumbnail(array('230','170'),array('alt' => '')); ?> </div>  
        <div class="project-name"><?php echo $title; ?></div>
        <div class="project-client"><?php echo $desc; ?></div>
    </a>
</div>  

<?php endwhile; endif; ?>
<!-- End Portofolio items loop -->
share|improve this answer
    
Given the information I changed two lines <li><a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" data-filter="<?php print $term->slug;?>"><?php echo $term->name; ?></a></li> and <div class="item post item span4 isotope-item <?php print $term->slug;?>"> and when inspecting the output I can see that the data-filter attributes are added to the links but the projects are getting class name of just one category. –  Martin Metsalu Aug 7 '13 at 11:11
    
Take a look to the update, hope it helps! : ) –  iEmanuele Aug 7 '13 at 13:03
    
I've committed all the relevant code here. From which line do I need to implement your code? Also I need to add projects and their categories from WP admin sidebar, right now it seems that they are hard coded, or have I misunderstood something? –  Martin Metsalu Aug 7 '13 at 13:59
    
@MartinMetsalu, I'm working on : ) –  iEmanuele Aug 7 '13 at 14:24
    
@MartinMetsalu, I think is more clear now. Let me know if you get stuck. –  iEmanuele Aug 7 '13 at 14:38
show 5 more comments

Your Answer

 
discard

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.