How To: Add Text over Featured Images in WordPress

As regular readers of WPlift would know that I have recently developed an interest in how people use images on their WordPress powered website. There are always users wanting to do something or the other, involving images and how to display them. I recently wrote about flexible custom headers in WordPress, taking control of WordPress image handling, displaying images for categories and associating images with Tags, etc. I am actually browsing forums looking for discussions about displaying images in WordPress and using them in innovative new ways.

Browsing forums and groups I noticed that a lot of people on WordPress forums are asking for how they can add text over featured images. Some website owners want to show post title on the featured image, some want to show category.

Text on images enhances user experience. This text can be used to explain the image, or put a headline below the image to make it more appealing. Newspaper and magazine websites utilize this to add headlines and excerpts on images, making their websites more interactive and appealing.

The problem is that while fetching text in WordPress is not that difficult, but adjusting it with CSS on top of your images can be a bit tricky for a lot of users. In this post, we will try experimenting with WordPress featured images by placing different kind of texts on them.

Adding Category Name on Featured Images

Some WordPress website owners want to display the category where an item is posted displayed on top of the featured image for the post. This is good for those websites where a post is filed only in a single category. First we will try to fetch the category name and display it with our post thumbnail, then we will stylize it with CSS in our stylesheet.

[php]
<div class="post-thumb">
<span class="new-wrapper">

<?php
//Display post thumbnail

if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif;

?>

<span>
<?php
// Get the Name of First Category

$category = get_the_category();
echo $category[0]->cat_name;

?>

</span>
</span>
</div>
[/php]

Now we are going to style it with CSS so that the text appears on top of the image

[css]
.new-wrapper span {
background-color: Black;
color:white;
font-size: 12px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:180px;
display: block;
}

.new-wrapper {
float:left;
position:relative;
width: 180px;
overflow:hidden;
}
[/css]

In the example above, we have assumed that your post thumbnail size is 180x180 pixels. Change width to match your post thumbnail size. If you don’t know what your post thumbnail size is you can look at it in Settings > Media.

Tip: If your post thumbnail size is set smaller but the images appearing on your site are not that size then you probably need to Regenerate Thumbnails.

Adding Post Title on Featured Images

This is something we use here on WPLift at top of each single post you see a featured image with post title. However, I will be doing that in Twenty Eleven default theme. First we are going to display a full size featured image, then we will place post title on top of it.

[php]
<div class="single-featured-image">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('full'); endif; ?>
</div>
[/php]

Notice that in the post thumbnail function we have used ‘full’ to display the full size of the featured image. We have set this size in Settings -> Media

[css]

.single-featured-image {
position:relative;
width: 600px;
overflow:hidden;
}
.single-featured-image h2 {
background-color: Black;
color:white;
font-size: 20px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:600px;
display: block;
}
.single-featured-image h2 a {
color:white;
}
.single-featured-image h2 a:visited {
color:white;
}
.single-featured-image h2 a:hover {
color:white;
}
[/css]

Adding Featured Posts with Thumbnails and Post Titles

Another possible scenario where people would like to display text over images is when they are trying to showcase featured posts with just thumbnails and post titles on those thumbnails. There are some very nice plugins available to do that. However, for those who want to do things on their own here is a little code to get you started.

First we are going to fetch last 3 posts in our featured posts category, if you are using custom taxonomy or tags to display featured posts then you will have to adjust the wp_query and replace category_name with tags or custom taxonomy.

[php]
<div class="featured-posts-box">
<?php
$recentPosts = new WP_Query();
$recentPosts->query('showposts=3', 'category_name=Featured');
?>
<ul class="top-featured-image">
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<li class="top-featured-image">
<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('thumbnail'); endif; ?>
</li>
<?php endwhile; ?>
</ul>
</div>
[/php]

This code can go in your main index template just before your posts loop. We have used a custom wp_query to get last three posts from category 'Featured'. Then we have displayed post titles and images. Now we need to use CSS to align images and text properly.

[css]

.featured-posts-box {
background:#eee;
padding:5px;
}

.top-featured-image {
position:relative;
width: 180px;
overflow:hidden;
display:inline;
}

.top-featured-image span {
background-color: Black;
color:white;
font-size: small;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:160px;
display: inline;
float:left;
text-align:left;
}
.top-featured-image span a {
color:white;
}
.top-featured-image span a:visited {
color:white;
}
.top-featured-image span a:hover {
color:white;
}

.top-featured-image ul {
list-style:none;
display: inline;

}

[/css]

This is how it will look like in default Twenty Eleven theme.

Conclusion

For a WordPress powered website owner, an important thing to remember, is that the end user visiting a website wouldn’t know what WordPress code and functions are running behind that site. What they see is rendered HTML, made visually pleasing with CSS. There are a lot of things where a WordPress site can use CSS to improve the user experience. So I end this post with a note to brush up on my CSS skills.