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 trial

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

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

           <?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
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 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
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(); ?>

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