How to display Category on top of thumbnail image in wordpress

If you have one featured image per post, then you can display the category on top of featured image, it will look like stylish way to display the category, You can display category on top of featured image in featured article area or anything like that. It will look like the below image..

category-name-on-featured-image

Add this code inside the WordPress loop, i’m using it in twentyten child theme so that i have added in loop.php

<span class="thumb">
<?php //Display post thumbnail
// if it has featured image thumbnail we will display the medium size image
if ( has_post_thumbnail()) : the_post_thumbnail('medium'); endif;

?>
<span>
<?php // Get the Name of First Category
//Fetching all the categories for the post and displaying first pocket
$category = get_the_category();
echo $category[0]->cat_name;

?>

</span>
</span>

Add this Styles to style.css

.thumb span {
background-color: Black;
color: white;
font-size: 12px;
position: absolute;
bottom: 0px;
left: 0px;
padding-left: 10px;
padding: 5px;
-moz-opacity: .80;
filter: alpha(opacity=80);
opacity: .80;
width: auto;
display: block;
margin: 50px 50px 100px 7px;
margin-top: 50px;
}

.thumb {
float:left;
position:relative;
overflow:hidden;
}

Tweak this CSS to your needs…

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe