Black Hills Web Works

WordPress Websites for Churches, Nonprofits, and Small Businesses

How to add a Soliloquy slider to a Genesis page template file

By · Published on
32 Comments

I’ve been asked by several people lately how I added the Soliloquy slider to the Metro theme home page on one of my demo sites, citychurch.bhwebworks.com. So in anticipation of more inquiries I decided to write this tutorial explaining how I added the slider to that home page, which you can see in the screenshot below.

Metro theme with Soliloquy slider

Widget, Shortcode, or Function?

A Soliloquy slider can be added to your site in one of three ways: using a Soliloquy widget in a widget area, adding a shortcode to a page or post, or adding a function to a page template file, such as home.php. Widgets and shortcodes are familiar to most people who work with WordPress, but using a function in a template file is a little more complicated, and that’s what I’m going to explain here.

Why use a function?

There are times when using a function is your best choice, and adding a full-width slider to the Metro home page above the widget areas and sidebar is a great example. Granted, you could go through the routine of adding a new widget area instead, but adding the function is far simpler, and ensures that a website admin doesn’t inadvertently remove the slider in the future.

I’m convinced. Now what’s the code?

The code you’ll need is found in this Gist:

Gist – Add a Soliloquy slider to the Metro theme home page

Here’s what’s happening in that code:

  1. We’ve added an action that is going to “fire” when the genesis_before_content structural hook happens.
  2. That action calls the metro_home_add_soliloquy_slider() function.
  3. That function contains our Soliloquy conditional and function.
  4. The conditional checks to see if Soliloquy is installed and active.
  5. If so, it calls the function soliloquy_slider( ‘215’ ).
  6. That function contains a parameter of either the slider ID or slug, which in our example is ‘215’.

Soliloquy Instructions metabox screenshotThis is important: In this example I used a slider ID of ‘215’, which is the specific ID of that slider on that specific website. You will need to change that to the ID or slug of your slider on your website.

You can find your slider’s ID or slug in the Edit page for your slider, in the sidebar metabox called Soliloquy Instructions that should look like the screenshot to the right.

And where do I put this code?

If you’re using the original Metro theme, you’ll add it to your home.php file. If you’re using the newer Metro Pro theme, you’ll add it to your front-page.php file.

In theory you could place the code anywhere in that file after the opening <?php code and before the final genesis(); function call, but I like to keep things logical so I recommend placing it after the opening add_action and before the “Add widget support for homepage…” comment.

Bonus!

If this still sounds intimidating then this bonus is for you. I’ve taken the default Metro home.php and Metro Pro front-page.php files and added the code. All you’ll need to do is download the appropriate file, change the ID ‘215’ to the ID for your slider, and upload the file to your theme directory.

Note: If you’ve made any changes previously to your existing file, then uploading this new file will overwrite those changes. In that case, it’s better to compare the two files and copy/paste as necessary.

Metro home.php

Metro Pro front-page.php

What if I want my slider above the main widget area but next to the sidebar?

No problem. This is where the coolness of Genesis hooks really shines. In the add_action in the above code simply replace the hook genesis_before_content with the hook genesis_before_loop. You could also do this with a Soliloquy widget in that Home – Top widget area, but doing it this way keeps the widget CSS out of the picture, which may work better for you. Check out the screenshot below to see what this looks like on my demo site.

Metro theme with Soliloquy slider - alternate position

Finish it off with a dash of CSS

Finally, you may need to add a little CSS to your style.css to finish integrating the slider into your site. The CSS in the Gist below is what I use, and I’ve provided both an HTML5 and non-HTML5 version for you. Choose one or the other depending on your theme, add it to your style.css, tweak it or leave it as is, and you should be all set.

Gist – CSS for Add a Soliloquy slider to the Metro theme home page

Comments

  1. John, great job! I, too, have a developer’s license for Soliloquy. I’ve asked Thomas if he could please make it so that images in the slider could have a draft mode like posts and pages so that you don’t have to recreate the wheel every time you want to swap out an image or two within the slider. Your logic as to why to use a function for the slider makes sense. Again, great job.

    Peace, Doug

  2. Personally, I prefer the approach of adding a widget area to the child theme so you could swap out the slider for something else later on, rather than fix it to Soliloquy.

    This is the code for a homepage slider for example:

    Edit: see the Gist in the next comment for this code

  3. Excellent! I was using soliloquy in a widget in the new minimum-pro theme and decided to give this a try. Worked wonderfully.
    For minimum-pro I’ve disabled the backstretch on the home page and wanted the slider directly under the nav but above the site-tagline element so these are the theme specific changes I needed to make:

    CSS
    1. replace .site-inner with .site-container
    2. change .site-tagline: margin-top to 0px in all responsive sections

    front-page.php
    1. put the slider after the header, and substitute the term home to front-page and put a value of 9 so the slider is above the tagline widget.

    add_action( 'genesis_after_header', 'minimum_front_page_add_soliloquy_slider', 9 );
    function minimum_front_page_add_soliloquy_slider() ....

    What hasn’t worked.
    I had to change the upper margin of the site-tagline for responsive testing because I was no longer using the theme’s built in slider. That said, when I added a soliloquy css block to the responsive media queries nothing happened so the 20px bottom margin which is useful elsewhere is a problem in the responsive environment.

    Still, all very cool and works like a charm.

    Thanks John for continuing to push my learning curve.

    jc

  4. I thought it was must my css that was not making it work in the mobile responsive media calls but other changes I’m making there are working. Do you have any idea why this syntax isn’t working and the stylesheet is bypassing the mobile responsive elements and going to the default element?

    Also minimum-pro seems to use rem’s in addition to pixels. I don’t know much about them but I’ve been adding them whenever I make a new element so the Siloloquy css looks like this:

    /* soliloquy slider */
    .home .site-container .soliloquy-container {
    margin-bottom: 0px;
    margin-bottom: 0rem;
    }

    JohnC

    • John,

      Older IE doesn’t recognize rems, so that’s why the px values are included also, before the rems. If you’re zeroing something out you can just do margin-bottom: 0;

      For your other question, I’d need to see the site you’re referring to…

  5. Thanks for the post! Very useful.
    I want to add the slider in a regular page, not in the homepage, how can I do that?

    • Hi Rosario,

      You’re welcome!

      You could create a page template for that one page, if you don’t have one already. That would probably be the simplest way. After you’ve created the template and added the slider code to it, select that template in the Page Attributes template dropdown for that page.

      John

  6. Hello,

    Thank you for this how to guide. I was wondering if you’ve tried the other sliders for wordpress with genesis and if so how do they stack up in terms of performance and features.

    • Hi Joel,

      Besides Soliloquy the three sliders I’ve used are the Genesis Responsive Slider, WooSlider, and SlideDeck. While they all worked to some extent, here’s my take on them:

      Genesis Responsive Slider: Simple, straightforward and made for Genesis, but I was looking for a slider that could do more than this one can do. One example is creating slides that aren’t based on a post or page.

      WooSlider: Functions well and has different options for integrating into your site. Creates custom post types called Slides that can be grouped in Slide Groups, allowing you to control where they appear. Limited options for customizing how the slider behaves though. I’m using this on one of my sites now, but I’ll be replacing it with Soliloquy at some point in the future.

      SlideDeck: Very impressive feature set, but it’s a big plugin. I had a client request that we use this for their site, so I did. Responsiveness is handled with iframes which I was not impressed with at all.

      So I’ve settled on Soliloquy. It’s not perfect, but the developer is constantly improving it and dealing with bugs as they appear. With some “code understanding” you can get it to do some cool stuff.

      John

  7. Successfully used this on Streamline Pro.

    But, I was using V2 of Soliloquy, and had to change the reference to the function from soliliquy_slider to just soliloquy

  8. hi john–
    im trying to get four different sliders to point to four different single portfolio pages. i’ve managed to get a single slider to appear on all of my single portfolio pages, but am flummoxed as to how i can point the 4 different sliders to their proper pages. any ideas? the part of the site im working on is here.

    thanks so much,
    emily

    • Hi Emily,

      I guess that depends on how you’re building your sliders. I normally use the Featured Content add-on and custom post types called “Slides” for my sliders, and I add a custom metabox to the slide post type so my clients can add an optional URL to the slide image. Then I filter the slider to use that link with the image if there is a link.

      Otherwise, you should be able to set a unique link for each image in a default slider by clicking on the “i” icon for each image.

      Is that what you were looking for?

      John

      • hi john, these are all very good questions, however, im not sure i have answers. what you see on that development site is the extent of my experience with genesis!

        i have the single version of soliloquy (not the lite, just the single use), which i think is why i dont have the featured content add-on you’re referring to. so far, i have built the sliders in the most basic of ways… i then referred to the slider id in functions.php to get the sliders as you see them now in all of the single-portfolio.php pages.

        that said, you’ve lost me on the part of your reply about how to point them to different pages. where does this take place? is it something i do in functions.php, or with css, or in the page itself?

        so sorry for the noob questions, i truly appreciate any help!
        emily

        • No problem.

          Go to a slider’s edit page, where you can see and add images to the slider. Each image should have a red “X” and a blue “i” icon in the upper left corner. Clicking on the blue “i” should open an “Edit Metadata” screen for that image. On that screen you should see a text box called “Image Hyperlink” where you can add the link for that image.

          I haven’t actually tried this, since I use the Featured Content add-on, but it looks like it may open the link in a lightbox instead of a new page. If that’s the case, you can either click the “Open link in new tab?” checkbox, or you may need to create a filter that changes that linking behavior.

          John

  11. Firstly, I would like to thank you for posting this tutorial. I was wondering if there was a way to add a Soliloquy Slider instead of the background of the Front Page 1 in Altitude Pro theme? I understand that this is a different theme, but if you or anyone here knows how to do that I would greatly appreciate the help. Thank you!

    • Hey Jorge,

      Did you figure this out yet? It looks to me like you could just add a Soliloquy widget to the Front Page 1 widget area, and then adjust it with CSS and the slider settings.

      John

      • I haven’t figured it out yet John. Thanks for your reply. I did see a tutorial on sridharkatakam.com but it requires me to create a monthly paid account, which I don’t relly want to do that.

  12. Thanks for this code, it’s really helpful! How would I add my slider as the background for a widget? I have it placed as you have here, but it’s just showing up before my widget on my home page. I’d like it to be the background of my widget, so that I can put text on top of it. Thanks!

    • Hi Haley,

      I just Googled “soliloquy slider as background” and it returned some good articles that should help you out. Or you can reply here with your site’s URL and I’ll take a look and see if it’s a CSS issue.

      John