Add Slider to the Home Page of Minimum Pro Theme v.3.0 – Updated!

StudioPress just released Minimum Pro Theme to Genesis Framework users.

I recently wanted to substitute a slider on the homepage instead of a static featured image. I’ll post the solution here in case you’d like to try it yourself. (btw – just giving a thanks – Ted helped me out a ton!)

Thriveworks

CREATE A NEW WIDGET AREA

The featured image used in the Minimum Pro Theme demo is hard-coded into funtions.php. We’re going to change this by creating a new widget area for our home page slider.

To register a new widget area, drop the following into your functions.php (between header and tagline widgets on homepage).

After adding this code to your theme and saving it, you can go to Appearance > Widgets and see your new widget area. You can drop widgets in there and add content all you like, but it won’t show up on your home page until we tell it to do so.

ADD THE NEW WIDGET AREA TO THE HOME PAGE

Add this to functions.php:

Then REMOVE (on functions.php):

Removed:

And on front-page.php, remove or comment out:

Done!

Internet Marketing Tips

Get organic, direct, referral, and social goodness delivered straight to your inbox.

Just add your email address above, and I'll be in touch soon.

  • Brad Dalton

    Hi Eli.

    2 things i would like to add:

    1. You could simply hook in a new slider directly from your functions file. No need to remove any code or add any CSS code.

    2. When you embed PHP code in a web page, it turns the apostrophes around resulting in errors for anyone who copies and pastes it into a functions file.

    I suggest using github gists or a syntax highlighter..

    • https://elioverbey.net Eli Overbey

      Thanks Brad –

      1. Correct. I’ve gone back and simplified the process. It is now updated. I started realizing the problem with the code as I moved on.
      2. You are correct once again. I had been using github, but when pulling the snippet in, all of my gist were double spaced. I’ve been able to fix that and revert back.

      Thanks for the advice and comments. You’re doing great stuff on wpsites.net

  • margot Potter

    I want to add the slider Widget to my Home page, but I’m not clear what the slider dimensions should be. Should I set the width to the full 1600 and I can play with the Height To suit my needs or should the height be the same as the static image at 1050? Thanks in advance for your help!

    • https://elioverbey.net Eli Overbey

      Hi Margot,

      You can set it full width, and then play with the dimension to suite your needs. In fact, I changed the dimensions on one of the sites for a client. They wanted the slider to not be full width or height.

      You can see it at http://thriveworks.com

  • http://designitdigital.com/redesign/ Cindy Wyckoff

    I’ve re-done this 3 times now. it looks fine without a widget in the Slider area. But when I put any slider, even the genesis responsive slider, it doesn’t look right. I even sized the slider to 1415 x 551 (guessing that is the right dimension). I would prefer to use the Layer Slider plugin I have from Code Canyon and I’m sure it would work, but both show up the way you can see if you go here: http://designitdigital.com/redesign/

    Thanks so much for your help. I really like this template and the only thing I wanted different was to be able to put a slider in it.

    Cindy

  • http://designitdigital.com/redesign/ Cindy Wyckoff

    Nevermind. I finally figured out that I needed to change the top margin of the tagline from 60rem to 0.

    I do have to adjust my slider to adjust for the header being placed OVER the slider. Is there a ways to move the slider down?

    Thanks!

    • https://elioverbey.net Eli Overbey

      Hi Cindy,

      Do you have a link or a possible image that you are working with (so I can see?) I’d love to help!

      Eli

      • Cindy Wyckoff

        I really appreciate your willingness to help! You can see my slider at http://designitdigital.com/redesign.

        As of this reply, I have the layerslider plugin but it is still sitting behind the header/navigation. There must be a way to bring the slider down so the images aren’t partially hidden by the header bar, but I can’t figure it out.

        Let me know if you need any other info.

        • https://elioverbey.net Eli Overbey

          Cindy,

          I think your active class that needs padding is: .ls-webkit-hack

          Try adding some padding to the top:

          .ls-webkit-hack {
          padding-top: 60px;
          padding-top: 6rem;
          }

          You may need to use !important;

          • Cindy Wyckoff

            I put this at the bottom of my style.css code for the theme:

            .ls-webkit-hack {
            padding-top: 60px !important;
            padding-top: 6rem !important;
            }

            It didn’t seem to change anything.

    • https://elioverbey.net Eli Overbey

      Cindy,

      Two quick thoughts:

      Did you insert the script between header and tagline in functions.php?

      Second, did you do the priority as a 9?

      This indicates the priority. We must specify this to be any value less than 10 or otherwise, the .minimum-slider div will be placed AFTER the tagline (which is defined higher up in functions.php).

      • Cindy Wyckoff

        Yes to both. Here is my code:

        /** Register widget area */
        genesis_register_sidebar( array(
        ‘id’ => ‘home-slider’,
        ‘name’ => __( ‘Home Slider’, ‘minimum’ ),
        ‘description’ => __( ‘This is the home slider’, ‘minimum’ ),
        ) );

        //* Add the site tagline section

        You can see that I added it just before the “add the site tagline section’.

        I put the 2nd code at the bottom of the functions.php file with a priority of 9. I tried it before right below the above code and it didn’t seem to make any difference.

  • Jonathan Rivers

    I had to add ‘genesis-slider’ to the //* Add support for structural wraps section of functions.php in order to get the slider to output in the correct structure…

    did i miss a step? am i the only one who had to do this?

  • http://www.bestwindowscleaners.com/ Mark

    Hi,

    I am also working on Minimum Theme, but I can’t seem to palce the slider underneath the navigation.

    Any ideas?

  • http://jazeeraalhamra.seththompson.info/ Seth Thompson

    Hi,

    On the homepage, I need to know how I can move the genesis slider down so that the top of the image is not obstructed by the banner.

    Please note that I followed your tutorial to add the slider widget.

    Would you please provide me with both the suggested code and location for the modification?

    Thank you in advance for your help.

    Best Regards,
    Seth

  • http://www.AustinEstatesRealty.com/ Bobby Brooks

    Do I need a secret decoder ring to see the code ? :)