WP SITES

Log in

Add or Remove Image Before or After Post Title

—

by

Brad Dalton

There’s at least 3 ways to use PHP code to add featured images before and after single post titles & archives.

  1. There’s code for use with older themes running the old XHTML markup
  2. You can use the new code which works with newer themes running HTML 5
  3. 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:

1-before post title archives

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.

Register for full access

Change Position of Image

You can change the position your image is displayed using at least 2 methods separately or together:

  1. Add a 3rd parameter for positioning priority to your function (recommended for HTML 5 users)
  2. 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.

content archives

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.

Related Code Snippets

Comments

18 responses to “Add or Remove Image Before or After Post Title”

  1. Hannah Avatar
    Hannah

    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.

  2. mark Avatar
    mark

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      I’ll be posting about this later on today i hope.

      Already have one here if you’re feeling generous.

  3. mark Avatar
    mark

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      The best way would be to use a filter to change the hook position for the featured image to [code]genesis_entry_footer[/code]

      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.

  4. Gijsbert Avatar
    Gijsbert

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Gijsbert

      Try this http://wpsites.net/web-design/how-to-add-a-2nd-meta-box-for-a-different-featured-image/

  5. vajrasar Avatar
    vajrasar

    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)?

    1. Brad Dalton Avatar
      Brad Dalton

      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?

      1. vajrasar Avatar
        vajrasar

        Hey Brad. I finally ended up doing this – http://vajrasar.in/moving-first-occurring-image-above-tiltle/

  6. Nancy Seeger Avatar
    Nancy Seeger

    Is this possible to do as a page template instead?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  7. Henry Avatar
    Henry

    Thanks for helping!!!

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Henry

  8. Henry Avatar
    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Looks like you resolved this issue Henry.

  9. Wonkie Avatar
    Wonkie

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.