WP SITES

Log in

2 Ways To Use Different Featured Images For Single Posts & Archive Pages

—

by

Brad Dalton

There’s at least 2 ways you can add a unique image to single posts which is different to whats displayed on archive pages in Genesis.

Here’s the demo video:

There’s 2 steps to make this happen.

Step 1 : Add a input field for the image URL or upload field for the 2nd image. This can be done 2 ways:

  1. You can add a 2nd image upload field to the Edit Post page which enables you to easily upload a 2nd image for single posts. This can be done 2 ways using a plugin like ACF or hand coding the image upload field.
  2. You can use the custom fields meta box native to WordPress to add the image URL for your single post featured image.

Step 2 : Add code to display the image on single posts. Note: All code goes at the end of your child themes functions file.

Here’s the code and instructions for logged in members:

Register for full access

Related Tutorials

Comments

4 responses to “2 Ways To Use Different Featured Images For Single Posts & Archive Pages”

  1. Aimee Devlin Avatar
    Aimee Devlin

    Hi Brad! Thanks for this tutorial! 🙂 I’m seeking to use separate featured images on Gallery Pro for the homepage, for the blog header, and for the normal featured image (and they’re all different sizes!). I’ve managed to get your code to work as you intended, but it wasn’t until after that I realised it’s not quite appropriate for my instance!

    I wonder if it’s possible to use third_image in the same way you used second_image?

    And I’m wondering how to tweak the code to call in the image for the separate areas? If I’m asking too much, just let me know!

    Cheers,
    Aimee

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Aimee. Valid question.

      I assume you want to use a unique image in the site header for each post/page?

      How many different sizes and what are the exact sizes?

      Yes, i’m happy to extend the code for a 3rd image. There’s different methods to do this.

      I could add a check box ( already coded ) which enables you to choose which size image to use on each post.

      separate areas? Can you be more specific and provide the different hook positions.

      Once i have a clearer understanding of what you want i’ll code the solution.

      1. Aimee Devlin Avatar
        Aimee Devlin

        You’re fabulous 🙂

        Gallery Pro includes a site header image that is full width behind the post title. It’s currently populating from the featured image, but the issue here is that I need to use an image without text on it so that the post title is easy to read. The image on this header (single post) appears to be “bbs_single_post_header”. I’m finding it hard to find the size, but would love to know!

        The main featured image is sized at 1200w x 630h. (I guess this should be the main featured image as this is the size that shares best on Facebook.

        The featured image on the front page blog roll/archive is sized at 600w x 800h.

        So it seems it’s not hook positions that I’m after, it’s how to alter the code so that each of these image sizes/positions are able to be uploaded and show up in the right spots!

        I hope that makes sense? Thank you!

        1. Brad Dalton Avatar
          Brad Dalton

          Looks like you want to use a different image for single posts and a different image for archives? Either way, i left a message on FB so we can chat live and sort it out.

          FYI There is no image size set for the single post entry title background.

Leave a Reply

Join 5000+ Followers

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