Add custom taxonomy as a css class

Question

On a custom post type archive I'm trying to add the custom taxonomy terms slug as a css class to the tag. I've managed to get it to output the page->ID but struggling to get the $term->slug to work. Feel like I'm missing something really simple. Here's the full code, thanks for any help:

     <?php

$parent_pages = get_pages( array( 'parent' => 0, 'post_type'=> 'archive', 'orderby' => 'menu_order' , 'order' => 'ASC', 'sort_column' => 'menu_order' ) );
foreach ( $parent_pages as $parent_page ) {


echo '<h1 class="page-heading" id="';
echo $parent_page->post_name;
echo '">';

echo $parent_page->post_title;
echo '</h1>';
 echo '<div class="wrapper grid4">';

$all_pages = get_pages(array( 'post_type'=> 'archive',  'orderby' => 'menu_order' , 'order' => 'ASC', 'sort_column' => 'menu_order' ) );
$child_pages = get_page_children($parent_page->ID, $all_pages );
foreach ( $child_pages as $child_page ) {
       $terms = get_the_terms( $child_page->ID, 'media' );
   var_dump($terms);
  echo '<article class="post col ' . $terms->slug .'">';

 echo '<a class="fancybox" data-fancybox-type="iframe" href="http://www.iofpi.co.uk/civicworks.net/wp-content/plugins/pdfjs-viewer-shortcode/web/viewer.php?file=http://www.iofpi.co.uk/civicworks.net/wp-content/uploads/2014/05/Citizen_Manchester.pdf" title="' . the_title_attribute('echo=0') . '" >';

  echo get_the_post_thumbnail( $child_page->ID, 'medium');

  echo '</a>';


    echo '<h1>';
  echo $child_page->post_title;
  echo '</h1>';
  echo '</article>';
}
     echo '</div>';
  }
  ?>

Answer 1

Your code shows how it fetches posts, but not, how it fetches the $term. On a proper development environment (WP_DEBUG is set to TRUE) this code should trigger a notice, that $term is unknown at this point.

However, I suggest to use the template function post_class() to display relevant information of the post as HTML classes. (Note how setup_postdata() and wp_reset_postdata() are used.)

<?php

global $post;
foreach ( $child_pages as $post ) {
    setup_postdata( $post ); ?>
    <article <?php post_class();?>>
        <a class="fancybox" data-fancybox-type="iframe" href="" title="<?php the_title_attribute(); ?>" >
            <?php the_post_thumbnail( 'medium' ); ?>
        </a>
        <h1><?php the_title(); ?></h1>
    </article>
    <?php
}
wp_reset_postdata();

For what I know, post_class() prints classes about the terms of the default taxonomies category, post_tag and post_format. I'm not sure, if it does so for custom taxonomies. Have a look at this first!

If not, this function (in your functions.php) will bring you the terms as HTML classes to the post_class() output:

/**
 * adds terms of custom taxonomies to a set of
 * html classes
 *
 * @wp_hook post_class
 * @param array $classes
 * @param string $class
 * @param int $post_ID
 * @return array
 */
function wpse_151731_add_custom_tax_terms( $classes = array(), $class = '', $post_ID = 0 ) {

    $terms = wp_get_post_terms( $post_ID, array( 'your_taxonomy_slug' ) );
    if ( empty( $terms ) )
        return $classes;

    foreach ( $terms as $t ) {
        $classes[] = $t->taxonomy . '-' . $t->slug;
    }

    return $classes;
}
add_filter( 'post_class', 'wpse_151731_add_custom_tax_terms', 10, 3 );