How to display full width Featured image below Header in Minimum Pro

A reader mailed me today:

I would like to add a different full-width image, to every inner page, below the header, in Minimum Pro.

In this article I show how we can show featured image (if present) on single Posts and Pages below the .site-header in Minimum Pro. We are going to center the featured image and set its width to 100% so it fills the full page.


A particular single Post:


A static Page:


Add the following in functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
//* Do NOT include the opening php tag
* Get featured image markup.
* Only when the single Post or Page has a featured image, and only when
* showing the first page when the Page or Post is divided into multiple
* pages using next page quicktag.
* @author Sridhar Katakam
* @author Gary Jones
* @link
* @return string|bool Image markup if image could be determined
function sk_get_featured_image() {
// Uncomment the lines below if you want to limit to *just* featured
// images, and not fallback to first-attached images.
// if ( ! has_post_thumbnail() ) {
// return;
// }
if ( ! is_page() && ! is_single() ) {
if ( (int) get_query_var( 'page' ) > 0 ) {
// If post has no featured image, it will attempt to fallback to
// first-attached image if the first conditional in this function
// is commented out.
return genesis_get_image( 'class=aligncenter' );
add_action ( 'genesis_after_header', 'sk_featured_image', 9 );
* Display Featured image after header.
* Only on the first page when the Page or Post is divided into multiple
* using next page quicktag.
* Scope: static Pages and single Posts.
* @author Sridhar Katakam
* @author Gary Jones
* @link
function sk_featured_image() {
if ( $image = sk_get_featured_image() ) {
echo '<div class="my-featured-image">' . $image . '</div>';
view raw code.php hosted with ❤ by GitHub

(Alternate code)

and the following in style.css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.my-featured-image {
margin-top: 60px;
.my-featured-image img {
width: 100%;
margin-bottom: 0;
.my-featured-image + .site-tagline {
margin-top: 0;
@media only screen and (max-width: 1023px) {
.my-featured-image {
margin-top: 0;
view raw style.css hosted with ❤ by GitHub

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 655 other subscribers


Found this article helpful?


  1. says

    Thank you so much! This advice, as well as the

    How to remove site tagline section in Minimum Pro

    as well as the

    How to push Footer all the way down when there’s little content in Genesis

    has been of utmost value to me the last days. I’m so grateful.

    Testing your code for How to remove site tagline section in Minimum Pro I see that it also is better than the original Minimum (non html5) theme code where I had to choose a 1600x600px image. Now I can choose whatever image and it will adjust to the full width.

    One question: To me it seems like the space below the Featured full width image and the following content becomes too long – it looks as that space is the same as the space earlier occupied by the Tagline area. Am I right? How can this be adjusted?

      • says

        Thanks! That did it.

        I also want to share something I learnt some months ago by contacting StudioPress support. I had found it a bit ugly to see the header flicker side-wards between the Minimum theme’s pages with and the pages without the full-width featured image.

        I learnt that this the header’s flickering behavior was caused by short pages where WP first thinks scrolling isn’t necessary, until it realizes that it also has to add a image on top, and when switching between short and long pages.

        For me the solutions for a steady site header was to force vertical scroll on every page, like this:

        body {
        overflow-y: scroll;

  2. says

    Hi there.

    This is an excellent idea, the only problem is that you wont keep dimensions throughout in your global settings. This means if you have different image sizes, every page and every post will look different.

  3. Mark R says

    I am using your above code successfully. Thank you very much!

    My problem is that the featured image is showing up on the portfolio posts (minimum theme) where I don’t want them to.

    Is there any way to stop that from happening on the portfolio posts or on individual pages/post?

    Thanks again.

  4. says


    Thanks for the excellent tutorial. I’ve implemented it and all is well, except that I’m seeing a sliver of whitespace between the bottom of my feature image and the top of the tagline area on my pages – see here:

    I’m not sure where this is coming from as it doesn’t show in your screenshot and you don’t seem to have any padding or margin on the bottom of the feature image area. I don’t see anything to do with the tagline CSS that would cause this either. Any thoughts?

    Thanks for all the work you post, your site is an invaluable resource for me.


  5. Jessica says

    I was wondering if you could implement this on just certain pages in the site by using the page id or something?

  6. Sam says

    Dear Sridhar,

    thank you very much for your perfect studiopress tutorials!!

    I am using your above code successfully.

    One question, maybe you have an idea. Do you think this functions (display full width featured image) is also possible for the header?

    Thanks in advance for your answer!
    KInd Regards Sam

    • Dominik says

      Hi Sam, hi Sridhar, a tutorial for a full width featured image for the header would be great.

      First… thanks for all your work/tutorias you post her!!
      Is it also possible to display a full width featured image below the header of the agentpress pro theme?

      Warm Regards
      – Dominik

Leave a Reply

Your email address will not be published. Required fields are marked *

one + 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>