WP SITES

Log in

How To Add a 2nd Meta Box for a Different Featured Image

—

by

Brad Dalton

In this tutorial, you’ll learn how to create a custom field with meta box using the Advanced Custom Fields plugin. This is one of the best ways to add a second featured image or post thumbnail in WordPress.

Using a theme framework like Genesis enables you to display the second image in any hook location.

On top of that you can add a conditional tag to control exactly which pages your image displays on.

The meta box also makes it easy to add different images to the same location.

There’s 3 simple steps you need to follow to make all this possible:

  1. Add the PHP code in a function for your custom field and image to your child themes functions file.
  2. Create the custom field & meta box using the Advanced Custom Fields plugin
  3. Upload an image using the new meta box.

The PHP Code

Here’s the code you can copy from the view raw link and paste at the end of your child themes functions.php file using a text editor.

Create Custom Field & Meta Box

Firstly, you’ll need to install the custom fields plugin which makes this happen.

WordPress already include custom fields built into the core. The Advanced Custom Fields plugin extends this feature further so you can also create nice meta boxes customized to your exact needs.

Here’s a step by step tutorial about how to create a meta box which hooks into the code you added to your functions file for the custom field.

Here’s an image showing you the exact settings i used. Click To Enlarge.

custom field and meta box

Need more advanced code for your images? Here’s some code snippets from the plugin author.

Add Second Image

You should now see a new meta box under all edit post screens.

custom meta box

You can easily change the theme specific hook so your image displays in another location and also change the conditional tag as well.

2nd feature image

Custom Image Sizes

Here’s a short tutorial about how to add a custom image size for your new featured image in your child themes functions.php file.

When you add a new size, WordPress will generate an image to that exact size every time you upload a new image.

Related Code Snippets

Comments

36 responses to “How To Add a 2nd Meta Box for a Different Featured Image”

  1. jmelee1221 Avatar
    jmelee1221

    HI Brad,

    I was trying to do this on the Brunch PRO theme and I cant get the secondary image to appear. Am I wrong to assume that this tutorial would give me two images on the homepage like this site >> http://www.kendieveryday.com

    Here is the site I am working on >> http://client3.mlldesigns.com

    Any help is appreciated. Thanks in advance..

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Jamie

      You’ll need to tweak the code to control the output. Where did you want the second image to display?

      Looks like inline with the default, side by side, based on the link you provided?

      1. jmelee1221 Avatar
        jmelee1221

        HI Brad,

        Yes I would like them inline side by side. I can’t seem to get it correctly, and it just doesn’t want to show. So now I am curious is this possible to do on the Cook’d Pro theme?

        1. jmelee1221 Avatar
          jmelee1221

          Sorry I should mention that I only want it to show on the home-top section. This is the site I am working on >> http://client.mlldesigns.com

          1. Brad Dalton Avatar
            Brad Dalton

            Home top uses the featured posts widget which enables you to display featured images for each entry inline.

            You could replace the entire home top widget with code from this tutorial

            Or

            You could modify the featured posts widget to show 2 images per entry.

          2. jmelee1221 Avatar
            jmelee1221

            HI Brad,

            Will this tutorial you linked >> http://wpsites.net/web-design/multiple-featured-images-per-post/ make it so the featured post widget on Cook’d Pro only show a double image on the home-top post NOT on the other sections.

            I am trying to replicate something like this >> http://thestripe.com where the first post at the top has the option to show a double featured image or not. Once it moves away from being the only featured post in the home top section it won’t show a double featured image if that makes sense.

            Any help is appreciated.

            Thanks!

          3. Brad Dalton Avatar
            Brad Dalton

            Hi Jamie

            The code only shows 2 featured images for the first post ( entry ) in a loop and doesn’t work with the widget. You could replace the widget area with the code.

            It seems you want the widget to show the first entry with 2 featured images and all other entries only single image?

            You can do this with i code i wrote otherwise you would need to modify the code in the widget to do the same thing.

            I don’t see 2 featured images in the loop on the page yo linked to.

      2. jmelee1221 Avatar
        jmelee1221

        Ok thanks Brad. The page I linked updated and published a new post so the double feature disappeared.

        So if I update the home-top in the Cook’d theme with the code for the page you linked for archives it should work?

        Right now if I try the code above it still isnt showing two featured images. It shows in the backend of the post the option to add the image, but when I add it- nothing seems to happen or show on either the post or the home page.

        Sorry this is my first time working in ACF, so I am a bit unknowledgeable.

        1. Brad Dalton Avatar
          Brad Dalton

          Do you want to show the same image inline with the featured image for the latest post even when it updates? So the featured image will change for each new posy however the 2nd image displayed inline will remain the same?

          The code only works on archive loops to modify the output. It won’t work on static pages where the loop has been removed and replaced with widgets. You can however use the code in the featured posts widget or a new loop using WP_Query or genesis_custom_loop. There’s 2 parts. 1 The input which uses ACF & 2. the output which is the 2 lines of code.

          You need to decide if you want to use a custom loop or a modified version of the featured posts widget which would require considerable work to modify. Once i have all the answers, i can point you in the right direction.

    2. jmelee1221 Avatar
      jmelee1221

      HI Brad,

      I would like to show the same image inline for the featured image when the post updates. So for instance each post that a double featured image is wanted would update accordingly. Once the new post in the home-top area updates (I am only showing one post in that section at a time) it would be the only one showing the featured image, when the new post changes in the top home area and it moves to the home-bottom area it would only show the main featured image. (I hope that makes sense- it was easier to show with the link to The Stripe before the site updated with the new post).

      SO I am thinking it is a modified version of the featured posts widget probably more than anything.

      Thanks so much for all your help!

      1. Brad Dalton Avatar
        Brad Dalton

        1. You can use a modified version of the genesis featured posts widget. ( This requires much more work than a custom loop. )

        or

        2. A custom loop with the code from my tutorial and wrap it in the home top widget class.

      2. Brad Dalton Avatar
        Brad Dalton

        How about something like this where the top right image is always the same?

        Here’s what happens when a new post is added using a image of a bbq chicken. Note the top right image of a cabbage remains the same.

        1. jmelee1221 Avatar
          jmelee1221

          Hmmmm… That might be able to work. I was thinking of just adding a featured image to the top since I am only showing 1 post in the home-top area.

          This is the site right now <> http://thefashionistasdiary.com where the top is a featured area and shows a double featured image that is only relative to the exact post that is being featured.

          Hope that helps.

          1. Brad Dalton Avatar
            Brad Dalton

            You could do it that way and float it to the right and float one from the featured posts widget to the left.

            I thought you wanted them both linked to the same post?

          2. jmelee1221 Avatar
            jmelee1221

            Hi Brad,

            I do want them both linked to the exact same post. Is that possible? Each time the post updates both featured images if the client choose to use two featured images would update as well accordingly to the post.

          3. Brad Dalton Avatar
            Brad Dalton

            Did you want to show the excerpt or just 2 images? The page you linked to shows multiple entries. Whats the title of the post you are referring to?

          4. jmelee1221 Avatar
            jmelee1221

            Sorry I meant this is the site right now that I am attempting to do this with >> http://client.mlldesigns.com

            And this is what I am looking to do – how just the top has the option to be a double featured image. >> http://thefashionistasdiary.com but as the post moves into not being the most recent it only shows one featured image.

          5. Brad Dalton Avatar
            Brad Dalton

            So you want 2 images inline and then the excerpt?

          6. jmelee1221 Avatar
            jmelee1221

            HI Brad,

            I would like to show both two featured images AND a excerpt. On this page >> http://client.mlldesigns.com the area I am trying to do is the post titled “Just One Last Post”

          7. Brad Dalton Avatar
            Brad Dalton

            Did you want me to code this for you?

          8. jmelee1221 Avatar
            jmelee1221

            OMG yes, if you can? That would be amazing.

          9. Brad Dalton Avatar
            Brad Dalton

            I’ll work out a quote and send it to you as this would require several hours work. Is this what you wanted?

          10. jmelee1221 Avatar
            jmelee1221

            Yes please if you could send me a quote that would be helpful. Then I can send to client and see if she really wants this change. Right now she is 100% deadset on having it.

            Thanks Brad!

  2. Laura Avatar
    Laura

    Follow up question to my September post…

    The photos all look great– I have them at the top of each of my pages, and the custom code to edit them from the edit page screen.

    I have since realized that the alt text for the image is not coming through. The image in the media file has alt text and I can see it in the edit page screen if I swap or edit the image. And of course after swapping/editing I Update the page. But upon inspecting the page there is no alt text.

    Any ideas? Is there something code-wise I need to do to have this come through, or perhaps it’s just a caching issue I can’t figure out.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Laura

      If you added it to the image and see it in the HTML in your text editor, it will be there in the source code. Maybe a caching issue depending on your host or caching plugin.

      1. Laura Avatar
        Laura

        I’m now wondering if it’s not a caching issue, as I can update other photos on my site and see the changed alt tags.

        For the photos that I added with this code, I can see the alt tag text in the media library, and I see it in the Edit Page selecting the photo for edit (which I think is coming from the media library). But when I update the photo or page, I do not see the alt tag text in a browser, even on a computer that has never been to the page before.

        The source only shows alt=””. Which makes sense to me based on the PHP Code in this example. Is there a way to pass the alt tag information along too?

        1. Laura Avatar
          Laura

          I’ve even tried some of the examples at http://www.advancedcustomfields.com/resources/how-to/how-to-get-values-from-a-media-attachment/.

          But haven’t gotten any of them to work properly. Any ideas?

          1. Brad Dalton Avatar
            Brad Dalton

            What you can do is change the Field Type in the settings to a HTML text box and then ad the ALT text to the HTML for each image when you add it in the box.

          2. Laura Avatar
            Laura

            Good suggestion. I had hoped to pull the alt-text from the media library, but your solution of providing an additional text field is working nicely, and certainly got me to the desired results quicker.

  3. Gijsbert Avatar
    Gijsbert

    Thanks for this great website!

    I tried this, but it is giving me the original uploaded image on the post. I selected the correct preview image (in backend) with sizes (250×640).

    Seems I should do some trick with <img src="” alt=”” /> I guess…? Any idea?

    1. Brad Dalton Avatar
      Brad Dalton

      Make sure the field name matches what you have in the code and plugin settings and then upload your second featured image.

  4. Laura Avatar
    Laura

    Hey Brad, that worked great. I’m new to PHP so I wasn’t sure what was possible. Below is my code adapted with a div class. Thanks!

    function custom_field_before_content() {
    if(is_page() && !is_home())
    if( get_field(‘page_header_image’) ):
    echo “”;
    ?><img src="” alt=”” /><?php
    echo "”;
    endif;
    }

    1. Brad Dalton Avatar
      Brad Dalton

      Looks like the code got stripped out of the PHP.

      1. Laura Avatar
        Laura

        Whoops, sorry. Not sure how to post it so you can see it.

  5. Laura Avatar
    Laura

    Super helpful tutorial Brad. I was able to use it, and your links to ‘theme specific hook’ and ‘conditional tag’ to be able to put a wide picture at the top of my pages. I really like that I can now just edit which photo is used from within the edit page screens.

    My only question is…

    If I wanted to then apply CSS to the image, how would I go about doing that, as the custom field isn’t an id or a class? Is that even possible?

    I’m using MetroPro and have moved the photo to the genesis_before hook area. I want my header and nav (and now this photo on pages) to not have the margins padding that the site-container has so I’ve moved them to the genesis_before hook area. I was able to center and set a max-width to the header and nav, but I’m unclear on how to do that with the image. Perhaps it’s not possible?

    1. Brad Dalton Avatar
      Brad Dalton

      You would need to add a div class or id to the PHP code and use that to style each image.

      You could use the page/post i.d or a custom body class first and then the class you add in the code to style each image differently if needed.

Leave a Reply

Join 5000+ Followers

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