CODEWITHSUNDEEP
phpcsswordpressposttags
galexy
galexy

Reputation: 343

How to customize wordpress function: the tags?

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

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

My actual Css :

.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?

Upvotes: 3

Views: 5460

Answers (2)

Venteens Productions
Venteens Productions

Reputation: 97

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)

Upvotes: 0

HenningCash
HenningCash

Reputation: 2120

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.

Upvotes: 5

Related Questions