Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAndy Jordan
889 PointsFilterable portfolio style page with taxonomy help!
I have tried a number of ways but I cant find an answer to display a menu that includes custom taxonomy values, and then display only the posts that have the categories associated with it when clicked.
I can display the taxonomy values like this
<?php
$terms = get_terms("building-type");
$count = count($terms);
echo '<ul id="portfolio-filter">';
echo '<li><a href="#all" title="">All</a></li>';
if ( $count > 0 )
{
foreach ( $terms as $term ) {
$termname = strtolower($term->name);
$termname = str_replace(' ', '-', $termname);
echo '<li><a href="#'.$termname.'" title="" rel="'.$termname.'">'.$term->name.'</a></li>';
}
}
echo "</ul>";
?>
and have the loop working to display my items using the below
<?php
$args = array(
'post_type' => 'building'
);
$the_query = new WP_Query( $args );
?>
<?php if (have_posts() ) : while ( $the_query->have_posts() ) : $the_query-> the_post(); ?>
<div class="col-sm-4 building">
<p><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></p>
<div class="docs"><img src="<?php the_field("icon"); ?>" alt=""></div>
<h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
</div>
<?php endwhile; endif; ?>
I have tried using the isotope plugin but it just outputs all the items, and nothing else.
I want it to work like this. http://vikento-construction.com/?page_id=63
2 Answers
Kevin Korte
28,149 PointsHave you looked at Isotopes filter option? I should do what you need, you would just link the user's click even to call the correct isotope filter code in a javascript file.
Andy Jordan
889 PointsThank you, I ended up using Isotope with some help from https://redvinestudio.com/how-to-build-isotope-portfolio-in-your-wordpress-theme/
<?php
$terms = get_terms("building-type");
$count = count($terms);
echo '<aside id="filters" class="middle">';
echo '<button type="button" class="btn btn-default" data-filter="*">'. __('All', '') .'</button>';
if ( $count > 0 )
{
foreach ( $terms as $term ) {
$termname = strtolower($term->name);
$termname = str_replace(' ', '-', $termname);
echo '<button type="button" class="btn btn-default" data-filter=".'.$termname.'">'.$term->name.'</button>';
}
}
echo "</div>";
?>
<?php // the query $the_query = new WP_Query( array('post_type' => 'building') ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<div id="building-items">
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$terms = get_the_terms( $post->ID, 'building-type' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
foreach ( $terms as $term )
{
$links[] = $term->name;
}
$links = str_replace(' ', '-', $links);
$tax = join( " ", $links );
else :
$tax = '';
endif;
?>
<div class="col-md-4 col-sm-6 col-xs-12 building item <?php echo strtolower($tax); ?>">
<div class="building-item">
<p>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</p>
<div class="docs"><img src="<?php the_field("icon"); ?>" alt="">
</div>
<h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a>
</h3>
</div><!-- .building-item -->
</div>
<?php endwhile; ?>