WordPress Guides

How To Display Featured Image In WordPress

How To Display Featured Image In WordPress

Featured images play a crucial role in enhancing the overall visual appeal of your WordPress website. They serve as attention-grabbing thumbnails that accompany your posts, making them visually appealing when shared on social media platforms or displayed on your website. In this comprehensive guide, we will walk you through the steps of displaying featured images in WordPress, so you can make the most of this powerful feature.

Setting Up a Theme with Featured Image Support:

Firstly, ensure that your WordPress theme supports featured images. You can check this by navigating to the "Appearance" tab and then "Theme Editor." Look for the "functions.php" file within your active theme. Locate the "add_theme_support" function and ensure that it includes "post-thumbnails" as one of the supported features.

Once you've confirmed featured image support, proceed to the next step.

Assigning Featured Images to Posts:

To assign a featured image to a post, navigate to the post editing screen. Look for the "Featured Image" box on the right-hand side. Click on the "Set featured image" link, and a media library modal will appear. Choose an image from your media library or upload a new one. Once selected, click on the "Set featured image" button to assign it as the featured image for that particular post.

Displaying Featured Images in Your Theme:

To display the featured image on your website, you can use the following methods:

1. Displaying in Post Content:

Open the theme file where you want to display the featured image, such as "single.php" for single post pages or "archive.php" for archive pages. Locate the area where you want the featured image to appear and use the code:



This will automatically display the featured image in the specified location. You can customize the appearance by adding additional attributes or wrapping the code inside HTML elements.

2. Displaying as a Background Image:

If you prefer displaying the featured image as a background image, you can use CSS to achieve this effect. Add the following code snippet in your theme's CSS file or use a custom CSS plugin:


.post {

background-image: url('');

background-size: cover;



This will set the featured image as the background image for the designated element, such as the post container with the class "post."

How To Display Featured Image In WordPress Example:

Imagine you run a travel blog, and you want a visually appealing layout that showcases the featured image of each destination. By following the steps outlined above, you can easily assign featured images to your travel posts and display them prominently using the provided code snippets. This way, your readers will be enticed by stunning visuals when browsing your travel blog, increasing engagement and attracting more visitors.

Now that you've learned how to display featured images in WordPress, take your website to the next level with DamnWoo's incredible plugins. Our products are specifically designed for small businesses and entrepreneurs, offering unique solutions to supercharge your online presence. Don't settle for ordinary; choose DamnWoo for extraordinary results. Share this article with others who might find it helpful and explore our other guides to further optimize your WordPress website. Don't hesitate, try one of our awesome plugins today!


About Paul Waring

Paul Waring is a seasoned veteran in the WordPress ecosystem, bringing over 15 years of insightful experience as a Senior WordPress Developer. An aficionado of digital landscapes, Paul's deep-rooted passion for technology has led him to master the art of crafting functional, responsive, and aesthetically pleasing websites. As an early adopter of WordPress, Paul has witnessed and contributed to its exponential growth, helping businesses of various sizes worldwide leverage its vast array of features. His work ranges from developing intricate e-commerce solutions to optimizing site performance and enhancing UX/UI design. His forte lies in integrating progressive solutions that dovetail seamlessly with WordPress, which he is excited to share with the DamnWoo community. Away from the digital world, Paul relishes the physical and mental challenge of rock climbing - a hobby that mirrors his approach to problem-solving in web development. He finds both activities require an optimal blend of strategy, creativity, and determination to surmount seemingly insurmountable problems. Just as he scales rocky edifices, he enjoys tackling complex coding challenges and finding efficient solutions. Paul brings to DamnWoo his rich expertise, diverse experience, and his contagious enthusiasm for WordPress. He aims to demystify the often intricate world of WordPress, making it more accessible and usable for all - whether you're a seasoned developer, a tech-savvy business owner, or a curious beginner in the digital realm.

Related Posts