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

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Add Full Width Image In Any StudioPress Theme

In this very simple tutorial, i’ll show you how to add a full width image anywhere in your theme.

Update : This new tutorial provides 4 different ways to add images after the header in Genesis.

Here it is on the Minimum themes home page after the header.

minimum featured image

Lets now add the same size image to another theme.

In this case, its the new Genesis 2.0 HTML 5 Sample child theme which i’m developing.

full width image on Genesis  sample child theme

Here’s the PHP code for your child themes functions file along with the CSS for your style sheet.

Change Theme Position & Location

You can use this code to display your image in any hook position on any or all pages, posts and archive pages.

On top of this, you can also change the conditional tag so your image displays on any or all pages, posts and archives.

Here’s the line of code which needs to be changed to display the full width image on all archive pages as well as the home page.

if ( is_home() || is_archive() ) {

Or you can hook it into another position rather than the header by changing this line of code.

add_action( 'genesis_before_footer', 'full_featured_image' );

Here it is before the footer on the home page.

full width footer image

Updated Solutions

Here’s 3 new solutions which enable you to pull any image from your images folder and display it after the header or in any other position on a page:

Register for full access

Related Tutorials

  • Full Width Featured Image After Header In Genesis
  • Genesis Full Width Header Image

Reader Interactions

Comments

  1. tunnelmilano says

    February 11, 2016 at 5:42 am

    Hi Brad,

    Thanks for the snippet, work fine for me. But I have a problem: I need to insert the register form above the image. For do that, I add this css codes:

    @media screen and (min-width: 1024px) {
    .register .content .page {
    position: fixed;
    display: block;
    width: 400px;
    background-color: rgba(255,255,255);
    margin-top: -750px;
    }
    }

    The problem: when I reduce the browser screen, the tab go over the navigation menu (after the 1024px of width go down the image, but this is ok for me, is for the tablet/phone screen).

    Do you have suggestions?
    Thanks
    Antonio

    Log in to Reply
    • Brad Dalton says

      February 11, 2016 at 6:17 am

      Here’s another method you can try http://wpsites.net/wordpress-themes/add-image-after-genesis-header-using-back-stretch-customizer/

      Log in to Reply
  2. chrys says

    September 23, 2014 at 2:39 pm

    Perfect! Thanks a lot!!!

    Log in to Reply
  3. Josh says

    September 7, 2014 at 1:25 pm

    Thanks for this tutorial. Was able to get the featured image to appear, but at 1600px it doesn’t span the full width of the screen. Is this just a matter of increasing the image size?

    Also, with Debugging on, I’m getting the following notices:

    Notice: Undefined variable: thumbnail in /Volumes/MacintoshHD/Users/josh/Sites/angels/wp-content/themes/angels/functions.php on line 45

    Notice: Trying to get property of non-object in /Volumes/MacintoshHD/Users/josh/Sites/angels/wp-content/themes/angels/functions.php on line 45

    This is unfortunately only a local install right now so I can’t give you a URL to view it for yourself. Thanks for any help!

    Log in to Reply
    • Brad Dalton says

      September 7, 2014 at 2:08 pm

      You may have to play around with the size to get the best result.

      With debugging, you’ll always get errors even with a fresh install of the latest default theme without any modifications whatsoever.

      Log in to Reply
      • Josh says

        September 7, 2014 at 4:14 pm

        Thanks, Brad. Larger image works fine. Another question though, and please excuse my ignorance — PHP is not my strong suit. This seems to take any featured image attached to a page or post and make it full width after the header. My thinking was that adding an image named example.png to my theme’s images directory would result in that image on the homepage. However, if I do that and don’t have a featured image attached to the homepage, nothing shows up. Am I missing something here? Thanks again for the help.

        Log in to Reply
      • Josh says

        September 7, 2014 at 4:30 pm

        Disregard my last comment! Realized this should be changed to is_front_page for a static front page. Sorry for gumming up your inbox, and again, thanks for the tutorial. Glad I found your site!

        Log in to Reply
        • Brad Dalton says

          September 7, 2014 at 8:58 pm

          All good Josh.

          Log in to Reply
  4. Sunny says

    September 5, 2014 at 9:59 pm

    Hi Brad,
    Thank you for all your information! For a newbie like me you’re a god send 🙂
    I’ve followed your tutorial above for this page of my site:
    I’ve set up everything correctly (I think), but it’s not filling the screen 100% (even though the CSS tells it to!)
    Any ideas?
    Thanks so much,
    Sunny s

    Log in to Reply
    • Brad Dalton says

      September 6, 2014 at 8:26 am

      It is when i look at it.

      Clear any caching and take another look.

      Log in to Reply
      • Sunny says

        September 6, 2014 at 2:26 pm

        Hi Brad,
        Thanks for your quick reply. I checked it on my iPad (looks fine), cleared my cache in Firefox – still had the problem, and looked at it fresh in Safari – still had problem. See the link below for a screenshot of what I’m seeing.

        Thanks for your help!
        ~Sunny

        Log in to Reply
        • Brad Dalton says

          September 6, 2014 at 3:47 pm

          Looks perfect to me Deborah

          Log in to Reply
  5. Phil says

    July 7, 2014 at 9:02 pm

    Brad,

    For some reason I can’t this to work on a static page in Minimum Pro. If I switch the default static page to a post page (including the code you note above), it works like a champ.

    It’s like if ( is_home() is not the correct call.

    Can you shed some light?

    Log in to Reply
    • Brad Dalton says

      July 8, 2014 at 10:20 am

      Hi Phil

      Simply change the conditional to suit your own needs.

      For pages, replace is_home() with is_page(‘your-page-I.D-or-slug’)

      your-page-I.D-or-slug should be replaced with the page I.D or slug like 007 or news

      Log in to Reply
  6. Steve says

    July 4, 2014 at 7:44 pm

    is there an easy way to adapt this so that specific posts might have the option to use a full width image / slider? – like to adapt the magazine theme to use a post structure similar to this for photo essay type features

    Log in to Reply
    • Brad Dalton says

      July 5, 2014 at 2:07 am

      Yes. You can hard code it into a template or custom function otherwise create a custom template which includes a meta box for the image.

      Log in to Reply
  7. Phil Wragg says

    February 26, 2014 at 12:07 pm

    Is it possible to adapt this tutorial to work with the Genesis Responsive slider? many thanks

    Log in to Reply
    • Brad Dalton says

      February 26, 2014 at 12:14 pm

      Hello Phil

      Try this http://wpsites.net/best-plugins/installing-full-width-responsive-slider/

      Log in to Reply
  8. Jeremi says

    August 21, 2013 at 7:00 pm

    Exactly what I needed… Thank you!

    Log in to Reply
    • Brad Dalton says

      August 21, 2013 at 8:28 pm

      No worries Jeremi.

      Log in to Reply
  9. Rick Rottman says

    August 15, 2013 at 12:50 pm

    Is the code at the top of image.css supposed to be in the functions file with the rest of the functions code? Also, is 1600px big enough? Wont it look different on screens larger than 1600px?

    Thanks for the tutorial.

    Log in to Reply
    • Brad Dalton says

      August 15, 2013 at 1:02 pm

      Hi Rick

      What code are you referring too?

      All PHP code goes in functions and all CSS goes in style.css

      Test it out using the Minimum theme demo on a screen larger than 1600px.

      Log in to Reply
      • Rick Rottman says

        August 15, 2013 at 1:05 pm

        /** Add new image sizes */
        add_image_size( ‘header’, 1600, 9999, TRUE );

        This looks like something that should appear in the functions file, not the css.

        Log in to Reply
        • Brad Dalton says

          August 15, 2013 at 1:14 pm

          child themes functions.php file

          Log in to Reply
          • Rick Rottman says

            August 15, 2013 at 1:37 pm

            That’s what I figured. The thing is, it’s shown in the above code as appearing in the css file.

          • Brad Dalton says

            August 15, 2013 at 1:53 pm

            Fixed that now Rick.

  10. Joan says

    August 12, 2013 at 4:19 pm

    Thanks for sharing. I’ll absolutely use your referral link, it’s the least I can do to thank you for all your resources.

    Log in to Reply
    • Brad Dalton says

      August 12, 2013 at 4:52 pm

      No worries.

      Appreciate it Joan.

      Log in to Reply
  11. dave fogel says

    August 12, 2013 at 1:02 pm

    Great stuff. Keep them coming!

    Log in to Reply
    • Brad Dalton says

      August 12, 2013 at 1:12 pm

      Will do Dave.

      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 WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.