WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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

  3. 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!

    • 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.

      • 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.

      • 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!

  4. 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

  5. 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?

    • 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

  6. 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

    • 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.

  9. 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.

Leave a Reply