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.
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:
Here’s what’s happening in that code:
- We’ve added an action that is going to “fire” when the genesis_before_content structural hook happens.
- That action calls the metro_home_add_soliloquy_slider() function.
- That function contains our Soliloquy conditional and function.
- The conditional checks to see if Soliloquy is installed and active.
- If so, it calls the function soliloquy_slider( ‘215’ ).
- That function contains a parameter of either the slider ID or slug, which in our example is ‘215’.
This 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.
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.
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.
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.