Last Updated on October 2, 2020 by Roshan Parihar
In this tutorial, learn how to add class to featured image of the post using WordPress. Add your custom class to the_post_thumbnail function for featured image of the post. Add your responsive class to the featured image to make it responsive.
If you want to apply CSS to the featured image, you may require to add class to perform this. WordPress comes with handy features to achieve this task easily with few additions. You may also like to read 6 best WordPress coupon plugins.
You can add featured images with the below code snippet. This add full width featured image to your blog posts.
|
1 2 3 4 5 |
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?> |
However, You can change this to small and medium also for other image sizes predefined by WordPress.
The featured image is the main and first image of the post in WordPress. To attract your visitors, you add featured image with attractive graphics. By default, the post has no system to add class to the featured image. Here are the tips you can use to add classes.
How to Add Class to Featured Image in WordPress
To add a class to the post thumbnail image or featured of WordPress blog posts. You have to use the below-given code snippet and put the class in the mentioned place. After you add class to featured image, you can inspect the image and check the class name.
|
1 2 3 4 5 |
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full', array('class' => 'enter class name here')); } ?> |
The added class name automatically add CSS defined with the class. You can add your own class name to the featured image. Add responsive classes to your featured image to make it mobile friendly with this method.
Add Multiple Class to Featured Image of Post
You can add a single class or multiple class with this method to the featured image. To add multiple class to the featured image you can use the below code snippet. Replace the class name with your class name and add more classes as per your requirement.
|
1 2 3 4 5 |
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full', array('class' => 'left-align img-responsive my-featured-img')); } ?> |
The above example adds the CSS of the 3 mentioned classes. The .img-responsive class is the bootstrap class to make image responsive.
References
- WordPress StackExchange
- WordPress Developer
- Featured image and post thumbnail in WordPress Developer
Hope, you like this tutorial of how to add class to featured image using WordPress. If you have any query regarding the tutorial, please comment below.
Also tell me, which method you are using to add class to featured image of the post in WordPress.