• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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.

Slider

Reader Interactions

Comments

  1. Carol says

    September 10, 2014 at 5:15 pm

    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

    Log in to Reply
    • Brad Dalton says

      September 10, 2014 at 5:21 pm

      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.

      Log in to Reply
      • Carol says

        September 10, 2014 at 9:23 pm

        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

        Log in to Reply
        • Brad Dalton says

          September 10, 2014 at 9:32 pm

          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.

          Log in to Reply
  2. Carol says

    September 3, 2014 at 9:07 pm

    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

    Log in to Reply
    • Brad Dalton says

      September 3, 2014 at 9:13 pm

      Please embed code in a Github Gist and link to it from here as its been stripped out.

      Yes, you can use the slider on the home page and the different header images on other pages.

      The code on this page is tested and works perfectly as long as you install it correctly.

      Already published a post about this with the code for adding Soliloquy on the front page of Twenty Eleven.

      Log in to Reply
      • Carol says

        September 4, 2014 at 12:04 am

        Hello Brad,

        Thanks for the rapid response. I’ll have to try this on another version of my dev site since I need to have the site accessible to my clients tomorrow. When I entered the new code, I received a php error message.
        I’ll try again tomorrow afternoon and contact you again.
        It’s good to know that this is possible.

        Thanks,
        Carol

        Log in to Reply
        • Brad Dalton says

          September 4, 2014 at 4:35 am

          What i provided was part of the header.php which includes the code for soliloquy.

          Its an example of what the working code looks like and all my code is tested.

          Log in to Reply
          • Carol says

            September 9, 2014 at 9:53 pm

            https://github.com/CarolTompkins/yolo-cyril/blob/master/README.md

            Hello Brad, this is the first time I’ve used Github. Hopefully I’ve done this correctly.

            thanks,
            Carol

          • Brad Dalton says

            September 9, 2014 at 9:59 pm

            hahahaha!!

            How can i help you Carol?

  3. Raven says

    June 23, 2014 at 8:58 pm

    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

    Log in to Reply
    • Brad Dalton says

      June 24, 2014 at 1:47 am

      Simply change the genesis hook which changes the position the slider outputs. http://wpsites.net/web-design/list-of-genesis-hooks/

      Probably geneis_after_content_sidebar_wrap

      Or you could add the template tag for the slider directly to the front-page.php file before the closing genesis tag.

      Log in to Reply
      • Raven says

        June 24, 2014 at 4:13 pm

        That worked perfectly to put it into position except now it’s jumping back and forth between the center of the page and the right.

        Any clue what I did wrong?

        Log in to Reply
        • Brad Dalton says

          June 25, 2014 at 3:10 am

          I would need to review your PHP code to work that out.

          Log in to Reply
  4. MrPink says

    June 3, 2014 at 6:03 pm

    All I get is a little loading circle when I try adding the code. If it’s the wrong id, I don’t get a loading circle so it’s trying at least. All I’m using is https://gist.github.com/anonymous/25b59817958dd14527a1

    Log in to Reply
    • Brad Dalton says

      June 3, 2014 at 6:12 pm

      Looks ok as long as the I.D is correct.

      What theme are you using and what file did you paste it into?

      Log in to Reply
  5. emily says

    April 10, 2014 at 5:16 pm

    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

    Log in to Reply
    • Brad Dalton says

      April 11, 2014 at 12:18 pm

      No worries Emily. Sure you learn’t something about conditional tags and hooks which will help you in the future.

      Log in to Reply
  6. emily says

    April 10, 2014 at 4:53 pm

    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');
    Log in to Reply
    • Brad Dalton says

      April 10, 2014 at 5:09 pm

      Just use 55

      Log in to Reply
  7. emily says

    April 8, 2014 at 7:17 pm

    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

    Log in to Reply
    • Brad Dalton says

      April 8, 2014 at 11:36 pm

      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.

      Log in to Reply
      • emiy says

        April 9, 2014 at 12:46 pm

        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.

        Log in to Reply
        • Brad Dalton says

          April 9, 2014 at 12:55 pm

          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.

          Log in to Reply
          • emily says

            April 9, 2014 at 1:30 pm

            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?

          • Brad Dalton says

            April 10, 2014 at 10:54 am

            So you the sliders to display on your portfolio archive page?

          • emily says

            April 10, 2014 at 12:04 pm

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

          • Brad Dalton says

            April 10, 2014 at 3:03 pm

            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.

          • emily says

            April 10, 2014 at 3:21 pm

            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

          • Brad Dalton says

            April 10, 2014 at 4:25 pm

            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. emily says

    April 4, 2014 at 11:28 pm

    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

    Log in to Reply
    • Brad Dalton says

      April 5, 2014 at 2:20 am

      Yes. Create 4 new sliders and hook them using the slider i.d with a genesis hook like before_loop or genesis_before_content

      Log in to Reply
      • emily says

        April 8, 2014 at 12:37 pm

        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

        Log in to Reply
        • Brad Dalton says

          April 8, 2014 at 12:57 pm

          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.

          Log in to Reply
          • emily says

            April 8, 2014 at 1:46 pm

            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.

          • Brad Dalton says

            April 8, 2014 at 2:36 pm

            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. Frances says

    March 3, 2014 at 4:27 pm

    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.

    Log in to Reply
    • Brad Dalton says

      March 3, 2014 at 4:34 pm

      Use the 3rd snippet in your functions.php file. Change the 88 in the code to the i.d of you slider

      Log in to Reply
      • Frances says

        March 3, 2014 at 4:43 pm

        Brad I forgot to mention, I’m not a newbie to wordpress but all I know to do is set up my studiopress themes, would you mind just for a second tell me where to find my slider ID? do you mean like “home”?

        Log in to Reply
        • Frances says

          March 3, 2014 at 4:50 pm

          I added the code and my site crashed. Oh boy!!! The very thing I didn’t want to have happen

          Log in to Reply
          • Brad Dalton says

            March 4, 2014 at 4:40 am

            You must have pasted it into the wrong file

        • Brad Dalton says

          March 4, 2014 at 4:40 am

          You’ll see it in the slider settings as shown in the screenshot

          Log in to Reply
  10. JA says

    December 30, 2013 at 8:00 pm

    Hey, I am trying use this slider, but I have a problem. I have 3 different soliloquy sliders w/different content on my homepage. How do I add them?

    Log in to Reply
    • Brad Dalton says

      December 30, 2013 at 8:12 pm

      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.

      Log in to Reply
  11. Wayne Plant says

    November 30, 2013 at 10:38 am

    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

    Log in to Reply
    • Brad Dalton says

      November 30, 2013 at 11:49 am

      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.

      Log in to Reply
  12. David Witt says

    October 29, 2013 at 12:09 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 29, 2013 at 12:18 pm

      Simply change the existing hook to something like genesis_before_content_sidebar_wrap http://wpsites.net/web-design/list-of-genesis-hooks/

      Log in to Reply
      • David Witt says

        October 29, 2013 at 12:52 pm

        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” ?

        Log in to Reply
        • Brad Dalton says

          October 29, 2013 at 3:25 pm

          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.

          Log in to Reply
          • David Witt says

            October 29, 2013 at 4:00 pm

            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.

          • Brad Dalton says

            October 29, 2013 at 4:20 pm

            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. Steve Heap says

    August 8, 2013 at 4:58 pm

    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

    Log in to Reply
    • Brad Dalton says

      August 8, 2013 at 5:01 pm

      Steve

      A conditional tag will do the job. You’ll find the code for it on this tutorial.

      Log in to Reply
  14. Jason says

    May 26, 2013 at 10:19 am

    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.

    Log in to Reply
    • Brad Dalton says

      May 26, 2013 at 10:22 am

      Hello Jason

      Please copy the code using the view raw link and paste it at the end of your child themes functions.php file using a code editor like Notepad++.

      Let me know if you get stuck.

      Log in to Reply
      • Jason says

        May 26, 2013 at 11:57 pm

        Thanks. That works. Love all the resources. Been on your site a lot today.

        Log in to Reply
        • Brad Dalton says

          May 27, 2013 at 3:36 am

          Good stuff Jason.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.