Adding Featured Images to Your Website (and Avoiding Duplication)
Hey everyone,
Today I want to discuss the beautifying and optimizing your WordPress site using Featured Images. Not only do these images add a visual appeal to your posts, but they also play a crucial role in enhancing user engagement and even the SEO performance of your website.
What are Featured Images?
Featured images, often referred to as 'post thumbnails', are the primary images that represent your content. They are the first thing your audience sees on your blog roll page, social media shares, and in search engine results. A well-chosen featured image can dramatically increase click-through rates and make your content more enticing ,and it can beautify the homepage of your website (which by default is your blog roll with most Wordpress websites).
Why Use Featured Images?
There are a few reasons that you should consider using featured images, and I want to discuss these. You should be adding featured images as your build out your website, and these are the reasons that validate WHY you should be doing this.
Reason 1: Visual Appeal: They break up text, making your posts more engaging and easier to read. They also beautify the homepage of your website, which will show featured images associated with all of your posts.
Reason 2: Branding: Consistent use of style and color in images strengthens your brand identity. Often times you will see the use of images with text overlays, or images integrated into the featured images that further solidify the branded nature of your content.
Reason 3: SEO Benefits: Images can be optimized with alt tags, contributing to your site’s SEO. Also it improves your overall design of your website, which can also have a bearing on your rankings in search engines.
Alright, we now know the benefits...let's look at the process of adding featured images to your posts.
How to Add Featured Images in WordPress
Adding featured images in WordPress is a breeze. Here's how you do it:
- Choose Your Image: Select an image that is relevant and visually appealing.
- Navigate to Your Post: In your WordPress dashboard, go to the post you want to add the image to.
- Set Featured Image: On the right-hand side, you’ll see a link titled 'Set featured image'. Click on it, upload your image, and voila!
Customizing Your Theme to Avoid Duplication
Sometimes, your theme might display the featured image twice: once as the featured image and again in the post content (typically above the content). If you are seeing a featured image show up above the title of your post, there is a process that you can leverage to remove this.
To avoid this, you can add a little CSS magic in the Custom CSS section of your Theme Customizer.
Here’s the code you need:
.single .featured-image {
display: none !important;
}
This code will hide the featured image from the top of each post, preventing duplication.
How to Add This Custom CSS
- Navigate to Theme Customizer: Go to your WordPress dashboard, click on 'Appearance', => 'Customize'.
- Access Custom CSS: In the Theme Customizer, find the 'Additional CSS' section.
- Paste the Code: Copy and paste the above CSS code into this section.
- Publish Your Changes: Click 'Publish' to save your changes.
Note: While this code is generally effective, it might need tweaking depending on your specific theme.
Using featured images effectively can make a significant difference in how your website content is perceived and engaged with. And with a little bit of customization, you can make sure your site looks just right (no duplicate images).
Experiment, be creative, and watch your site visually come to life! As always, if you have any questions about this process, please leave your comments below.
Recent Comments
309
I struggled with removing the duplicate image above the title. Refreshing after you add the .css code probably won't work. You have to clear cache. My site is hosted on hostinger using litespeed cache plugin. Kyle's CSS code and several others you can find on google worked, but for me only after doing this.
Hi Kyle, I am having problems with adding featured images. When I add a featured image it adds it above the headline. It does not add two images like you were talking about. it only adds one image but it is always above the headline. when I add the code it takes it away and then I have no image. what do I do?
When adding a Featured image, do it within your main content with the block editor. See Images Below
Be sure to follow the instruction in the training and add the CSS code, and they will not duplicate but show in your main content and outside in your blogroll.
Michael
Kyle.... I think the platform has updated somewhat since you recorded this training video.
This was actually one of my most time consuming and frustrating modules yet. I ended up seeing the screen for adding the photo just ONCE... But then lost it, on all posts. I tried following along in my phone while clicking away on the laptop (yes - I finally got the laptop!!! ;) )
Eventually I found a way, but instead of the option being on the right as a highlight photo it was in the "+" menu on the left and I found it as I scrolled down.
I'm figuring it out as I go, but it's only a small video, maybe a small update and re upload will help future people along. Cheers my friend! Hope all is well on the west coast !!
The process is still the same., but if you are using a different theme than the one mentioned, then you may not be able to remove the duplicate issue (or it doesnt' exist) on the theme. Most themes don't have that.
I am going to be refreshing all of the core in the early part of 2025, there have been a few UX changes since the last recording on some of the videos, and the phase 1 videos are updated almost weekly (along with other videos in it).
Thanks for your feedback here Brian. ;)
Thank you Kyle!
Yes the process was the same "but different" but a little fumbling around and I figured it out. As for duplicates they were indeed adding at end of article but in edit mode if I highlighted them they were easily back spaced to be removed.
Loving this ... Wish I was already many steps ahead but staying mindful of going in order ;)
Kyle, someone gave me a code that worked for shrinking the image that is on my homepage. BUT...there is a NEW problem now. When I add YOUR code to make sure there are NOT two images when a person opens the post, the home page image gets big again. Frustrating beyond words. ANY IDEA on how I can add your code and not have the image get big again?????? I go to the css, and add your code, but there is that other code for shrinking the image and if I remove THAT code and add yours only, the picture gets big again PLEASE HELP!!!!
I don't recommend you have a small featured image, your theme is designed to have a much bigger image than this and it looks odd with a small image.
Again, I recommend that you go full width as possible, because if you get into shrinking images down they will look very odd on mobile.
Alternatively, you can choose a different theme if you don't like how the featured images work on your website. There are many that have smaller featured image blocks, but that is theme dependent.
I hope this clarifies for you here. :)
You're saying let the image on the homepage stay so big that it takes up half of the page???? If I don't shrink the image for the homepage it's just too big. It looks very unprofessional. No offense but your answer isn't helpful at all. I'll just stop trying to add a featured image to my homepage. I can't get it to work and no one here has an answer.
looks like it is yt or google for you....
personally i would change the theme to something that works better...
blocksy, kadence, oceanwp, gp, astra are all good lightweight themes...
Kyle uses gp for his training - so anything done in the lessons you will be able to do....
my preference is either blocksy or kadence....they are more customizable when you know what you are doing...
gp is a very good starter theme and a lot go premium with it and are really happy with the upgraded version....
See more comments
Solved. I asked my friend Chatty (ChatGPT) and he advised me to use the following code, which worked immediately:
.single-post .wp-post-image {
display: none;
}
And now, after hours of tension, I could hug the world, as I am so glad I have mastered this challenge. LOl
"Adversity makes the strong stronger and the weak weaker." (Myke Tyson)
Levantem,
Where do you put the "code"?
Janice