Support » Developing with WordPress » How to add CSS “current” class to tags list?

  • Resolved Trishah

    (@trishahdee)


    This code generates a full list of all the tags on the site:

    <ul id="tags">
    <?php
    $tags = get_tags();
    if ( $tags ) {
        foreach ( $tags as $tag ) {
            echo '<li>';
    
            if ( (int) $tag->term_id === get_queried_object_id() )
                echo "<b>$tag->name</b>";
            else
                printf(
                    '<a href="%1$s">%2$s</a>',
                    get_tag_link( $tag->term_id ),
                    $tag->name
                );
    
            echo '</li>';
        }
    }
    ?>
    </ul>

    When on a single.php post this code will show the tags for that particular post:

    <?php the_tags(); ?>

    What I’m trying to accomplish: When on the single.php post I want to add a CSS class ‘current” to the full list of tags to show which ones are for that post. Nothing I’ve found online is helping me accomplish this. Any help is greatly appreciated!

Viewing 9 replies - 1 through 9 (of 9 total)
  • catacaustic

    (@catacaustic)

    Have a look at get_the_tags (). That will let you get alit of current tags for that post/page and you can use that list to determine which tags are set up for that page from the full list.

    Anil Ankola

    (@anilankola)

    Hi, @trishahdee

    Please use this code

    if condition b tag add “cuurnt” class

    Follow code link here

    • This reply was modified 4 months ago by Anil Ankola.
    • This reply was modified 4 months ago by Anil Ankola.
    • This reply was modified 4 months ago by Anil Ankola. Reason: link share for tag
    Trishah

    (@trishahdee)

    Thank you, Anil, for the reply.

    I have tried your code and it does show an unordered list of all the tags on the site. However, it does not add the current/active class to any of them. My developer tools show no errors on the page.

    Any ideas?

    Trishah

    (@trishahdee)

    @catacaustic, I see that the code you refer to will give a list of the current posts’ tags. I still can not figure out how to get that to add the current/active class to those items in the full list. Can you explain in more detail?

    Moderator bcworkz

    (@bcworkz)

    What you really need for the current post’s tags is their IDs in a simple indexed array. Parse the list returned by get_the_tags() and build up the desired array. Then do something like this in your OP code, assuming the post tag ID array is in $current:

    $classes = in_array( $tag->term_id, $current )?'tag-link current':'tag-link';
    printf(
       '<a class="%1$s" href="%2$s">%3$s</a>',
       $classes,
       get_tag_link( $tag->term_id ),
       $tag->name
    );

    Instead of using get_the_tags() and parsing the returned list, you could use an instance of WP_Term_Query where it is instantiated with arguments that include 'fields'=>'ids', which combined with other arguments to get post_tags of the current post, will return the desired ID array without needing to parse the list.

    Trishah

    (@trishahdee)

    @bcworkz I appreciate your answer… I’ve spent several hours researching and trying things and nothing is working. I just don’t have the technical skills to figure out how to do what you are suggesting.

    Can someone just give me the code for this? I would greatly appreciate it!

    Moderator bcworkz

    (@bcworkz)

    Here ya go:

    <ul id="tags">
    <?php
    $tags = get_tags();
    $query = new WP_Term_Query(array(
    	'object_ids' =>  get_the_ID(),
    	'fields'     => 'ids',
    ));
    $current = $query->get_terms();
    if ( $tags ) {
    	foreach ( $tags as $tag ) {
    		echo '<li>';
    		$classes = in_array( $tag->term_id, $current )?'tag-link current':'tag-link';
    		printf('<a class="%1$s" href="%2$s">%3$s</a>',
    		    $classes,
    		    get_tag_link( $tag->term_id ),
    		    $tag->name
    		);
    		echo '</li>';
    	}
    }
    ?>
    </ul>

    Style the tags that the current post has assigned with something like
    #tags a.current { color: red;}

    Trishah

    (@trishahdee)

    @bcworkz Now I see how it all works and what I was doing wrong.

    Thank you so very much!

    Moderator bcworkz

    (@bcworkz)

    You’re very welcome!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.