There’s at least 3 ways to use PHP code to add featured images before and after single post titles & archives.
- There’s code for use with older themes running the old XHTML markup
- You can use the new code which works with newer themes running HTML 5
- And there’s also code which works based on the Genesis > Theme Settings > Content Archive settings
Here’s an example of what your featured images will look like on both single posts and archive pages using any of these code snippets:
Here’s the PHP code you can paste at the end of your child themes functions.php file.
And the CSS code you can add at the end of your child themes style.css file to display an image before your post title on archive pages and single posts.
Change Position of Image
You can change the position your image is displayed using at least 2 methods separately or together:
- Add a 3rd parameter for positioning priority to your function (recommended for HTML 5 users)
- Change the hook position (for either XHTML or HTML 5)
Fixing Double/Duplicate Post Archive Images
If you’re finding 2 images are being displayed on your archive pages like your blog or home page, it may be because you have the above default code in your functions file depending on which child theme you are using.
Go to Genesis > Theme Settings and uncheck the Include the Featured Image box and remove the above code from your child themes functions.php file.
Some of the StudioPress child themes like Streamline include the code by default to display an image before all posts titles on both single posts and archives pages.
If you’ve already set a featured image, you’ll see both a thumbnail and full size image on your archive pages which may not be what you want displayed.
Another reason is that you you may have added the image before the content in your editor rather than using the code to display the image you add as a featured image.
18 replies on “Add or Remove Image Before or After Post Title”
I am having the issue where in my blog page, I see both the full size image and the thumbnail. I am confused about what code to delete from my child theme to prevent this.
That’s probably beyond my current coding skill set but I’m very interest in your upcoming post.
Have you thought about adding a tip jar?
I’ll be posting about this later on today i hope.
Already have one here if you’re feeling generous.
Hi Brad,
You site is extremely helpful – thank you!
How would one add featured images after post titles and post meta for Featured Posts on the home page?
I’d like my home page to look like my category page and single post pages.
The best way would be to use a filter to change the hook position for the featured image to
However, what you could also do is hide the default featured image on the home page only and then hook in another conditionally with the new hook position.
Will write a post about this shortly however i may not include the best solution until i work it out late on this week.
Hi Brad,
Thanks for the code to add the featured image to a post. Is there any way to add a second featured image to a post in a genesis child template? Can’t find a working solution.
Thanks!
Gijsbert
Hello Gijsbert
Try this http://wpsites.net/web-design/how-to-add-a-2nd-meta-box-for-a-different-featured-image/
What if we have to use first image of content and display it above title and later delete that first image from the content itself (to remove image showing twice – above title and in content)?
Don’t use first image of content unless you’re comfortable leaving it there.
What’s the problem with using the featured image function all WordPress installations include?
Hey Brad. I finally ended up doing this – http://vajrasar.in/moving-first-occurring-image-above-tiltle/
Is this possible to do as a page template instead?
Hi Nancy
There’s many ways you can do this.
Creating a template with a custom meta box for uploading an image before or after your templates title is one of them.
Of you can simply hook in the image conditionally.
Thanks for helping!!!
No worries Henry
Hello. Would anyone be willing to take a look at my site. It’s displaying two duplicate images at beginning of blog post on blog page. Also, it’s displaying the very last photo in the blog post at the top of the blog post in older posts. Not sure what the heck is happening. Any help?
Looks like you resolved this issue Henry.
Thanks for this Brad – we’re just upgrading our website to Genesis and we’ve been trying out the Streamline child theme… just couldn’t figure out why some of our posts had an image displayed right before the page title and in the post itself until I came across this post.
Hopefully it will not be too challenging to get just the thumbnail displayed in the archives!
No worries Wonkie
As long as you have added a featured image to each post, its simply a matter of using the Genesis > Theme Settings > Content Archives.
Otherwise I have written a post about auto displaying featured images/post thumbnails.