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.
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.
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.
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:
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
Here’s another method you can try http://wpsites.net/wordpress-themes/add-image-after-genesis-header-using-back-stretch-customizer/
Perfect! Thanks a lot!!!
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!
All good Josh.
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
It is when i look at it.
Clear any caching and take another look.
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
Looks perfect to me Deborah
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
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.
Is it possible to adapt this tutorial to work with the Genesis Responsive slider? many thanks
Hello Phil
Try this http://wpsites.net/best-plugins/installing-full-width-responsive-slider/
Exactly what I needed… Thank you!
No worries Jeremi.
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.
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.
/** 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.
child themes functions.php file
That’s what I figured. The thing is, it’s shown in the above code as appearing in the css file.
Fixed that now Rick.
Thanks for sharing. I’ll absolutely use your referral link, it’s the least I can do to thank you for all your resources.
No worries.
Appreciate it Joan.
Great stuff. Keep them coming!
Will do Dave.