• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add or Remove Image Before or After Post Title

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

  • Checkbox To Add or Remove Featured Image on Individual Posts or Pages

Featured Image

Reader Interactions

Comments

  1. Hannah says

    October 18, 2014 at 5:00 am

    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.

    Log in to Reply
  2. mark says

    December 5, 2013 at 5:53 pm

    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?

    Log in to Reply
    • Brad Dalton says

      December 5, 2013 at 6:26 pm

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

      Already have one here if you’re feeling generous.

      Log in to Reply
  3. mark says

    December 5, 2013 at 4:59 pm

    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.

    Log in to Reply
    • Brad Dalton says

      December 5, 2013 at 5:43 pm

      The best way would be to use a filter to change the hook position for the featured image to

      genesis_entry_footer

      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.

      Log in to Reply
  4. Gijsbert says

    November 4, 2013 at 9:28 am

    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

    Log in to Reply
    • Brad Dalton says

      November 4, 2013 at 6:44 pm

      Hello Gijsbert

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

      Log in to Reply
  5. vajrasar says

    September 12, 2013 at 8:54 am

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

    Log in to Reply
    • Brad Dalton says

      September 12, 2013 at 11:42 am

      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?

      Log in to Reply
      • vajrasar says

        November 5, 2013 at 6:32 am

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

        Log in to Reply
  6. Nancy Seeger says

    September 9, 2013 at 7:41 pm

    Is this possible to do as a page template instead?

    Log in to Reply
    • Brad Dalton says

      September 10, 2013 at 10:21 am

      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.

      Log in to Reply
  7. Henry says

    August 19, 2013 at 6:00 am

    Thanks for helping!!!

    Log in to Reply
    • Brad Dalton says

      August 19, 2013 at 11:58 am

      No worries Henry

      Log in to Reply
  8. Henry says

    August 19, 2013 at 6:00 am

    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?

    Log in to Reply
    • Brad Dalton says

      August 19, 2013 at 12:01 pm

      Looks like you resolved this issue Henry.

      Log in to Reply
  9. Wonkie says

    June 12, 2013 at 4:45 pm

    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!

    Log in to Reply
    • Brad Dalton says

      June 12, 2013 at 4:50 pm

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.