Add custom taxonomies as class names to an archive page of custom post types, wordpress

Question

I thought this would be easy enough, although it's proving quite difficult. My end goal is to integrate jQuery isotope into my wordpress portfolio. I've gotten the isotope to work outside of wordpress, but I am having a very difficult time assigning my custom taxonomies as class names. So I don't need help with isotope, just assigning taxonomies as classes.

I have a custom post type of portfolio

the portfolio has 2 custom taxonomies that I want to use to filter my results on an archive page. One taxonomy is "media" the other is "campaigns"

So if I assign a media taxonomy of "print" and a campaign taxonomy of "local" to a post from portfolio, I'd like the output on the archive page to be something like this:

<div id="post-34" class="print local">...</div>

However I currently have this

<div id="post-34" class>...</div>

i followed instructions from the codex on get_the_terms. I added this code to my functions.php file:

<?php // get taxonomies terms links
function custom_taxonomies_terms_links() {
    global $post, $post_id;
    // get post by post id
    $post = &get_post($post->ID);
// get post type by post
    $post_type = $post->post_type;
// get post type taxonomies
    $taxonomies = get_object_taxonomies($post_type);
    foreach ($taxonomies as $taxonomy) {
        // get the terms related to post
        $terms = get_the_terms( $post->ID, $taxonomy );
        if ( !empty( $terms ) ) {
            $out = array();
            foreach ( $terms as $term )
                $out[] = '<a href="' .get_term_link($term->slug, $taxonomy) .'">'.$term->name.'</a>';
        $return = join( ', ', $out );
    }
}
return $return;
} ?>

Then I dropped in the echo call into the class call in my loop on the archive-portfolio.php page like this:

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

        <div id="post-<?php the_ID(); ?>" class="<?php echo custom_taxonomies_terms_links(); ?>">

Any help would be greatly appreciated. This is driving me nuts that I can't figure this out.

Answer 1

wordpress has a clean way of outputting the class name for a post item - using post_class so in your case first set the div to

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>...</div>

and to add the taxonomy name to the class you have to add a filter. So in your functions.php drop this in (change YOUR_TAXO_NAME to the name of your custom taxonomy): (taken from here)

add_filter( 'post_class', 'custom_taxonomy_post_class', 10, 3 );

    if( !function_exists( 'custom_taxonomy_post_class' ) ) {

        function custom_taxonomy_post_class( $classes, $class, $ID ) {

            $taxonomy = 'YOUR_TAXO_NAME';

            $terms = get_the_terms( (int) $ID, $taxonomy );

            if( !empty( $terms ) ) {

                foreach( (array) $terms as $order => $term ) {

                    if( !in_array( $term->slug, $classes ) ) {

                        $classes[] = $term->slug;

                    }

                }

            }

            return $classes;

        }

    }

(for multiple taxonomies add an array)

$taxonomy = array('YOUR_TAXO_NAME_1', 'YOUR_TAXO_NAME_2');

and that should add the post type name as well as the taxonomy its tagged in to the div class