Press "Enter" to skip to content

GeneratePress Theme Tutorial: How to Add the Blog Post Category Name over Featured Image

Reading Time: 2 minutes

In this post, I’m going to show you how to move the blog category text over the featured image in GeneratePress.

So, your blogroll will go from looking like this:

before image
Blog Category Name Default Location

To this:

New Category Name Location

Keep reading to learn how it’s done.

Watch the Video Tutorial

Generatepress Featured Image Overlay - How to Add the Blog Post Category Name over Post Thumbnails

Keep reading to follow the written steps.

Follow these steps to move the location of the cateogry name to the featured image.

Step 1: Add some code to WordPress

The first thing to do it add the plugin Code Snippets:

install code snippets
Install and activate Code Snippets

Then click Add New, give the snippet a name and paste the code below:

add code to code snippets
add_filter( 'post_thumbnail_html','tu_add_category_featured_image' );
function tu_add_category_featured_image( $output ) {
	$return = $output;
	$cat = get_the_category( get_the_ID() );
	if ( isset( $cat ) && ! is_singular() ) {
		foreach( $cat as $cat_name ) {
			$return .= '<div class="featured-image-category">' . $cat_name->name . '</div>';
		}
	}
	
	return $return;
}

Save the snippet and move onto the next step.

Related: Ultimate WordPress Guide for Beginners

Step 2: Remove the old category name

Next, we need to remove the old category text from the blogroll:

move new category name remove old one

Go to the theme customizer and navigate to Layout > Blog, and uncheck Display post categories:

uncheck category

Step 3: Customize the Overlay Text

Now we can customize the layout and design of the category text overlay:

additional css

Inside the customizer, navigate to Additional CSS and paste the following code:

.post-image {
  position: relative;
}

.featured-image-category {
  position: absolute;
  top: 26px;
  left: 10px;
  background: #9CB700;
  color: #fff;
  padding: 3px 25px;
}

And you’re all done!

Here’s the end result:

New Category Name Location

Conclusion

That’s it for this post. I hope you found this tutorial helpful.

Need social media share buttons on your blog? Check out my tutorial on how to add social share buttons to your WordPress website.

Photo credit Pixabay

WP Confidence
WP Confidence

WP Confidence is on a mission to help struggling entrepreneurs get confident with WordPress so they can build a better website and business.

View all posts