How to add a post or page tag to the list of classes appearing in the body tag’s class attribute?

by

Good day,

Perhaps you are willing to help out a php-beginner.

I’m trying to add a post or page tag to the list of classes appearing in the body tag’s class attribute. These classes are printed onto html by header.php:

<body <?php body_class(''); ?>>

In the past, I have successfully used the following code to print my page tag into a meta element:

<meta name="print-post-tag" content="<?php
$posttags = get_the_tags();
if ($posttags) {
    foreach($posttags as $tag) {
        echo $tag->name;
    }
}
?>
" >

Note: Posts have tags by default, but I use the Plugin “Tag Pages” to add tags to pages.

So now I’m trying to do something similar in the much used body attribute class space.

After reading the codex at http://codex.wordpress.org/Function_Reference/body_class
and http://codex.wordpress.org/Function_Reference/the_tags
, I found out that the best way to do this would be to add a Filter to my theme’s functions.php.

My first attempt rendered nothing but errors: (multiple code errors here)

function the_tags( $classes ) {
global $tag;
foreach ( get_the_tags( $tag->name ) as $category ) {
    $classes[] = $category->category_nicename;
}
return $classes;
}
add_filter( 'body_class', 'the_tags' );

Note: I am lacking a structural understanding of WordPress template structure and its many variables and functions.

2nd attempt: I tried executing Ryan’s ( https://stackoverflow.com/questions/11232676/trying-to-add-the-slug-to-my-body-class-with-no-success-in-wordpress-can-anyone ) suggested solution, but my html isn’t displaying the page tag. This is the attempt which I dropped at the bottom of my theme’s functions.php:

function a_beautiful_new_body_class() {  // adding a class to <body> tag
global $wp_query;
$tag = '';
if (is_front_page() ) {
    $tag = 'home'; // 'home' as class for the home page
} elseif (is_page()) {
    $tag = $wp_query->query_vars["tag"]; // placing the tag
}
if ($tag)
    echo 'class= "'. $tag. '"';
}

How would you approach this problem?

Kindly,

1 Answer
1

You’re close. Your first attempt is using get_the_tags incorrectly. The function accepts the post ID you want to get the tags from. In your example, there is no $tag global, so $tag->name is trying to fetch a property of a non-object.

In your second attempt, a single post won’t have any tag-related query vars, that would only be set on a tag archive page (also, the tag taxonomy is actually named post_tag behind the scenes).

So here’s a working version that fixes the issues with your examples. Note that we use get_queried_object_id() to pass the current post/page ID to get_the_tags(). You may see other examples that use global $post and then $post->ID to pass the ID to functions, this would also work.

function add_tags_to_body_class( $classes ) {

    // if this is a page or a single post
    // and this page or post has tags
    if( ( is_page() || is_single() )
        && $tags = get_the_tags( get_queried_object_id() ) ){

        // loop over the tags and put each in the $classes array
        // note that you may want to prefix them with tag- or something
        // to prevent collision with other class names
        foreach( $tags as $tag ) {
            $classes[] = $tag->name;
            // or alternately, with prefix
            // $classes[] = 'tag-' . $tag->name;
        }
    }

    // return the $classes array
    return $classes;

}
add_filter( 'body_class', 'add_tags_to_body_class' );

Leave a Comment