Featured Image With Category Overlay In WordPress

by

Moving category tag from underneath the content’s excerpt onto featured image is a great idea to save space and make your layout more tidy. Here are 2 steps to complete it in any WordPress installation.

Move Category Into Image Division

Edit Your functions.php File

[Optional]

Create child’s theme. You might have it already, make all the changes to files inside your child’s theme. If for some reason you don’t have it, try to visit theme’s developer website and ask for empty child’s theme or look at documentation on how to create one. It is very common thing and there should be plenty of tutorials on how to approach on the interwebz.

Open your functions.php file and add this code into it:

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 .= '
' . $cat_name->name . '
';
         }
     }
 return $return;
 }

Alternatively Use Code Snippets Plugin

You can download Code Snippets plugin and add the above PHP code into it if you don’t have access to your installation files through FTPS or any other way.

Position Category Within The Image

Use style.css To Position Your Text

Edit your style.css file inside your child theme’s folder and add this code to start with moving your category tag around.

.featured-image-category {
   position: absolute;
   top: 5px;
   left: 5px;
   text-transform: uppercase;
   font-weight: bold;
   background: rgba(177, 168, 218, 0.8);
   color: black;
   padding: 3px 25px;
 }

Alternatively Use Additional CSS Menu

You can also use Additional CSS option from Customize Menu if you don’t have access to the files.

Still Looking For Great Theme?

If you are looking into customizing your theme and kickstart with a good number of ready layouts, try GeneratePress. Best theme in terms of code readibility, design, simplicity and virtually no unnecessary bloat that slow downs sites. Who wants a slow site anyways?

I’m not affiliated with GeneratePress at all, but their UNREAL support on the forums and internet in general is second to none and that’s why they deserve to be advertised in my opinion. You know, just sharing what’s good and tested.