WP SITES

2752

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

Add Soliloquy Slider In Header of Any Theme

Displaying the Soliloquy slider anywhere in your theme is easy because it offers both a shortcode and PHP function.

Soliloquy

Soliloquy Shortcode

Soliloquy PHP Function

You can paste the shortcode into any widget or content area and even add it to a custom function. This way you can hook the custom function in to any of your themes hooks.

Even if your theme doesn’t offer custom hooks, you can easily add them to your parent themes template files and use the custom hook in a function in your child theme with a conditional tag.

Another more popular method is to simply add the PHP code for the slider directly into your header template file.

On top of this, you can also add a conditional tag to the function like is_home() so your slider only outputs on your front page.

Its against best practice to edit your parent themes template files because any custom coding you add will be lost when you update the theme.

Lets take a look at adding the Soliloquy slider using different methods which work with different themes.

These 3 code snippets apply to using the Genesis theme framework with a Studio Press child theme.

This code displays the slider in the header on the home page only of any Genesis child theme using the sliders PHP tag.

This code displays the slider in the header sitewide.

This code displays the slider in the header on the home page only of any Genesis child theme using the shortcode.

Soliloquy Slider In Twenty Twelve Theme Header

You can display the slider in several header locations by adding the PHP function for Soliloquy into the header.php file.

Its advisable to copy this file from the parent theme and paste it into a child theme for Twenty Twelve so you don’t lose the function when the parent theme updates.

Always wrap the function in opening and closing PHP tags when you use PHP code in any themes template files.

Paste the PHP function or shortcode for the slider around line 42 in the header.php file in your child theme.

2012 header.php

Display On Home or Front Page Only

To display the slider on the home page only, simply add a conditional tag to the code like this in your template file:

Or use this code of you have selected a static page to be displayed on the front page using the Reading Settings:

Don’t forget to change the slider i.d number in the code!

Twenty Twelve Default Header Size

You’ll notice the default header size is 960px x 260px.

twenty twelve header.php file

You’ll need to crop your slider images to this size before you upload them if using the free version because it doesn’t resize or crop images.

Another option is to change the default header height in the twentytwelve/inc/custom-header.php file.

custom-header.php file

As you can see, the file includes support for flexible width and height so changing the value’s isn’t really necessary.

Note: Any code modifications should be made in the child theme rather than the parent themes files.

Genesis Slider Vs Soliloquy

The Soliloquy slider enables you to create and use unlimited sliders so each will display only the images you upload to that slider. On the other hand, the Genesis slider pulls the featured image from posts meaning you can only use it once or it displays the same images in multiple sliders.

Free Versus Premium Version

The premium version of Soliloquy is far superior to the free version in my opinion. One of the main reasons for this is the free version will NOT re-size or crop images to the dimensions you configure in the plugin settings. You’ll need to crop your images so they’re all the same size before you upload them unless you upgrade to the premium version.

Premium Version 10x Faster

slow loading slider

The free version also displays small buttons which you cannot remove unless you edit the plugins core files.

If you’re looking for the best free slider plugin, i recommend Easing Slider Lite or Slide Deck which enables you to display custom content and video’s in your slider.

Learn how to add the Easing Slider in your header area on your home page only.

Reader Interactions

Comments

  1. Hello Brad,

    I think I must have done something wrong since my slider is jumping around alot. I know that I might be able to fix some of the problems by adjusting the CSS for the Soliloquy plugin but I’m not sure I entered your code in correctly. I uploaded the code for the header.php to Github

    My problem might have been caused when I removed the last 2 lines of your code which in my header.php file caused a syntax error.

    Thanks,
    Carol

    • I would delete your header.php file and start again.

      Its simply a matter of adding one line of code to this file.

      If you want me to fix this for you, please use the contact form.

      • Hello Brad,

        Thanks for the tutorial. It’s enabled me to add the Soliloquy slider to ONLY the home page of my Twenty Twelve child theme. I’m still working on getting the header images to resize properly for the header sections on my other pages (more work!). Your tutorial definitely helped.

        Thanks,
        Carol

        • The trick with using the featured images as headers is you need to crop them first and make sure they’re exactly the same width and height.

          There’s no magic wand with images.

  2. Hello,

    I’m trying to add a Soliloquy ONLY to the header on my home page using a Twenty Twelve child theme. In addition, I need to be able to have different header images for the other pages.

    I’m missing some step. I tried the code above but it didn’t seem to work when I added it to the header.php file, I ended up getting the slider on all of the pages in addition to the individual header images.

    I have removed the following lines from the header.php:

    Is it possible to have a slider on the home page only as still use individual header images on other pages?

    Thanks,
    Carol

  3. Brad, how can I reposition the slider so that it appears below the Home Featured widget areas 1 – 4 in Minimum Pro?
    Thanks for the great tutorials!
    -Raven

  5. brad, thanks a million for your patience and willingness to see me through on this. 55 did the trick— i can go about the rest of my life.

    all the best, emily

  6. oof! i feel like this should work and im messing it up somehow…

    i think i’m somehow getting the slug wrong, though i’ve tried everything i can think of.
    the full slug, parts of the slug, postid-55… is there a convention that im missing?

    this is what i’ve got in there now:

    function add_soliloquy_slider_one() {
	if (is_single('55')&& function_exists( 'soliloquy_slider' ) ) {
	soliloquy_slider( '70' );
   }
}
add_action('genesis_before_content', 'add_soliloquy_slider_one');

  7. holy cow! i think i actually figured it out… THANKS so much for your helpful hints!!

    the only thing i can’t seem to resolve is how to get the different sliders on their respective pages. how do i follow your direction above, “hooking the four using their slider id?” where do the slider id’s go?

    here’s what i’ve got now:

    function soliloquy_slider_header_portfolio() {
if (is_singular('portfolio') && function_exists( 'soliloquy_slider' ) ) {
soliloquy_slider( '70' );
   }
}
add_action('genesis_before_content', 'soliloquy_slider_header_portfolio');

    a million thanks, really.
    emily

    • Change the i.d number 70 to the slider i.d.

      Each slider will need to have a different function name so make sure soliloquy_slider_header_portfolio is different for each function.

      • all of that makes sense, though how do i point each slider to a different portfolio page?

        all of my sliders are appearing on the same page and i’m wracking my brain trying to figure out how to point them to the different pages.

        • Point each slider to a different page?

          Sorry but i don’t follow.

          I thought you want to display each slider on a different page.

          You can link the images to any URL’s.

          • so sorry if i wasn’t clear.

            i’d like each of those portfolio pages to have their own slider. would i still do as you instructed, or is there a different way to point them to each of those pages?

          • no, no… i’d like a different slider to appear on each of the single-portfolio pages– mock-up

          • Simply add the shortcode for each slider into the content area of each portfolio.

            Or you could hook the sliders in and add a conditional tag after each function.

          • brad, thanks for sticking with me on this– i’m so sorry that i just don’t seem to be getting it.

            when i post the slider id in the content area, i get the slider above the text, not full width like the one above it.

            i was expecting that i’d need to do something with a conditional tag, but i can’t find any snippets or tutorials that show how i’d point to my different portfolio posts. i can figure out how to point one slider to all my portfolio pages and another slider to all of my regular pages, but not a unique slider to each of my portfolio posts that is in the position i want it to be in (as per the mockup).

            could you point me to a specific source that shows how conditional tags can point a specific slider to a specific portfolio post page?

            again—thanks so much,
            emily

          • I tested this solution locally and it works.

            1. You will need to change both instances of the function name which in this case is add_soliloquy_slider
            2. You will also need to replace the name slug with the actual slug for each portfolio page or the post i.d.
            3. You will also need to replace the slider i.d for each custom function.

            Sorry i didn’t understand your question properly.

  8. hi brad, im trying to get a unique full width slider on each of my single portfolio pages (i have four). could this technique work?

    thanks for all of your help,
    emily

      • thanks for your advice brad, really appreciated.

        i’ve been doing a lot of reading about hooks & filters but haven’t yet put one into my theme (at least not one that i didn’t get from a generous soul like you).

        can you give me any more specific advice on how to hook these sliders into my portfolio pages? ideally i’d like to have the text appear along with a sidebar, below the slider, like. is this still the best way to go about achieving a layout like that?

        again, thanks so much,
        emily

        • Single portfolio custom post type pages?

          Use the is_singular(‘portfolio’) ) conditional tag and the genesis_before_content or genesis_before_content_sidebar_wrap hook.

          Where portfolio is the name of your CPT.

          • ok, so i would make these modifications in the single-portfolio.php file, or in functions.php, or am i making a new template?

            so sorry for the noob questions, just trying to figure out how this all works.

          • You would copy the code i supplied for the home or front page and simply change the:

            1. hook
            2. conditional tag
            3. function name which needs to be unique for each custom function.

            Most custom functions code goes at the end of your child themes functions.php file.

  9. I want to use this code to my Lifestyle Pro theme but I’m not sure where to add the code given above. Please don’t want my site to crash. I would like to make the slider full width. don’t know how that is going to impact the secondary side bar.

    • Where do you want to add them specifically?

      If you’re using Genesis, you can hook them into different positions using the sliders i.d in a template tag from your child themes functions file.

      Otherwise, you’ll need to add the template tag generated for each slider into a template file for your theme.

      The method depends on which theme you’re using.

  11. Hi Brad, great post.
    I want to use the slider on 2013 theme but i find the header image height of 2013 at 230px a bit small. Using a child theme I can change the CSS to give a higher image are on the site but the 2013 auto-crop tool limits the size of the image I can upload as header image.
    Do you know how I can increase the size of an uploaded header image (not the CSS) in 2013?

    Regards,

    Wayne

    • Hi Wayne

      I’m sure you can do this in the style sheet. Use Firebug to find the class for the header and add a height to it.

      I think you can set your image sizes to the height you want and crop them first so they’re all the same height.

      I would strongly recommend you look at using a flexible theme framework like Genesis as its far easier to customize.

  12. Hi Brad… LOVE THIS! I’m trying to add the slider to my Home page using Minimum Pro theme and adding code to my functions.php I’ve used your instructions here: http://wpsites.net/best-plugins/installing-full-width-responsive-slider/ and everything went smoothly.

    But somehow, the slider is showing up below my header and above the primary navigation of the site on the Home page.

    Is there a way to add a hook saying something like “below primary navigation?” I’m sure I just need to adjust the hook. I’ve tried a few options I thought would work but I keep breaking the site…so obviously I don’t have it all there.

      • Positioning worked great, so thanks! But the slider is no longer full-width (i.e. beyond the 1140px page width).

        Is there a way to modify this or am I confined to 1140px wide when using the “before_content_sidebar_wrap” ?

        • Hello David

          Depends which theme you’re using because they all use different CSS for different elements including the header and the values you use in the plugin settings.

          If your header isn’t full width then neither will the slider display full width so you’ll need to modify the header CSS to make it full width if needed.

          • Awesome! Your suggestions really helped me out. What I ended up doing is using the hook in functions.php as 

            genesis_before_content_sidebar_wrap

            and simply adjusted the .wrap width in CSS for the Home page exclusively. That and the Header width also.

            This seems to give me the look I want on the Home page without affecting other page widths.

            You’re the best, Brad. Keep up the good work.

          • That’s what i was trying to think of. The wrap on the home page.

            I did this before when i changed the header to full width on a theme. Can’t remember which theme but seems you worked it out pretty quick.

            Thanks for the kind words David.

  13. This is great – I made it work on my 2013 theme using the Twenty Twelve approach above. But I can’t seem to work out what the code would be to make this appear just on the home page?

    Steve

  14. Thanks for this tutorial, but I’m having some issues. I’ve been trying to add the soliloquy slider to the template of my genesis theme. I am wondering which files to add the code to? I’m new to Genesis and am still learning about all the hooks and what not.

    Thanks.

Leave a Reply