Updated on August 20, 2016 - Tested and working in Minimum Pro 3.2.1 and Genesis 2.3.1.
A few years ago Carrie Dils posted in her blog about adding a slider to Minimum's (a Genesis child theme) homepage. With the recent release of the child theme's update, the instructions in her article need to be tweaked so they work with the current Minimum Pro.
I have taken her idea and made few changes in the code to replace the fixed background image below the header with Genesis Responsive Slider (really, can be with any other slider or any kind of widget).
Note: The demo site also incorporates a widget area on top of the slider per another tutorial. The opt-in form is not a part of this article.
Here are the steps.
Create a new widgeted area to place the Slider and display it between header and tagline on front page
Add this in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Now that is real handy. Neat code and cool implementation. Gonna try that on my copy of Minimum theme.
Hi Sridhar
Not moved over to Minimum Pro yet but will eventually take a few sites over.
Love what you’ve done here – well set out and well explained.
Dear Sridhar:
Thanks for your post! I have a question. Your last step “Edit front-page.php and comment out or delete”… I couldn´t find any “front-page.php” in my “Minimum Theme” only “page-title.php” and “page-landing.php”, so i couldn´t comment out that code. Any suggestion?
Thanks!
Kind Regards
Juan Luis
Hi Juan,
Which version of Minimum Pro are you using?
3.0, which is the current latest comes with front-page.php.
[…] Yo finalmente he optado por dejar instalada la configuración de Sridhar katakam. […]
Thanks for the credit Sridhar.
You’re doing an outstanding job as a volunteer and providing excellent solutions for members of the StudioPress Community. Cheers
Thanks for the encouraging words Brad.
I am new to Genesis and have already bookmarked your site. I landed on it when I googled for: genesis hooks priority
I did not know what the third parameter and the default value ’10’ were until I read your post.
Sridhar,
This tutorial is exactly what I was looking for! Thanks for taking the time to write a detailed tutorial – I was pulling my hair out trying to figure this out!
Thanks again,
Chris
interesting, but I get a “Call to undefined function genesis_register_sidebar()…” error.
Which version of Genesis is being used?
Worked like a charm, thanks.
The only issue I had was with the tagline spacing. Evidently the css for minimum site-tagline has a top margin of 60rem so I had to modify that to bring it above the fold but all is well. I deployed this with the Soliloquy slider with no issues.
Thanks Sridhar
Once again, the Great Explainer! This was very helpful as I wanted something not as dominant as the default feature image.
Des
Sridhar,
I’m working on some other customizations of a home page and so went back to this tutorial to use it as a guide (having successfully added my slider). This lead to a question. The slider code was added to the functions.php. Could that code have been added to minimum-pro front-page.php with the same results?
should be possible. It is pretty common to add code in child theme’s functions.php in any WordPress theme. May I know the reason why you would like to have the custom code in front-page.php?
Thank you so much for such clear directions and clean coding. I was able to do this in about 2 minutes, with no problems, and it looks stunning! It’s so wonderful to find help outside of studio press.
Thank you so much for this information. It worked great! I also had to change the css tagline margin from 60rem to 0. (Thanks, JohnC!)
However, my slider is sitting underneath the header. How can I fix that? You can see it at my demo site at http://designitdigital.com/redesign.
Thanks for your help!
Cindy,
Add this CSS:
.home-slider {
margin-top: 62px;
}
Cindy,
Thanks for the positive comment but I’m not sure I’ve earned it yet. The top margin issue continues to haunt me when I test the theme in responsive testing. I have to give this more attention but for now I’ll accept qualified Thanks and come back when I know more. Once I started mucking with the top margin, the mobile responsive testing gave me issues. What needs to follow are additions to the mobile responsive section of the css to make the new margin smaller and smaller as screens get smaller. Perhaps Sridhar will weigh in on this. I’ll chime back in when I know more.
John C
Which slider are you using John? I don’t see any margin issues when using Genesis Responsive Slider.
Great explanation and worked wonderfully with the demo content!
When I add my own images to the demo site, they don’t display so beautifully. I have tried various image sizes (everything from 800×500 to 1600×1000) and the issue is always the same – the image is partly shown and doesn’t scale up or down like the demo images.
What image size do you recommend and what do you think I might be doing wrong?
Here is link to my demo site: http://demo1.sigrun.com
What are the maximum slider width and height you have set in Genesis Slider settings? In my demo site, they are set to 1425 and 522. All the slide images are also of the same dimensions.
Oops.. sorry, I didn’t get a notification about your reply. Thank you so much for getting back!
I ended up having all my images 800×500 or 1600×1000, and putting those numbers in the slider settings. This was the only way I got them to enlarge and minimize smoothly and without leaving empty spaces below.
But I am very unhappy with the results because I and hopefully many of my visitors will look at my website on a non-mobile device and then bottom-half of the image gets cut off and that makes them really unusable.
Could you point me in a direction how I can make the slider with fixed sized images and just have color background to the left and the right? I only want the images to minimize, not to become bigger like now. Is that possible?
And thank you again for helping so many people with your vast knowledge on Genesis theme!
Hi Sridhar, thank you so much for this code – it worked great for me! But I did find that doubling the 1425X522 to 2850X1044 produced better looking results for me. One question though – in Safari specifically, the slider is aligned to the left while in Firefox and Chrome it’s centered. How do I align it to the center in Safari specifically? Thank you in advance for your help!
Can you provide the URL of your site?
Hi Sridhar,
Nice tutorial, very easy to follow…Wonder if you could answer this, I have the image settings exactly the same as yours and for some reason it’s cutting it to 920×400, I have looked within the functions file, cant see anything there regarding these dimensions!
Any ideas?
Cheers
Can you provide the URL of your site?
Hi Sridhar,
Thank you for showing how to replace background image with responsive slider. Once background image has been replaced with responsive slider, how can I get the slider to take up the exact same real estate (area) as the background image did and behave like this example: http://www.danceco.com ?
Sridhar, thank you for the great tutorial. Is there away to replace the background image with the responsive slider but have the responsive slider behave just as the background image did so that slider images still cover the same real estate as in http://www.DanceCo.com this is the look I am going for. Also would like option to add text or logo with transparent background overlaying the responsive slider if possible. Any guidance?
Try this: http://wpsites.net/best-plugins/add-full-width-background-image-slide-show-to-any-element/
Easy Backstretch plugin worked great on my site http://americandanceco.com on the home page however if you click another page such as “About” for example, the bottom portion of the Easy Backstretch image shows below the footer at 1024 x 768 desktop resolution. Appears fine on iphone, laptop just at 1024×768 is doesn’t. Any thoughts how to fix? Thank you.
Hi Sridhar,
thanks for an awesome tutorial above. I have one problem, both with your tutorial and others I have found on the net and that is the header cut of the top of the image. For a lot of images you dont notice that but if you add a image with a face of a person you can see that the header will “cut of” some parts when you decrease the size of the page.
Du you have any tips if it possible to fix that?
Thanks a lot in advance // Lars
I saw just the solution above, thanks again for the tutorial. // Larsa
Where is the solution? I also have the problem that top or bottom of the image is cut off, any idea how I fix that?
Thanks Sridhar. I was looking for this long time.
Awesome work!!!!
I was just hitting my head with the computer screen to resolve the issue.
Thanx…….
[…] I want to give credit to a couple of people. I got the idea for doing this from City Church design at Black Hills Web Works and got the original code from Carrie Dils. However, Carrie’s code no longer works with the Metro Pro theme, so I had to figure out another solution. If mine seems to complicated, I have found two other posts that share different ways of accomplishing this task. You can find them at Black Hills Web Works Blog and sridharkatakam. […]
Thank you Sridhar – this is exactly what I was looking for. You are the man.
Regarding the slideshow – is there a way to ensure the entire image is always shown, regardless of the resolution you’re running at?
When I’m on a monitor with a resolution greater than 1425px it “zooms” into the slideshow images. You can see it at http://mosaic-salons.com/
You can try adding
.flexslider .slides img {
width: auto;
}
in style.css. But then while the slide images will then be shown full height, they will be aligned to the left when viewing at higher screen widths like 1425px. If you would like them to be centered, you might want to post in StudioPress forums to see if anyone can help you.
Unfortunately I am unable to get this to work, it doesn’t show up at all? Did the version update?
Can you provide the URL of your site where you are trying this?
how did you make your social icons round?
When Icon Size and Icon Border Radius is the same value (100px in this case), the icons will appear rounded.
Screenshot: http://www.screencast.com/t/raBgnTsX
[…] How to replace background image in Minimum Pro with responsive slider by Sridhar Katakam. […]
OH wow this is great! I am wondering. I followed another one of your great tutorials and moved my primary menu to under the header,,, then I followed this tutorial but it placed my slider between the header and the newly located Primary Nav bar…can you help me with that?
Your stuff is awesome; thank you!!
Try changing 9 to 16 in
add_action( ‘genesis_after_header’, ‘minimum_slider’, 9 );
Ok great! THANK YOU! That worked, except now it moved the slider below the Site Tag Line ;-),
I’m hoping to get it so it’s:
header (secondary nav will be next to logo in header)
primary nav
slider
site tag line
I got it! I took your reply one step further… after reading what you said I realized that 2 things were like competing the for the ‘genesis_after_header’ region. I think I’ve fixed it!
This is what I did:
add_action( ‘genesis_after_header’, ‘minimum_slider’, 16 );
add_action( ‘genesis_after_header’, ‘minimum_site_tag_line’, 17 );
it seems to be working!
Is it hard to now make the Primary nav that I moved (using your tutorial) sticky?
THANK YOU, THANK YOU!!
Can you provide the URL of your site?
It’s just a test site; http://amystout.com/wordpress1/
Thank you for checking!
[…] different ways of accomplishing this task. You can find them at Black Hills Web Works Blog and sridharkatakam. Hope it […]
[…] this article I explain how the ideas in my How to replace background image in Minimum Pro with responsive slider and How to overlay an opt-in form on background image below header in Minimum Pro posts can be […]
What plugin are you using on your sample portfolio page? http://websitesetuppro.com/demos/minimum-pro/portfolio/
Great tutorial! Thanks.
Not a plugin. Follow http://www.sridharkatakam.com/filterable-portfolio-genesis/
Great! Thanks! Excellent catalog of tutorials. Thanks for sharing so much. Watch your inbox for an email from me regarding some ongoing paid opportunities for Genesis work. Cheers!
Looking forward to.
I’d like to put a video in the area where you have the slider. Any idea on how to do this? I dont need a slider just to place a video under the header and have it be full width.
YouTube video?
Yes. But I’d like it to “fit” the same area that the background image/slider is in.
Like this? -> http://i.imgur.com/zDzyIEF.jpg
yes, exactly!! how can I do this??
Follow http://www.sridharkatakam.com/add-full-width-youtube-video-header-minimum-pro/
Hey Sridhar,
I just implemented this on a dev site, but used soliloquy slider instead. Curious if you wouldn’t mind giving me a little insight on 2 things…
1. There is a huge white space below the slider. Any ideas?
2. Full width and aligning the slider to the center both appear to be a problem. Any ideas?
Here is a link: http://btellock.com/clients/wit/v2/
Thanks in advance for any suggestions.
Cheers,
-B
Add this CSS:
.home-slider {
overflow: hidden;
}
.minimum .site-tagline {
margin-top: 0;
}
.soliloquy-container {
max-width: 100% !important;
}
.soliloquy-container .soliloquy .soliloquy-slides img {
width: 100%;
}
Thanks, Sridhar. That took care of the full width. But that white space is still present below the slider. Any ideas?
Thanks again.
Disregard. I got it. Thanks again!
Sridhar Katakam , I have been searching for this for a long time, but I did your tutorial at the beginning and the slider was between siteline above the header, so I have changed it to 16 and it works ! Might putting it out there.
Anyway, Thanks!
Wondering how this might be applied to Outreach Pro (full width responsive slider)?
Thx
Hi, I like these posts very much. Thank you Sridhar.
I have one question – I would like to have genesis responsive slider on all pages (not only on front page). How this can be done? Thank you.
I forgot I thing. How can be remove grey and white border arround images in genesis responsive slider? Thank you.
[…] you are replacing the background image with a responsive slider per this tutorial, instead of deleting or commenting […]
Will this work in the new Parallax Pro theme?
Follow http://www.sridharkatakam.com/full-width-slider-parallax-pro/
[…] In this beginner level article I show how a full width Genesis Responsive Slider can be set up below the header in homepage of Parallax Pro on the lines of my tutorial for Minimum Pro. […]
Dear Sridhar,
I have implemented this solution using the Soliloquy slider. The slider works really well, but I have the issue of the huge white space below the slider on the home page.
At first the tagline seems to be placed just below the slider, but when scrolling down this huge white space appears and the tagline moves like some kind of parallax. This is particularly visible on mobile devices.
How to get rid of this white space on the home page ? Thank you in advance.
Are there any other steps necessary to pull this off in Agency Pro?
used the first two sets of code to add to my functions php file and my site crashed. Help please?
You should not include the opening PHP tag in the code. If you did, edit child theme’s functions.php and delete them. If you can’t access that file from WordPress editor, use a FTP client or cPanel file manager.
I am new to altering code. I have tried to insert the first snipit ‘Create a new widgeted area to place the Slider’ on lines 4-9 of functions.php but could see sidebar anywhere. I am also unsure what ‘Insert the content of above widgeted area between header and tagline on homepage’ means. Where exactly ie which line should this second snipit be placed on?
Sorry for newbie questions – I’m sure once I’ve done it a few times I’ll understand better. Many thanks.
As an update, I found a tutorial for creating custom CSS and PHP files, so I did that and played around with the code in those (using FTP) leaving the original files intact. Happy days.
However, if I create an image for the slider at the 1452 x 422 dimensions set up in the slider settings that are recommended, it seems to get cut off half way down the image when I upload. What dimensions should I make the slider images and where can I alter these dimensions? Thanks.
I applied this to my website (see link next to my name) and it works exactly as you described, however, what I really like about Minimum Pro is how the image stays stationary as you scroll down. Now the image scrolls with the content.
How can I keep the image stay stationary like the original version?
What I am mainly trying to accomplish is a look like this —> bioactivesinc (dot) com
Thanks in advance
Hi! Thank you so much for this tutorial! I used it and it worked great!!
Just one small issue that I’m having, and it may be some small mistake I made that is causing it, but I just can’t figure out what is causing it – when the slider gets to the last slide, it makes a small jump, moving the arrows down a few pixels. This wouldn’t be a big deal in itself, but it is also causing all of the content below it on the homepage to shift down a few pixels, then back up when it goes back to the first slide, which makes reading anything on the homepage super annoying!
If you could help point me in the direction of where I went wrong and what I should do to fix it, I would greatly appreciate it! The test site url is: http://testblog4.greentangerinedesign.com/
Thank you SO much!
Hi,
First of all: thank you very much for all your tutorials! Very high standard!
I’ve a small problem with the responsive slider. “Display content in slider” is activated but only the post title and [Read more…] shows up (so not [Continue Reading]). Do you have any idea what causes this problem!
Thank you very much!
Kind regards,
Rudy
Hi,
It’s solved! After I chose “Select one of the following/Display post excerpts” instead of “Select one of the following/Display post content” everything is working now. Just the little jump at the last slide, Allison is talking about, is causing some distraction.
Hi Sridhar,
Great tutorial! Although, I’m having a little with the slider in general. I am trying to achieve a result like this (http://bit.ly/1rErwDZ) so the ‘Featured Image’ appears in the background.
Currently, just following your tutorial this is the result so far (http://bit.ly/1vu1CDB).
Would you have any ideas? If so, much appreciated!
All the best,
Tom
Help pls.
I keep on getting an error when i get to the delete/comment out section. I am sure its got to do with either ) ); or }. I put the code into dreamweaver but it didnt come up with an error on 32 which is the “custom background” section
Parse error: syntax error, unexpected ‘<' in /home/dunjokod/staging/1/wp-content/themes/minimum-pro/functions.php on line 32
‘minimum_background_callback’ ) );
//* Add custom background callback for background color
function minimum_background_callback() {
if ( ! get_background_color() )
return;
printf( ‘body { background-color: #%s; }’ . “\n”, get_background_color() );
}
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 320,
‘height’ => 60,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false
) );
//* Add support for structural wraps
add_theme_support( ‘genesis-structural-wraps’, array(
‘header’,
‘site-tagline’,
‘nav’,
‘subnav’,
‘home-featured’,
‘site-inner’,
‘footer-widgets’,
‘footer’
) );
//* Add support for 3-column footer widgets
add_theme_support( ‘genesis-footer-widgets’, 3 );
//* Unregister layout settings
genesis_unregister_layout( ‘content-sidebar-sidebar’ );
genesis_unregister_layout( ‘sidebar-content-sidebar’ );
genesis_unregister_layout( ‘sidebar-sidebar-content’ );
//* Unregister secondary sidebar
unregister_sidebar( ‘sidebar-alt’ );
//* Create portfolio custom post type
add_action( ‘init’, ‘minimum_portfolio_post_type’ );
function minimum_portfolio_post_type() {
register_post_type( ‘portfolio’,
array(
‘labels’ => array(
‘name’ => __( ‘Portfolio’, ‘minimum’ ),
‘singular_name’ => __( ‘Portfolio’, ‘minimum’ ),
),
‘exclude_from_search’ => true,
‘has_archive’ => true,
‘hierarchical’ => true,
‘menu_icon’ => ‘dashicons-admin-page’,
‘public’ => true,
‘rewrite’ => array( ‘slug’ => ‘portfolio’, ‘with_front’ => false ),
‘supports’ => array( ‘title’, ‘editor’, ‘author’, ‘thumbnail’, ‘excerpt’, ‘trackbacks’, ‘custom-fields’, ‘revisions’, ‘page-attributes’, ‘genesis-seo’ ),
)
);
}
//* Remove site description
remove_action( ‘genesis_site_description’, ‘genesis_seo_site_description’ );
//* Reposition the primary navigation menu
remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
add_action( ‘genesis_after_header’, ‘genesis_do_nav’, 15 );
//* Reposition the secondary navigation menu
remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
add_action( ‘genesis_footer’, ‘genesis_do_subnav’, 7 );
//* Reduce the secondary navigation menu to one level depth
add_filter( ‘wp_nav_menu_args’, ‘minimum_secondary_menu_args’ );
function minimum_secondary_menu_args( $args ){
if( ‘secondary’ != $args[‘theme_location’] )
return $args;
$args[‘depth’] = 1;
return $args;
}
//* Add the site tagline section
add_action( ‘genesis_after_header’, ‘minimum_site_tagline’ );
function minimum_site_tagline() {
printf( ”, genesis_attr( ‘site-tagline’ ) );
genesis_structural_wrap( ‘site-tagline’ );
printf( ”, genesis_attr( ‘site-tagline-left’ ) );
printf( ‘%s’, genesis_attr( ‘site-description’ ), esc_html( get_bloginfo( ‘description’ ) ) );
echo ”;
printf( ”, genesis_attr( ‘site-tagline-right’ ) );
genesis_widget_area( ‘site-tagline-right’ );
echo ”;
genesis_structural_wrap( ‘site-tagline’, ‘close’ );
echo ”;
}
//* Hook after post widget after the entry content
add_action( ‘genesis_after_entry’, ‘minimum_after_entry’, 5 );
function minimum_after_entry() {
if ( is_singular( ‘post’ ) )
genesis_widget_area( ‘after-entry’, array(
‘before’ => ”,
‘after’ => ”,
) );
}
//* Modify the size of the Gravatar in the author box
add_filter( ‘genesis_author_box_gravatar_size’, ‘minimum_author_box_gravatar’ );
function minimum_author_box_gravatar( $size ) {
return 144;
}
//* Modify the size of the Gravatar in the entry comments
add_filter( ‘genesis_comment_list_args’, ‘minimum_comments_gravatar’ );
function minimum_comments_gravatar( $args ) {
$args[‘avatar_size’] = 96;
return $args;
}
//* Change the number of portfolio items to be displayed (props Bill Erickson)
add_action( ‘pre_get_posts’, ‘minimum_portfolio_items’ );
function minimum_portfolio_items( $query ) {
if ( $query->is_main_query() && !is_admin() && is_post_type_archive( ‘portfolio’ ) ) {
$query->set( ‘posts_per_page’, ‘6’ );
}
}
//* Remove comment form allowed tags
add_filter( ‘comment_form_defaults’, ‘minimum_remove_comment_form_allowed_tags’ );
function minimum_remove_comment_form_allowed_tags( $defaults ) {
$defaults[‘comment_notes_after’] = ”;
return $defaults;
}
//* Register widget areas
genesis_register_sidebar( array(
‘id’ => ‘site-tagline-right’,
‘name’ => __( ‘Site Tagline Right’, ‘minimum’ ),
‘description’ => __( ‘This is the site tagline right section.’, ‘minimum’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘home-featured-1’,
‘name’ => __( ‘Home Featured 1’, ‘minimum’ ),
‘description’ => __( ‘This is the home featured 1 section.’, ‘minimum’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘home-featured-2’,
‘name’ => __( ‘Home Featured 2’, ‘minimum’ ),
‘description’ => __( ‘This is the home featured 2 section.’, ‘minimum’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘home-featured-3’,
‘name’ => __( ‘Home Featured 3’, ‘minimum’ ),
‘description’ => __( ‘This is the home featured 3 section.’, ‘minimum’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘home-featured-4’,
‘name’ => __( ‘Home Featured 4’, ‘minimum’ ),
‘description’ => __( ‘This is the home featured 4 section.’, ‘minimum’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘after-entry’,
‘name’ => __( ‘After Entry’, ‘minimum’ ),
‘description’ => __( ‘This is the after entry widget area.’, ‘minimum’ ),
) );
/** Register widget area */
genesis_register_sidebar( array(
‘id’ => ‘home-slider’,
‘name’ => __( ‘Home Slider’, ‘minimum’ ),
‘description’ => __( ‘This is the home slider’, ‘minimum’ ),
) );
//* Add home slider between header and tagline
add_action( ‘genesis_after_header’, ‘minimum_slider’, 9 );
function minimum_slider() {
if (is_home() || is_front_page()) {
printf( ”, genesis_attr( ‘home-slider’ ) );
genesis_widget_area( ‘home-slider’ );
echo ”;
}
}
Can you upload your functions.php at http://www.pastebin.com and give the link to view it?
Just wondering if you got the link, my reply is not showing up
Thanks so much for this! Worked great except that I am now having an issue with the body (below nav) floating just a bit on home page. Any ideas why this is happening?
http://www.test.nomadic-by-nature.com/
It’s a bit hard to see, but you should be able to notice next to slider or tagline that the page is not 100% full width.
Thanks in advance!
Never mind! Issue was with slider settings. Fixed now- thanks again!
Thanks so much for this tutorial. All worked great but the slider is showing up on the blog page. Can you please advise how to remove? Also, note I am using Meta Slider.
Try this.
In the code added to functions.php, change
if (is_home() || is_front_page()) {
to
if ( is_front_page() ) {