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

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:

GeneratePress Theme Tutorial: How to Add the Blog Post Category Name over Featured Image 3 — New Category Name Location

Keep reading to learn how it’s done.

Table of Contents

Watch the Video Tutorial

Keep reading to follow the written steps.

How to Move the Blog Category Name On Top of the Blogroll Featured Image

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_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.

Step 2: Remove the old category name

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

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

Step 3: Customize the Overlay Text

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

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:

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.