WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Add Featured Image On Single Posts

Your archives featured image (Post Thumbnail) will be pulled from the featured image regardless of how you add it on your Edit Post screen.

The image displayed before or after your single post entry title is pulled from the 1st image you insert into the post, unless you remove it.

You can remove or modify the code which displays an image before or after your single post entry titles using one of the code snippets on this page.

If you add an image as a featured image, it will be displayed on your archives as a post thumbnail and not as a featured image after your single posts title.

If you don’t add a featured image, the 1st image in your post will be displayed before or after your single post entry titles as well as on your archive pages.

In this post, i’ll provide you with a few lines of PHP code you can simply paste at the end of your child themes functions.php file.

The code will enable you to display your post image, before or after your title on single posts.

post image before single title

Dan asked this question recently:

Been racking my brain searching around, using different code found in this forum and have resulted to making a new post.

Using Minimum Pro, I would simply like to display a post’s Featured Image in a “single post” page. Preferably above the text content. I’ve found code on this forum and put it in functions.php. It’s displayed the Featured Image, but simultaneously wiped-out the text content. So obviously I’m doing something wrong. 🙂

Note: Please use the last PHP code snippet in this post if you’re running the old XHTML markup and not HTML 5 as the hooks have changed.

Display Featured Image After Title

This code displays the image after your single post title.

add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image Before Title

This code displays you image before your single post title.

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image on Static Pages

If you also want this to work for static single pages, simply add page to the code like this:

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'page' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image on Static Pages & Single Posts

If you also want this to work for static pages and posts simply add page to the code like this:

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular() )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

The position your featured image displays can be determined using the third parameter for positioning priority.

In the above code its simply a matter of changing the 3rd parameter from 5 to 15.

Change Image Size

Here’s an example of using a the large size according to your Media Settings.

add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );

function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
		return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) );
printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

You can also use any of the other default sizes configured in Settings > Media.

  • thumbnail
  • medium
  • large
  • full

You can also use any custom sizes you’ve added in your functions file.

Example:

portfolio

add_image_size( 'portfolio', 540, 340, TRUE );

Using Old XHTML Loop Hooks

If your still running XHTML and haven’t yet converted to HTML 5, you will need to use the old Loop Hooks:

add_action( 'genesis_before_post_title', 'single_post_featured_image' );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	}

Adding Space Between Title & Image

Here’s some sample CSS code you can add to the end of your child themes style.css file before the code for Media Queries which adds a margin between your featured image and your entry title on single posts.

.single .post-image {
margin-bottom: 30px;
}

Use this sample for pages:

.page .post-image {
margin-bottom: 30px;
}

Align Featured Image (post-image) Right

You can also align your post images to the right.

Simply add this CSS code before your Media Queries near the end of your child themes style.css file:

.single .post-image {
    float:right; 
    margin:0 0 1em 1em;
    width: 285px;
    height: 285px;
}

The above code will align the image you add as a featured image in all single posts to the right of your content so its text wrapped like this:

post image

You can also add the alignright class to the PHP code rather than use CSS.

'class' => 'alignright'

Simply replace post-image in the PHP code with alignright and your text will wrap around your image on the right hand side of your content.

Align Featured Image (post-image) Left

You can also align your single posts featured images to the left.

.single .post-image {
    float:left; 
    margin: 1em 1em 0 0;
    width: 200px;
    height: 200px;
}

And here’s the result:

float left

You can also add the alignleft class to the PHP code rather than use CSS.

'class' => 'alignleft'

Simply replace post-image in the PHP code with alignleft and your text will wrap around your image on the left hand side of your content.

Note: This CSS code applies to Genesis 2.0 HTML 5 child themes and may not work on other themes which use a different class for post images/featured images.

Remove a href Link from Featured Image

A member asked me how to remove the link from the code so here it is:

Simply replace this part of the code:

$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

With this:

$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	echo $img;

Related Posts

Reader Interactions

Comments

  4. Unfortunately this solution didn’t work for me. I want the Featured Image to show up under the title in a single post page, on my site.

    I pasted this code at the bottom of the child theme’s functions.php file and the featured image still doesn’t show:

    Thank you for any additional clarification!

    • Hello Robin

      1. You’ve grabbed the code which displays before the title.
      2. You’ve embedded the code without wrapping it in code tags so it breaks the site of anyone else who uses it.
      3. You haven’t used the code which displays after the title and uses a 3rd parameter of 15 to do this.

      There’s more than 1 snippet on this post. Please read the entire article and make sure you use the correct snippet.

      Also, as indicated, use a code editor to add the code in your file correctly.

      Please let me know if you’re still having trouble following these instructions.

      Here’s a video showing you how to add the code.

      • Hey Brad,

        Thanks so much for the detailed video…very personalized service!

        Anyway, I am still confused because actually I had done, and have now repeated, the steps exactly as you laid out in the video. I use Text Wrangler always. I copied and pasted the first snippet, then I tried another one, just to see if that would have any effect (that is what you saw when you checked my file).

        Screenshot of my functions.php file in Text Wrangler:
        https://www.dropbox.com/s/9iqwenud00u73pa/Screen%20Shot%202015-11-01%20at%201.29.24%20PM.png?dl=0

        I really have no idea what I’m doing wrong, and I’m sorry if this seems elemental. Perhaps it’s my child theme? It’s an older 3rd party one, from 2011, not even on StudioPress any more.

        • Hi Brad,
          well, it seems the version of my child theme was the issue. I had also contacted CopyBlogger support and they referred me to this page,
          http://www.wpstuffs.com/insert-featured-image-above-posts/

          and I tried this code, which works:

          For Genesis XHTML markup (1.x and below)

          /* Code to Display Featured Image on top of the post */
add_action( 'genesis_before_post', 'featured_post_image', 8 );
function featured_post_image() {
  if ( ! is_singular( 'post' ) )  return;
	the_post_thumbnail('post-image');
}

          So, it seems I didn’t copy and paste wrong after all… 😉

          thanks again,
          Robin

  6. Great article!

    Qq, I would like to replace the featured image link with an advanced custom field link.

    I changed the last line to:

    printf( '<a href="' . esc_url(the_field('custom-field-url')) .'" title="%s" rel="nofollow">%s</a>', the_title_attribute( 'echo=0' ), $img );

    That outputs the custom field but doesn’t replace it as a hyperlink… what am I doing wrong here?

  7. Hi Brad

    I added this code to add the featured image before post title to the bottom of my functions php via the editor in wp-admin but no changes have taken place – am i missing something ?

    i’m using the generate theme

    thanks yet again for your help

  8. Hi,

    Used your code and it worked like a charm! Many Thanks. However, need your help in displaying the featured image on the Blog page, before the title of each post. I am on a deadline and I’ve looked everywhere but can’t seem to find a solution. Appreciate your help.

  10. Hi, Brad!

    Thanks for the handy snippets! I was curious how I could make this display only the featured image for a page, and not display the 1st image in your post if there isn’t a featured image.

    Thanks in advance!
    -Cara

  13. Thanks so much for this post. Very helpful, and exactly what I was looking for, looks like a couple other people have asked this and it didn’t get answered.

    How do I have the image inserted into the post link to the full size image in the media library rather than linking back to its own post URL?

    Thanks again!

    • Hello Jason

      I did include a link in the related posts to code which works on any theme and includes code which links the image to the image URL rather than the permalink.

      There are many ways to do this, one of which maybe simply removing the_permalink() tag from the code or using code in the related posts article or code like this:

      • Thanks so much for taking the time to respond to this, and for doing it quickly on a weekend none the less. I tried removing the_permalink() tag and it resulted in the following error.

        Warning: printf() [function.printf]: Too few arguments in /home/devikt/public_html/wp-content/themes/iknowtech/functions.php on line 227

        I tried the code on Related Posts Link, sorry missed that initially, and its seems to achieve the same thing in placing the image in the post, but it with this method it doesn’t link to anything.

        Is the code you pasted above in answer to my question supposed to be used in addition to what’s already done as discussed in this Main Post?

        Sorry you’ll have to bear with me, the PHP side of this is a bit outside my current depth.

        • You can’t remove the_permalink() tag without replacing it with something else.

          You can use the code from the related posts or modify my code.

          There are hundreds of variables so i only include the basics which may need modifying.

  14. Brad,

    This post really helped me get out of a snag. Thanks for covering this issue!

    I have a question about links. Right now the image hyperlink takes the user to the post. I’d love for the link to take the user to an external link that is specified in the post editor using a custom field. Can you recommend anything to get that working?

  15. Thank you, thank you, thank you.

    I just do NOT GET IT! Why in heaven’s name would you DISABLE “Featured Images”? Makes absolutely NO SENSE to me.

    You fix is easy and understandable – thank you again! But, dude, it should be unnecessary, no?

    I’m really beginning to believe the ONLY WAY to write a theme is to start with UNDERSCORES!

    • Hello John

      Disable them where? On single posts or archives?

      Underscores would be great for experienced parent theme Developers but extremely challenging for non coders.

  17. I use Genesis with Magazine.
    On the blog page I had feature images displaying on the left with the text on the right, aligned up against the images. However, since the Genesis Theme update the text is below the image.
    How do I get the text aligned next to the image again? Any information would be most appreciated.
    You help in advance is very much appreciated.
    Thanks and regards.

  18. Hi Brad,

    thanks for the snippets! It works great.

    But one small thing … how can I remove the link from the image? I don’t need it.

    I would very much appreciate if you could help me! 🙂

    Greetings
    Vladislav

  19. Hello Brad
    i’m new to Genesis and coding. I’ve just pasted your code to show the featured image after post title. I want to show a large image but the image appears small in the post and aligned left. What am doing wrong? this is my site

    Hope you can help
    Colleen

  21. Brad,
    Thanks for all the tutorials. I have used a lot of them and they save me a lot of time. I do have one question.

    I want to use a 150X150 featured image and place it beside my post title/info. I have looked high and low for this and cant seem to find it. having the image above the title works but it leaves a lot of blank space since my images are small.

    I am using the old news theme not the new html5 version. Any help would be appreciated. I had it working by using a table in the simple hooks plugin. I tried to upgrade to the news pro and it wiped that code out and I cannot find it anymore.

    I was just uploading a featured image and it would display a 150X150 image next to my title. Your code above works but if one of my writers puts in a bigger image it gets big. Any advice?

    • You always need to crop the featured images to the exact same size before uploading.

      You can float them to the left or right of the title or post meta(info) using CSS code.

  22. Thanks so much for this Brad. Fyi in case anyone had trouble getting the image to display after the title: I tried the code you posted under “Display Featured Image After Title” but it displayed the feature image before the title. I looked up the hooks and changed genesis_entry_header to genesis_before_entry_content and now it’s displaying after the title.

    • Really? That’s strange because i test all code. Just tested it again as well and it displays after the post title.

      Did you add the 3rd parameter of 15?.

      Thanks for the feedback Annabel.

      • Hi Brad,

        I read your article about the 3rd parameter but didn’t understand it–I’m not a tech person, and I have very little clue about what all this means, so that certainly should be taken into account. All I did was copy and paste your code exactly. When I saw that the image was appearing before the title, I looked at the hook reference on the StudioPress website, decided to try substituting ‘genesis_before_entry_content’ in place of ‘genesis_entry_header’ and it worked.

  23. Hi, how do I make it so that the image on the single post doesn’t contain a link? I’ve tried this method and it works in terms of getting the featured image to show on the single post page, but it strangely links to itself, which is what I want to remove. Thanks.

  24. Brad, thanks for all your detailed work above. I just switched over from Woothemes this weekend to Genesis (though I miss the Woothemes dashboard. Much easier to use and make changes for us non-techies :-). Normally with Woothemes, the featured image pulls in next to the title (no need to make any setting changes). So I tried adding your code snippet to the CSS Style Sheet Editor page and nothing is showing up on my single post pages (they do on the archive page).

    .single .post-image {
    float: left;
    margin: 1em 1em 0 0;
    width: 200px;
    height: 200px;
    }

    I’m using the magazine pro child theme. Am I missing something?

    Note: I also tried adding the code snippet for adding the image above the title and when I clicked save settings, it deleted half of the code.

    Any help would be appreciated!

    Bruce

    • Hello Bruce

      I just tested this code and it displays the featured image before the post title on single posts.

      add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '<a href="%s" title="%s" rel="nofollow">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

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

      You can then add CSS code at the end of your child themes style.css file if needed.

  25. it helped me to find a way displaying the featured image on single pages, now.

    just removed
    “if ( is_page() ) return;”
    in the
    “function streamline_post_image() {”

    thanks!

  26. I also noticed that the featured image thumbnail links to the post itself. Is there any way that the thumbnail can link to the original image as opposed to the post?

  27. Hi Brad, thanks for code. I used the old XHTML loop hook. How would I apply the code to display featured images on archived category pages? Also, my text doesn’t wrap around the featured image. How can I get it to wrap?.

    Thanks in advance,

    🙂 Eric

  29. Excellent! Thanks
    Now, if I want to use a different image size do i register:

    //* Add new featured image sizes
    add_image_size( ‘feat-post’, 700, 300, TRUE );

    And change ‘post-image’ with ‘feat-post’?

    And then regenerate thumbnails?
    Thanks!

    • Hello Francesca

      As long as its unique or you can use any of the sizes in Settings > Media.

      I don’t know what theme you are using and what sizes you are currently using either.

      Don’t forget WordPress will generate an extra size image for every image you upload if you add more sizes to your functions.php file.

      This will be fine but better aspect ratio is:

      add_image_size( 'feat-post', 700, 350, TRUE );

      If you haven’t added a feature image, it won’t automatically add one. If you have, use the regenerate thumbnails plugin after adding the new sizes and code to your theme.

      I would test locally first.

Leave a Reply