WP SITES

Log in

Add Full Width Image In Any StudioPress Theme

—

by

Brad Dalton

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

Comments

31 responses to “Add Full Width Image In Any StudioPress Theme”

  1. tunnelmilano Avatar
    tunnelmilano

    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

    1. Brad Dalton Avatar
      Brad Dalton

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

  2. Add Header Image Logo To Genesis 2.0 Sample Theme

    […] Learn more about How To Add Full Width Images In Any StudioPress Themes. […]

  3. chrys Avatar
    chrys

    Perfect! Thanks a lot!!!

  4. Josh Avatar
    Josh

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Josh Avatar
        Josh

        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.

      2. Josh Avatar
        Josh

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          All good Josh.

  5. Sunny Avatar
    Sunny

    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

    1. Brad Dalton Avatar
      Brad Dalton

      It is when i look at it.

      Clear any caching and take another look.

      1. Sunny Avatar
        Sunny

        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

        1. Brad Dalton Avatar
          Brad Dalton

          Looks perfect to me Deborah

  6. Phil Avatar
    Phil

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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

  7. Steve Avatar
    Steve

    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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  8. Phil Wragg Avatar
    Phil Wragg

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

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Phil

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

  9. Jeremi Avatar
    Jeremi

    Exactly what I needed… Thank you!

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Jeremi.

  10. Rick Rottman Avatar
    Rick Rottman

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Rick Rottman Avatar
        Rick Rottman

        /** 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.

        1. Brad Dalton Avatar
          Brad Dalton

          child themes functions.php file

          1. Rick Rottman Avatar
            Rick Rottman

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

          2. Brad Dalton Avatar
            Brad Dalton

            Fixed that now Rick.

  11. Joan Avatar
    Joan

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

    1. Brad Dalton Avatar
      Brad Dalton

      No worries.

      Appreciate it Joan.

  12. dave fogel Avatar
    dave fogel

    Great stuff. Keep them coming!

    1. Brad Dalton Avatar
      Brad Dalton

      Will do Dave.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.