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 /*
<?php
the_post_thumbnail( 'small', array('class' => 'custom-class-name' ) );
?>
the_post_thumbnail(#size, #attr) has two parameters available.
- #size
- This is optional and sets the size of the thumbnail based off of previously defined image sizes in your WordPress functions.php file.
- #attr
- 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