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.
<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>
Now we are going to style it with CSS so that the text appears on top of the image
.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;
}
In the example above, we have assumed that your post thumbnail size is 180×180 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.
<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>
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
.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;
}
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.
<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>
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.
.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;
}
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.
(3 votes, average: 3.67 out of 5)
17 Comments
Good post but wouldn’t it be better for SEO if you added text or html captions in images rather than text over images? Is the text over images readable by search engines?
Yes its readable, its just positioned with CSS – search engines will see it in the source code the same.
Great tutorial
Thanks for this, I was looking for something like this. I am trying to create a featured post just like ProBlog from magazine3. Will this work? Just like 2 large images above and 3 normal size at the bottom.
Thank you so much, this is so helpful.
Is there a way to display an image/icon (that represents a category) over the featured image instead of the category name? So, for example, you would assign an icon to a category and each featured image from that category would have that icon over the thumbnail.
Also, would there be a way to make it so that only the thumbnail would show the icon, but the other featured image sizes would not?
Thanks!
Great info. One question though: what WP file do I add the php snippets to? I’m clear on adding the CSS but not so much on the php.
Thanks!
Thank you…
I am looking for the code to display the image when hover the mouse on the text(link)
Can you please help me to make it?
Thanks!
Nice job Noumaan, I was wondering if you made a guide for the CSS code of the Featured image.
How to add custom text centre of Featured image ?’
nice one admin, can you make it as a hover effect, like for example: You can see the thumbnails but if you put the mouse pointer on the thumbnails you can see the image and the title below like overlay sliding below the image? like friv(dot)com!
thx
Thanks man. This is a good tut. One question (I’m quite new to all of this), where do I put the display post thumbnail and get the name of first category PHP? Do I just upload it as a new PHP file to my child theme or does it need to go in a specific PHP file?
Many thanks,
Naeem
Very Thanks!
Hello there, just became alert to your blog
through Google, and found that it is truly informative.
I am gonna watch out for brussels. I will appreciate if you continue this in future.
Lots of people will be benefited from your writing. Cheers!
Where do I place the Php for Adding Post Title on Featured Images?
Where am I supposed to place the html code? In which php page? Thanks