WordPress Custom CSS Image Class

Looking for a simple way to add a custom CSS image class to WordPress thumbnails without adding another <div> or wrapper around them? Maybe you have multiple WordPress loops on one page and you want to be able to style your images separately in each loop. Maybe you just like complete control over your naming conventions.

Follow this simple step and be on your way to customized images in your WordPress loop.

the_post_thumbnail() Attributes

When you add the thumbnail to your loop using the the_post_thumbnail() function, use the #attr parameter as below:

*/ Adding the class "custom-class-name" to the <img> tag /*
the_post_thumbnail( 'small', array('class' => 'custom-class-name' ) );

the_post_thumbnail(#size, #attr) has two parameters available.

This is optional and sets the size of the thumbnail based off of previously defined image sizes in your WordPress functions.php file.
This is where you can add additional data to the <img> tag for the thumbnail. This is not limited to just adding the CSS class, you can add any additional attributes you like to the <img> tag at this point.

Leave a comment and let me know how this works for you or if you have other ideas!







Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.