• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Display the featured image in Genesis Framework entries

Find out how to display the featured image before each post in Genesis Framework child themes using code.

By default, some Genesis child themes, such as Genesis Sample, do not display the featured image in the posts.

Genesis Sample posts do not display the featured image
By default, Genesis Sample posts do not display the featured image.

Do you want the featured image to appear at the beginning of posts? No problem.

You can get it with the Genesis Framework hooks. This would be the final result:

Show the featured image in entries in Genesis Framework
Show the featured image in posts in Genesis Framework.

Snippet to display the featured image in posts

Add this fragment to the end of the functions.php file:

To see this and another 847 code snippets of this website, login or subscribe here.

With this code you make the featured image appear just before the title in all blog posts.

On the other hand, you can choose the size of the image to be displayed, in this case it would be the custom ‘post-image‘ size, but you can use the one that suits you best.

For example, these are the default WordPress sizes you could use:

// WordPress default sizes
the_post_thumbnail( 'thumbnail' ); // Miniature (150 x 150px)
the_post_thumbnail( 'medium' ); // Medium (300 x 300 maximum height of 300px)
the_post_thumbnail( 'medium_large' ); // Medium large (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large (1024 x 1024 maximum height of 1024px)
the_post_thumbnail( 'full' ); // Maximum resolution (original size uploaded to the library)

You can finish adjusting the distance from the image to the title with a little CSS. For example, in Genesis Sample it’s very tight and adding this snippet at the end of the style.css allows the design to breathe better.

/* Adjust title distance */
.single-post .attachment-post-image {
    padding-bottom: 20px;
}

If you prefer, you can also get the same effect in a Custom Post Type.

Conclusions

With a small code snippet you can make sure that the featured image appears at the beginning of the entries in any Genesis Framework child theme.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉


Featured image Genesis Framework Header PHP Post

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?