How to customize wordpress function: the tags?

2 Views

In my wordpress post I have included tags with using wordpress function 

<?php the_tags( $before, $sep, $after ); ?>

My actual Css :

Read More
.postclass{
  margin:10px 0px 10px 0px;
  }

.posttag{
  font-size:10px;
  float:left;
  color:#212121;
  margin-right:15px;
  padding:5px;
  border-radius:2px;
  background:black;
}

In my template: 

<div class="postclass">
     <?php the_tags( '<p class="posttag">', ',', '</p>' ); ?>
</div>

This gives me all tags in same black background .How can I get each tag text with black background each separated by comma?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Following an example from here: http://codex.wordpress.org/Function_Reference/get_the_tag_list

    <div class="postclass">
     <?php the_tags( '<p class="posttag">', '</p><p class="posttag">', '</p>' ); ?>
</div>

    This will wrap all tags individually in <p class="posttag">[link]</p>.

    Something closer to your jsfiddle:

    PHP

    <?php the_tags( '<ul class="postclass"><li>', ',</li><li>', '</li></ul>' ); ?>

    CSS

    ul.postclass li {
    float: left;
}
ul.postclass li a {
    padding: 5px;
    background-color: black;
}

    With the_tags() you cannot customize the <a>-tag itself as in your jsfiddle. You can only wrap it. For achieving this you’ll have to work with get_the_terms() which will return an array of tag-objects you can post-process.

  2. This should work:

    1. In your WordPress post.php add a div class followed with tags function like this:
    <div class="postclass">
<?php echo esc_html__( '', 'posttag' ); ?>
</div>

    Add this one, if you need the “#” before each tag.

    <div class="postclass">
<?php echo esc_html__( '', 'posttag' ); ?><?php the_tags( "#", "#" ); ?>
</div>
    1. On your CSS:
    .postclass{
  font-size:10px;
}
.postclass a{
  text-decoration: none;
  padding:5px 10px;
  font-size:10px;
  color:white;
  border-radius:3px;
  background:black;
}

    Working sample: https://koreanwave.org
    (On Desktop: hover at the bottom of image)
    (On Mobile: hover @USER-NAME)