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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • 2 Ways To Use Different Featured Images For Single Posts & Archive Pages
  • Entry Title Over Featured Image On Single Posts
  • Checkbox To Add or Remove Featured Image on Individual Posts or Pages
  • Link Featured Image to Custom URL
  • Customise The Display of Featured Images On Single Posts
  • Add Featured Image Before Content In Any Theme
  • Set Fallback Featured Image For Each Category

Featured Image

Reader Interactions

Comments

  1. Canberk says

    May 23, 2018 at 11:32 am

    How to float text right hand side of thumbnail in eleven40 pro? I’m basically trying to do exactly this:

    https://demo.studiopress.com/eleven40/image-aligned-left/

    I couldn’t get the code in your post work… Would truly appreciate your help.

    Regards,

    Log in to Reply
    • Brad Dalton says

      May 23, 2018 at 11:37 am

      The answer for this is already included in this post :

      'class' => 'alignleft'
      Log in to Reply
      • Canberk says

        May 23, 2018 at 11:41 am

        I did that.

        Not only it doesn’t work, but also when it’s “class” only a portion of thumbnail shows (originally it is 300W x 600H – it shows 270W x 100H like they’re in archives).

        When I change it to “alignleft”, the image completely disappears.

        Log in to Reply
        • Brad Dalton says

          May 23, 2018 at 11:55 am

          Works perfectly as you can see in the following screenshot taken after re-testing the code. You must have a problem with your code.

          Make sure you’re using the genesis_entry_header hook

          Log in to Reply
      • Canberk says

        May 23, 2018 at 11:54 am

        Can it be because I use Thrive Architect?

        Log in to Reply
        • Brad Dalton says

          May 23, 2018 at 11:57 am

          Disable the plugin and see if the code works.

          Log in to Reply
  2. Prashanth says

    February 7, 2018 at 10:41 pm

    Thanks a lot. It worked for me on my atmosphere child theme. As a side note, I found this post from your YouTube video.

    Log in to Reply
  3. Jithin Roy says

    September 17, 2017 at 2:18 am

    i have used your code for adding the image before the title . i have make it full width .please help me in this situation.

    Log in to Reply
    • Brad Dalton says

      September 17, 2017 at 12:22 pm

      Code modification is reserved for premium members only.

      Log in to Reply
  4. rkread59 says

    October 31, 2015 at 6:02 pm

    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!

    Log in to Reply
    • Brad Dalton says

      October 31, 2015 at 10:14 pm

      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.

      Log in to Reply
      • rkread59 says

        November 1, 2015 at 10:59 am

        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.

        Log in to Reply
        • rkread59 says

          November 1, 2015 at 12:45 pm

          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

          Log in to Reply
          • Brad Dalton says

            November 2, 2015 at 12:42 am

            I should have mentioned the hooks are different for older themes running XHTML markup.

  5. athlone says

    November 24, 2014 at 6:32 pm

    Thanks for the great tutorials and guides, much appreciated.

    Log in to Reply
    • Brad Dalton says

      November 24, 2014 at 10:51 pm

      No worries.

      Log in to Reply
  6. Teo says

    October 15, 2014 at 9:56 am

    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?

    Log in to Reply
    • Brad Dalton says

      October 15, 2014 at 10:01 am

      You need to Pay the membership fee to get unlimited answers for 1 month http://wpsites.net/registration/

      Log in to Reply
  7. tom martin says

    September 24, 2014 at 8:57 pm

    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

    Log in to Reply
    • Brad Dalton says

      September 24, 2014 at 9:02 pm

      Which code?

      Log in to Reply
  8. Was says

    September 8, 2014 at 10:27 am

    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.

    Log in to Reply
    • Brad Dalton says

      September 8, 2014 at 10:53 am

      Happy to help Was.

      Please use the contact form for your request.

      Log in to Reply
  9. Joe says

    August 21, 2014 at 9:31 am

    Thanks, this worked great on my site.

    Log in to Reply
    • Brad Dalton says

      August 21, 2014 at 11:45 am

      No worries Joe.

      Thanks for stopping by.

      Log in to Reply
  10. Cara C. says

    July 31, 2014 at 9:07 pm

    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

    Log in to Reply
    • Brad Dalton says

      July 31, 2014 at 11:13 pm

      Try this Cara http://wpsites.net/web-design/prevent-genesis-2-0-archives-from-using-first-image-in-content-area-as-featured-image/

      Log in to Reply
      • Cara C. says

        July 31, 2014 at 11:51 pm

        You’re awesome!

        Log in to Reply
        • Brad Dalton says

          August 1, 2014 at 12:16 am

          If i’ve helped Cara, please give me a link. Thanks

          Log in to Reply
  11. Niks says

    July 29, 2014 at 10:26 am

    How do I move title to left or right of featured image like this http://i.imgur.com/Ufuz9P1.jpg

    Log in to Reply
    • Brad Dalton says

      July 29, 2014 at 10:41 am

      I can’t even see the title. Where exactly do you want it?

      Log in to Reply
      • Niks says

        July 29, 2014 at 11:27 am

        Did you see the image ?

        Log in to Reply
      • Niks says

        July 29, 2014 at 11:33 am

        Like this http://s28.postimg.org/pb4hite6l/Capturerrrrr.jpg . I want to move the title and the post excerpt to right of featured image .

        Log in to Reply
        • Brad Dalton says

          July 29, 2014 at 9:05 pm

          Yes. Already written about how to do that.

          Log in to Reply
          • Niks says

            July 29, 2014 at 10:25 pm

            The post title is either below or above the image . Not on the same line . Also post meta and post info doesn’t move .

          • Brad Dalton says

            July 30, 2014 at 2:45 am

            Link to your site please. You are using the wrong tutorial.

          • Niks says

            July 30, 2014 at 7:03 am

            The site is not online yet . I am designing it locally on my computer . Which tutorial should I follow ? Link please

  12. Niks says

    July 29, 2014 at 10:21 am

    How do I put title to left or right like this http://i.imgur.com/Ufuz9P1.jpg

    Log in to Reply
  13. Jason Brantley says

    July 26, 2014 at 8:27 pm

    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!

    Log in to Reply
    • Brad Dalton says

      July 26, 2014 at 8:38 pm

      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:

      Log in to Reply
      • Jason Brantley says

        July 26, 2014 at 9:24 pm

        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.

        Log in to Reply
        • Brad Dalton says

          July 27, 2014 at 12:08 am

          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.

          Log in to Reply
  14. Sam Andrus says

    July 18, 2014 at 3:49 pm

    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?

    Log in to Reply
    • Brad Dalton says

      July 18, 2014 at 3:56 pm

      Hello Sam

      You need custom code for that.

      Will need to be written as i haven’t seen anything like that before.

      What i would test is changing the_permalink() to genesis_get_custom_field().

      Log in to Reply
  15. John Orban says

    July 8, 2014 at 12:23 am

    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!

    Log in to Reply
    • Brad Dalton says

      July 8, 2014 at 10:14 am

      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.

      Log in to Reply
  16. Aaron says

    July 2, 2014 at 4:21 pm

    Just what I needed. Thanks for posting this and being easy to follow.

    Log in to Reply
    • Brad Dalton says

      July 2, 2014 at 4:26 pm

      No worries Aaron.

      Log in to Reply
  17. Neil Roach says

    July 1, 2014 at 11:45 am

    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.

    Log in to Reply
    • Brad Dalton says

      July 1, 2014 at 11:55 am

      Hello Neil

      I’d check the Genesis > Theme Settings > Content Archives again.

      Otherwise you may need custom code.

      Log in to Reply
  18. Vladislav Melnik says

    June 17, 2014 at 1:36 pm

    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

    Log in to Reply
  19. Colleen says

    June 6, 2014 at 3:56 am

    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

    Log in to Reply
    • Brad Dalton says

      June 6, 2014 at 8:35 am

      You can change both the size and the alignment in the code.

      Try using full for the size and alignnone for the class.

      Log in to Reply
      • Colleen says

        June 6, 2014 at 8:43 am

        Hello Brad

        Thanks but I’m new to this and not sure where to insert this.

        Is it o.k to use this code that you provided instead?

        Log in to Reply
  20. Jen Raiche says

    April 22, 2014 at 8:00 pm

    This worked great on a WP website I’m working on. Thank you!!

    Log in to Reply
    • Brad Dalton says

      April 23, 2014 at 1:47 am

      No worries Jen.

      Log in to Reply
  21. Robert says

    January 19, 2014 at 11:22 pm

    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?

    Log in to Reply
    • Brad Dalton says

      January 20, 2014 at 2:05 am

      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.

      Log in to Reply
  22. Annabel says

    January 16, 2014 at 8:09 am

    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.

    Log in to Reply
    • Brad Dalton says

      January 16, 2014 at 8:42 am

      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.

      Log in to Reply
      • Annabel says

        January 16, 2014 at 9:08 am

        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.

        Log in to Reply
        • Brad Dalton says

          January 17, 2014 at 12:35 am

          Maybe you’re using a theme which uses XHTML markup rather then HTML 5.

          No big deal really, just curious.

          Thanks for the explanation.

          Log in to Reply
  23. Nicholas says

    January 16, 2014 at 1:07 am

    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.

    Log in to Reply
  24. Bruce says

    December 23, 2013 at 12:05 pm

    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

    Log in to Reply
    • Brad Dalton says

      December 23, 2013 at 2:22 pm

      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.

      Log in to Reply
      • Bruce says

        December 23, 2013 at 2:37 pm

        Brad,

        Thanks! This was perfect. Being a non-techie I was adding the code in the custom CSS section vs. the functions.php section. Once I got that right, it all flowed. You ROCK! And thanks for your speed in responding. Much appreciated!

        Merry Christmas!

        Bruce

        Log in to Reply
        • Brad Dalton says

          December 23, 2013 at 3:14 pm

          Merry Xmas Bruce.

          Log in to Reply
  25. janmikael says

    December 1, 2013 at 12:07 pm

    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!

    Log in to Reply
  26. Eric Reynolds says

    November 18, 2013 at 6:41 am

    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?

    Log in to Reply
  27. Eric Reynolds says

    November 18, 2013 at 5:12 am

    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

    Log in to Reply
    • Eric Reynolds says

      November 18, 2013 at 5:16 am

      One more thing Brad. How can I get the featured image to show up after the title and meta info (as opposed to just the title)?

      Log in to Reply
      • Brad Dalton says

        November 18, 2013 at 5:47 am

        You can change the hook position or add a 3rd parameter for positioning priority. http://wpsites.net/web-design/3rd-parameter-action-hooks/

        Log in to Reply
    • Brad Dalton says

      November 18, 2013 at 5:44 am

      Hello Ric

      The code snippets near the end of the post include CSS which makes your image float left or right. The screenshots show the result with text wrapped.

      The code is for use on single posts only and will not work on archive pages which you can customize using the Genesis > Theme Settings > Content Archives.

      Log in to Reply
      • Eric Reynolds says

        November 18, 2013 at 6:25 am

        Thanks Brad. 🙂

        Log in to Reply
      • Eric Reynolds says

        November 18, 2013 at 6:31 am

        One last thing. Is there a way to exclude the featured image from displaying in a post for a select category? For example, I have YouTube videos that display on posts categorized under video channel. The featured image crowds the video. So, it would be great to not display the featured image for these post types. 🙂

        Log in to Reply
        • Brad Dalton says

          November 18, 2013 at 10:07 am

          Add a conditional tag after the function in the PHP code to exclude it from specific post types.

          Log in to Reply
          • Eric Reynolds says

            November 18, 2013 at 5:46 pm

            Got it. However, I am new to PHP. I know that I would use the conditional tag is_category(‘video-channel’), but I don’t know how to code the action or filter to not display a featured image. Care to provide me the code so I can learn how? 🙂

          • Brad Dalton says

            November 19, 2013 at 7:53 pm

            Its already included in this tutorial Eric.

        • Dustin Hart says

          November 14, 2014 at 11:00 pm

          I’m way late to this but I’m trying to find the same solution. I looked in the tutorial but I must be missing how to accomplish this. I don’t see anything on excluding specific categories for single posts. Is there a link or something I’m overlooking?

          Log in to Reply
          • Brad Dalton says

            November 15, 2014 at 1:02 am

            Hi Dustin

            Yes, try this link http://wpsites.net/registration/

  28. Amit says

    November 12, 2013 at 4:30 pm

    I would Like to show featured image as full width in the container of metro theme before content-sidebar wrap. How Do I ?

    Log in to Reply
    • Brad Dalton says

      November 13, 2013 at 2:21 am

      Firstly, please create a Gravatar account and add this email to it so your face displays.

      Simply change the hook in the code to genesis_before_content_sidebar_wrap

      Log in to Reply
      • amit says

        November 13, 2013 at 4:31 am

        Brad I have added my gravatar.
        How Do I remove the margin from around the image ?
        http://i.imgur.com/0qY1qB2.png

        Log in to Reply
        • Brad Dalton says

          November 13, 2013 at 5:13 am

          Simply modify the values in the CSS code for the margin to 0px and 0rem.

          Log in to Reply
          • Amit says

            November 13, 2013 at 5:25 am

            but the container in the metro theme css is not letting me to do so !

          • Brad Dalton says

            November 13, 2013 at 5:37 am

            You can remove the padding from the site inner like this:

            .single .site-inner {
                clear: both;
                padding-top: 0rem;
                padding-top: 0px;
            }
  29. Francesca says

    October 11, 2013 at 12:37 pm

    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!

    Log in to Reply
    • Brad Dalton says

      October 11, 2013 at 12:48 pm

      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.

      Log in to Reply
      • Francesca says

        October 11, 2013 at 12:56 pm

        Thanks, I am going to try this 🙂

        Log in to Reply
  30. Dan Sorensen says

    October 11, 2013 at 2:25 am

    You’re awesome, thank you Brad.

    – The “Dan” above 🙂

    Log in to Reply
    • Brad Dalton says

      October 11, 2013 at 2:43 am

      Thanks for the comment Dan.

      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.