0

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 -->

1 Answer 1

0

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 -->
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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