How to Display Tags in top of the Post WordPress

By | December 28, 2013

In wordpress, the single page (i.e., full post/article page) will shown the full detail about the post like date published, comments, author, title, content and some themes will show the tags at the bottom of the post. Displaying the tags at top of the post will reduce the bounce rate and make user to go the tags, which are displayed. Here is the tutorial for how to display tags in top of the post wordpress

 

Display Tags in top of the Post WordPress

Display Tags in top of the Post WordPress

 

PHP Code (post-single.php)

Add the following code into post-single.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if(get_the_tags()) {
?>
<div class="tags-box">
<div class="tags-box-name">Tagged in</div>
<?php the_tags('<ul><li>', '</li><li>', '</li></ul>'); ?>
</div>
<?php
}
?>

 

CSS Code (style.css)

Add the following code into style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
</span>

.tags-box
{
width: 100%;
}
.tags-box-name
{
font-size: 14px;
margin: 0 2px 0 0px;
color: #3D3D3D;
text-decoration: none;
float: left;
display: block;
padding: 2px 2px 2px 0px;
}
.tags-box ul
{
list-style: none;
padding: 0;
margin: 5px 0;
}
.tags-box ul li
{
display: inline-block;
}
.tags-box ul li a
{
display: block;
padding: 1px 13px;
background: #FD6B47;
margin: 0 2px 0 0px;
color: #FFF;
text-decoration: none;
font-size: 14px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

semipurposive-mortarless