0

Ok I have searched and can't find. Here is what I'm trying to accomplish.

I want to separate the tags in my post. For example, I want to show the first tag in my post but have all other tags show when you hover over the more button. Now the css and the menu I can handle, but how do I get the tags to separate, like placing the first tag in one div and the rest in another div that is hidden except on hover.

enter image description here

In the photo above, I want the other tags to appear once they hover over the "+" button.

<?php the_tags( __( '<span class="tag-links">Tags: ', 'wpbx' ), ", ", "</span>\n" ) ?>

  • Can't you use the :last-child in css maybe? – pascalvgemert Jun 25 '14 at 21:00
0

You need to use another function to get the tags, something that returns an object or an array, like that you can manipulate it as you need.

http://codex.wordpress.org/Function_Reference/get_tags

<?php $my_tags = get_the_tags();?>

Then where you need the first tag:

<?php echo $my_tags[0]->name?>

For looping the rest except the first tag:

<?php $count=1;
foreach ($my_tags as $my_tag) {
    if ($count != 1) {?>
        <li>
            <a href="<?php echo get_tag_link($my_tag->term_id);?>">
                <?php echo $my_tag->name?>
            </a>
        </li>   
    <?php }
    $count++;
}?>

Hope it helps!

  • It isn't linking @Gioia Fueter how do i get it to permalink. – user32447 Jun 26 '14 at 0:00
  • I will update my answer tomorrow first thing :) – Gioia Fueter Jun 26 '14 at 0:12
  • Ok, and Also It's grabbing all tags I only need it for tags in the post it's attached to. – user32447 Jun 26 '14 at 0:21
  • Ok, code updated :) – Gioia Fueter Jun 26 '14 at 10:47
  • @RachieVee: You are right about the php shorthand, updated my code too, I know it too but it's a nasty habit ;) – Gioia Fueter Jun 26 '14 at 10:49
0

Hmm, I based my example from what Gioia has already provided and the example that's on the Codex here.

Also as a tip, you want to avoid using shorthand when writing PHP in WordPress if you're going to stick with WordPress' best practices, so you always want to write out the opening PHP tag.

I wanted to break out of the foreach for the first tag so you can have an unordered list for the remaining tags and hopefully make styling with CSS easier. If anyone has a nicer way to do this, please let me know. Here's what I have:

<?php 
$posttags = get_the_tags();
$count = 0;
if ( $posttags ) {
    foreach( $posttags as $post_tag ) { 

        $count++; //add to counter
        $tag_id = $post_tag->term_id; //get tag id so we can use it for a tag link

        if ( 1 == $count ) {
            echo '<a href="' . get_tag_link($tag_id) . '" class="first-tag">' . $post_tag->name . '</a>';
        } //end of first tag if statement 
        break;// break out of this for each so we can use a ul to separate the tags after the first
    } //end of for each ?>

    <ul class="remaining-tags">
        <?php foreach( $posttags as $remaining_tag ) { 
            $count++; //add to counter
            if ( 2 != $count ) { 
                echo '<li><a href="' . get_tag_link($tag_id) . '">' . $remaining_tag->name . '</a></li>';
            } // end of if statment for tags after first one
        } //end of for each ?>
    </ul>
<?php } //end of if $posttags ?>

Was fighting with the indentation of this on here, let me know if you have trouble reading it. Hope it helps a bit. Also this should work in the loop.

  • The permalinks are going to mysite.com instead of mysite.com/tag/tag-name @RachieVee – user32447 Jun 26 '14 at 4:11
  • Ah, I forgot the permalinks! I'll get to it in a while unless Gioia gets to it first. ;-) – RachieVee Jun 26 '14 at 13:00
  • Updated code that retrieves the tag permalinks. Try now. Also as a tip, you can use var_dump($post_tag) to see what options you have available to you. If you run that command, you'll see where I got ->name and ->term_id. More about var_dump here: php.net//manual/en/function.var-dump.php – RachieVee Jun 26 '14 at 13:30
  • What I have above works, but I may have a cleaner solution - feel free to use this if it meets your needs, but I'm working with a friend of mine to get a much nicer solution without having to use a break; – RachieVee Jun 26 '14 at 16:33
  • I had to actually combine both of your codes because the first code, somehow didn't show the first tag but it did show the rest and the rest was clickable. The Second code did well as well, but the rest of the tags were linking to only the first tag, so I just combined the two to make it work – user32447 Jun 26 '14 at 19:15
0

This is another solution I got from someone else I know where there's less of the counter in place and uses unset instead. It's just another way to achieve the same thing that I provided, but with less lines of PHP. Also, unset can be dangerous if you want to grab that variable/value somewhere else in the template so only if it fits your circumstances, then it'll work for you.

<?php 
        $posttags = get_the_tags();
        $count = 0;
        if ( $posttags ) {
            foreach( $posttags as $key => $post_tag ) {
            $tag_id = $post_tag->term_id; //get tag id so we can use it for a tag link

            if ( 0 === $count ) {
                echo '<a href="' . get_tag_link($tag_id) . '" class="first-tag">' . $post_tag->name . '</a>';
                unset( $posttags[$key] ); //using unset the destroy the variable, unset should only be used if you're not planning to use this first tag anywhere else in the template
                break;// break out of this for each so we can use a ul to separate the tags after the first
            } //end of first tag if statement
        } //end of for each ?>

            <ul class="remaining-tags">
                <?php foreach( $posttags as $remaining_tag ) {
                    echo '<li><a href="' . get_tag_link($tag_id) . '">' . $remaining_tag->name . '</a></li>';
                } //end of for each ?>
            </ul>
        <?php } //end of if $posttags ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.