WP SITES

2952 Tutorials & 191 Plugins
Quote

Add Featured Images To Previous & Next Post Nav Links

—

by

Brad Dalton

In this post i’ll show you how to display a copy of your featured image before your previous & next single post navigation links.

Update : This new tutorial includes a better solution which also includes CSS for Media Queries and a placeholder image displayed when no featured image is added.

And here’s an example of what the code does:

featured images

PHP Code

Please copy ALL the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++.

The code uses a genesis hook however you can use any WordPress or theme specific hook otherwise you’ll need to filter the content to add the links after your content on single posts for themes which don’t include action hooks.

The code includes the $in_same_cat parameter which means all single posts within each category are linked together. If you don’t want all posts in all categories linked together, change the value from TRUE to FALSE.

Functions the code uses:

  • next_post_link
  • previous_post_link
  • get_next_post
  • get_previous_post
  • get_the_post_thumbnail

Featured Image Sizes

The above code uses the native medium image size which you can change in Settings > Media > Image Sizes.

If you want to use a different size as to what these settings include, you can add a new image size to your child themes functions file and regenerate thumbnails.

add_image_size( 'image-name', 200, 100, TRUE );

If you change any of the native image sizes, you will also need to regenerate thumbnails if you want to use the new image size for your previous and next post nav links.

CSS Code

The CSS code includes a hover effect for your featured images and a class for both the previous and next post nav links.

What This Code Generates

example

Related Tutorials

17 responses to “Add Featured Images To Previous & Next Post Nav Links”

  1. Gabriel Pinto-Hasagiv Avatar
    Gabriel Pinto-Hasagiv

    Hi,
    10 Years later 🙂 i tried this code with Elementor Next\Prev post widget but it’s not working.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Elementor ruins everything. Just look on any WordPress forum or Facebook page. Save yourself the hassles and get rid of Elementor.

      Reply
      1. Gabriel Avatar
        Gabriel

        Never mind, i figure it out to work like i wanted, Thanks 🙂

        Reply
  2. Summer Avatar
    Summer

    Hey Brad! This snippet is awesome (thank you!), but as-is, it doesn’t pick the correct featured image from the next/prev post in child category, but rather the next/prev post. The link is the correct one for the same category, but the featured image isn’t.

    To get it to work for my site, the conditionals using “get_previous_post” and “get_next_post” also needed to have TRUE passed to them to get the right post: get_previous_post( TRUE )

    Using on a site with one parent “News” category, and many child categories under that, so both need to be true to navigate in the same child category. I guess not as many people do that anymore as I thought?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Thanks for the feedback, always appreciated but lets clarify.

      You could modify the code and then say it doesn’t work for people using in same category pagination which is what i use on this site.

      You could also say it doesn’t work as is for custom post types.

      You could also say it doesn’t work in many other circumstances.

      And how about child of child categories?

      How about tags?

      You could pick any code snippet and say it doesn’t do this and it doesn’t do that.

      Its very easy to customize this code, as you have done, to get it to work the way you want.

      Reply
  3. Håkon Stillingen Avatar
    Håkon Stillingen

    Hi Brad.

    Thank you for providing this. I use your code and did some modifications to it. I wanted to have the name and link for the next and previous post, and since I did not understand how to add title to your previous_post_link and next_post_link functions, I declared it once again in rows bellow yours. Like this;

    This way is probably not the best way to do it, but I noticed a interesting thing. The image link does not always correlate with the featured image and the link text. I am using this post as an example.

    This is however only on some post, and I have not figured out the logic on which post. This is another post where image link does not correlate with the featured image and the link text.

    Any idea what this could be caused by?

    Reply
    1. Håkon Stillingen Avatar
      Håkon Stillingen

      Github Gist embed is not showing in post reply, so I am leaving a link to it just in case this was filtered out. – https://gist.github.com/stillingen/db3ff961c9e67dad2cff

      Reply
    2. Brad Dalton Avatar
      Brad Dalton

      Could be conflicting with other code in your theme.

      It seems you have also modified the code which may or may not be the problem.

      Based on my testing of my code locally, it works perfectly. however there’s at least 20 reasons code doesn’t work on other peoples themes even if it does on yours when testing.

      Sorry but i don’t provide free support for modified code as i have already provided an enormous amount (1245+) of free tutorials as well as my volunteer work on various forums which consists of over 10,000 answers to questions.

      Reply
      1. Håkon Avatar
        Håkon

        Hi Brad.

        Thanks for replying my comment and sharing your competence with me and everyone else viewing your resources. I found out that my problem was related to some of my posts not having the same category, and therefore the featured image did not show. I removed TRUE on in_same_term, and I got it sorted.

        One issue that I ran into now when testing Google custom search, was that the title of the next and previous posts are show as search relevant and links to the page that has the next and previous link. I have tried implementing a filter provided in the below forum post, but have not succeeded. Is this and issue that you also have ran in to?

        http://wordpress.org/support/topic/how-can-i-put-nofollow-attribute-on-next_post_link

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          Thanks for the follow up. Are you referring to the indexing of paginated posts?

          If so, you can no index them but no follow isn’t needed.

          Reply
  4. Furkan Avatar
    Furkan

    Could this code be modified to show each post’s own featured image instead of the one that is already open?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      That’s what it does.

      Reply
      1. Connie Avatar
        Connie

        It doesn’t. Both next and previous links show the featured image of the current post.

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

          That’s only for the demo because i used the same images.

          example

          Reply
        2. Brad Dalton Avatar
          Brad Dalton

          Here’s another screen shot after i copied and pasted the code into a different theme today.

          links

          It shows both the previous and next post featured images every time you click the images.

          Reply
          1. Connie Avatar
            Connie

            It’s fine now, Brad. I put the code in single.php though instead of functions.php and tweaked it a bit so that the post title shows under each photo instead of Previous/Next Post in Category.

            Thanks very much.

          2. Brad Dalton Avatar
            Brad Dalton

            Glad to hear it Connie.

Was This Tutorial Helpful?