Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Landing Page

Andy Jordan
Andy Jordan
889 Points

Filterable 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

    $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

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


    <?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
Kevin Korte
28,135 Points

Have 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
Andy Jordan
889 Points

Thank 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(); ?>

                    $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 = '';  

                <div class="col-md-4 col-sm-6 col-xs-12 building item <?php echo strtolower($tax); ?>">
                        <div class="building-item">
                            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                            <div class="docs"><img src="<?php the_field("icon"); ?>" alt="">
                                <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                        </div><!-- .building-item -->
                <?php endwhile; ?>