Primary Nav

Full-Width Slider in WOO Canvas

Oct 2013 Update: WOO Ninjas add full-width slider option to Canvas’s own slider!

There’s been some chatter over in the WOO Themes forums about a full-width slider in Canvas. I personally love the full-width slider in Scrollider, but I wanted something like it in Canvas. I’m sure the WOO Ninjas will bring it into Canvas at some point, but until then, here’s how to get a full-width slider into Canvas. The screencast walks you through how to set it up.

SliderPro

I chose Slider Pro because I owned it and it’s powerful and it gets good performance review over at Chris Lema’s awesome slider review. Remember that because I’m adding a bit code into the functions file, I need to chose the checkbox to use the slider’s skin. If you don’t do that, it doesn’t work quite right. I added the slider code into the functions file, I made a few tiny CSS adjustments, then it’s just up to you to create a beautiful slider. Have at it! If you do and you like the results, post them in the comments. If you do it and hate it … uh, try again and then post in the comments. 🙂

functions.php

style.css

Here’s a screenshot of the page with the slider at the top of the content, below the navigation.

The WOO Ninjas will come up with it at some point, but until then, here's a slider that goes full-width and is responsive.

The WOO Ninjas will come up with it at some point, but until then, here’s a slider that goes full-width and is responsive.

Revolution Slider

Thanks to Tom Glen at Bay Staging who got the Revolution Slider working with Canvas using this code:

 

 

, , ,

34 Responses to Full-Width Slider in WOO Canvas

  1. Tom Glen June 7, 2013 at 9:34 am #

    Thanks Bradley, this is exactly what I was looking for!. Out of interest, how easy do you think it would be to use Revolution slider in place of Slider pro?? I’ve used revolution slider before and really like some of its features. Would it just be the same process to install?

    • Bradley Charbonneau June 8, 2013 at 7:13 am #

      Hey Tom, I would think you’d just need to grab the code/PHP version of the slider to insert into the functions.php file and give it a go. I just checked and I don’t own Revolution, but please give it a shot and report back here if it worked. Would love to see it in action!

  2. Tom Glen June 11, 2013 at 2:46 pm #

    Yeah it worked a treat with just a small edit to your code (pasted below). I’m really pleased to get this working with canvas! The site is Bay Staging. if you wanna see revolution slider in action. Thanks for all your help. Tom

    add_action( ‘woo_header_after’, ‘woo_custom_post_header_image’, 30 );
    function woo_custom_post_header_image() {
    if ( is_front_page() ) { ?>

    <?php
    }}

    • kendo August 27, 2013 at 1:26 pm #

      cool site, tom.

  3. John Bendever, Jr. June 18, 2013 at 9:19 am #

    Is it not possible to do this with the slider included with Canvas?

    I would really like to keep from using other plugins so I can reduce any possibilities of conflicts down the road.

    Thank you in advance for the help!

    • Bradley Charbonneau June 19, 2013 at 11:18 am #

      I completely agree: I’d rather not use yet another plugin–that’s one of the reasons I like Canvas so much, it helps me reduce plugins. But as far as I know, the built-in Canvas slider doesn’t do full width (100%) I think you can only choose pixel width. If/when the update that, I’ll be thrilled. Unless you (or anyone else) knows that it’s possible, would love to hear about it!

  4. Chris Darts June 23, 2013 at 11:30 pm #

    Hi Bradley,

    Thanks for your great post about adding a full width slider to Canvas.

    I have followed your instructions, using Slider Pro, but it doesn’t seem to be working as it should. I was wondering if you may be able to take a look quickly and see if there’s anything I’m doing wrong: http://dev.exclusivegp.com/

    I have set the ‘Image Align & Scale’ to ‘Top Left’ and ‘No Scale’. I have tried with the other settings, but that doesn’t seem to help.

    As well as the slides not appearing properly, I would ideally like to set the height of the slider to 100%, rather than a fixed pixel height, as the height should change according to the screen dimensions of the viewers computer.

    Any help would be greatly appreciated.

    Thanks,

    Chris

    • Bradley Charbonneau June 24, 2013 at 3:29 am #

      Hi Chris,

      Hey, looking good! But my first guess is that you don’t have a skin selected. See above in the post, ” … chose the checkbox to use the slider’s skin.” I realize you probably don’t want a skin, but because it’s code going into a functions file it seems to need the skin checked–otherwise, it loses some of the features (like working correctly). Let me know if that helps.

      • Chris Darts June 24, 2013 at 3:40 am #

        Hi Bradley,

        Thanks for your quick response. I tried ticking the ‘skin’ box before and it stopped the slider working completely. However, I just tried again now and it works fine!!

        Thank you for your help with this, it’s very much appreciated.

        Chris

        P.S. I’m intrigued by the name of your test website ‘Likoma Playground’ as I lived in Malawi for 4 years!

        • Bradley Charbonneau June 24, 2013 at 11:24 am #

          It might be one of those “Turn it off and then turn it back on.” low tech tricks … that I love.

          4 years in Malawi!? I’m so jealous. We were there for about a month but it’s always been a special place for me and my wife. Such a special place in fact that I named my company after it. Were you in the Peace Corps?

          I just checked out your site again and see it’s working. My mother-in-law LOVES Formula 1. I’ve always wanted to get her a gift of a trip to a Grand Prix somewhere, ideally Monaco. I think she might be getting too old, but she’d love it.

          What are you using to make the gallery on this page: Monaco Grand Prix 2014? Looks great.

          Stick around, I’m building this site more and more all about Canvas. Would love your feedback as a Canvas user. What kind of help are you looking for?

          Thanks, Chris!

          • Chris Darts June 28, 2013 at 1:10 am #

            Hi Bradley,

            I was working for a number of different NGOs in Malawi. The last one was really interesting – http://baobabhealth.org/ (the website hasn’t been updated for ages, but it should give you a good idea what they do!).

            I’m in the process of moving the EGP site over from Joomla to WordPress (Canvas). I’ve used Canvas a lot before, but this is really pushing the customisation and plugin add-ons, especially with WooCommerce.

            The gallery page at the moment is just a standard WordPress page with the WooThemes column layout, with some extra styling. Nothing too complicated, but it seems to work well.

            I would love to help out or provide some feedback regarding Canvas on your website. I’m flat out at the moment trying to finish the Grand Prix site, but once that’s done I should have a bit more time to contribute some ideas.

            Keep in touch.

            Chris

            • Bradley Charbonneau June 28, 2013 at 3:01 am #

              At first glance, I thought Baobab Health was about … the health of the trees! Wow, does sound really interesting.

              Joomla to WordPress, to Canvas–even better! Looking forward to seeing how your site turns out. Thanks for your offer of help. Anytime is great, I’m not in a big rush, trying to just take this slow but consistent.

  5. John Bendever, Jr. June 24, 2013 at 2:18 pm #

    Bradley,

    After installing this on my domain, I am getting errors each time I try to update posts or change images.

    Here is an example of an error:

    Warning: Cannot modify header information – headers already sent by (output started at (removed for security)/wp-content/themes/hospiceofnm/functions.php:24) in (removed for security)/wp-includes/pluggable.php on line 876

    • Bradley Charbonneau June 26, 2013 at 12:48 am #

      Hi John,
      Just guessing here, but did you triple check that you have the code in the functions.php file correctly in there? No extra blank spaces or brackets or periods or commas? Sometimes I’ll go to the end of a file and just hit delete a few times to make sure there aren’t any blank spaces.

      You wrote above that you were hoping to use the Canvas built-in slider, but are you now trying Slider Pro? If so, are you checking the box to use a skin (even if you don’t really want to use a skin)? ” … chose the checkbox to use the slider’s skin.”

      Let me know if that helps.

      • John Bendever, Jr. July 10, 2013 at 8:29 pm #

        Bradly,

        Can you tell me how to add sliders to other pages too? Possibly by page ID? The client is wanting unique sliders on specific pages. I would like to be able to call the sliders by specific page and leave a main slider on every other page.

        For instance:

        Homepage – Slider 1
        Services Page – Slider 2
        About Page – Slider 3
        Contact Page – Slider 4
        All other pages – Slider 5

        Thank you in advance for the help!

        • Bradley Charbonneau July 11, 2013 at 8:51 am #

          I suppose you mean full-width sliders? If that’s the case, it’s going to be some conditional PHP in there. This is where the Business Slider works well … but as far as I know, we still can’t make that full width. See if that conditional PHP spaghetti code helps you at all.

          • John Bendever, Jr. July 11, 2013 at 9:35 am #

            Bradley,

            Thank you for the reply. You are correct. After examining your code closer, here is what I came up with on my own:

            “100%”, “height”=>225));
            }
            else if ( is_page( 43 ) ) {
            echo slider_pro(2, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 670 ) ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 34 ) ) {
            echo slider_pro(4, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 674 ) ) {
            echo slider_pro(5, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 407 ) ) {
            echo slider_pro(6, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page() ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page_template( Blog ) ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            }
            ?>

            I am not sure how this falls under best practices, but it is working. I assigned the desired slider to each page the client designated:

            “100%”, “height”=>225));
            }
            else if ( is_page( 43 ) ) {
            echo slider_pro(2, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 670 ) ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 34 ) ) {
            echo slider_pro(4, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 674 ) ) {
            echo slider_pro(5, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page( 407 ) ) {
            echo slider_pro(6, array(“width”=>”100%”, “height”=>225));
            }

            Then assigned a generic slider to all other pages and the main blog page:

            else if ( is_page() ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            else if ( is_page_template( Blog ) ) {
            echo slider_pro(3, array(“width”=>”100%”, “height”=>225));
            }
            }
            ?>

            I would love your thoughts on this method. Thank you again for taking time to help and answer questions!

            • Bradley Charbonneau August 27, 2013 at 5:21 pm #

              If it ain’t broke … of course, this works well until something breaks!

  6. Craig August 19, 2013 at 9:06 am #

    Thanks for this info – I’m trying to do the same thing with Mega Slider. Has anyone been successful with this slider as a replacement for the default Canvas slider?

    • Bradley Charbonneau August 19, 2013 at 8:16 pm #

      Hi Craig,
      I don’t know Mega Slider, but maybe something like the trick with Slider Pro might help: choosing something like “Use Skin” or something that “embeds” the slider instead of just naked code. That’s what worked with Slider Pro anyway. Post back here if you figure it out. Do you recommend Mega Slider?

  7. Craig August 20, 2013 at 9:31 am #

    Thanks, Bradley,

    The Mega Slider is a lot more intuitive than many of the others I’ve tried. I was successful adding the slider with the following added to the functions.

    add_action( ‘woo_header_after’, ‘woo_custom_post_header_image’, 30 );
    function woo_custom_post_header_image() {
    if ( is_front_page() ) { ?>

    <?php
    }}

    Thanks for the hints to get things started!

    • Bradley Charbonneau August 27, 2013 at 5:22 pm #

      Hi Craig, but what are you using to call the Mega Slider? For SliderPro it was this:
      echo slider_pro(1, array(“width”=>”100%”, “height”=>300));
      so was it something similar for Mega Slider?

      • Craig August 28, 2013 at 4:08 am #

        It looks like some of the code was stripped out of the original post.

        I used a short code without specifying any height or width settings

        add_action( ‘woo_header_after’, ‘woo_custom_post_header_image’, 30 );
        function woo_custom_post_header_image() {
        if ( is_front_page() ) { ?>

        <?php
        }}

        • Craig August 28, 2013 at 4:10 am #

          it did it again…

          here’s what it stripping out.

          echo do_shortcode( ‘[mega-slider id=”XXXX”/]’ )

          inside the PHP tag

  8. kendo August 27, 2013 at 1:29 pm #

    Hi Bradley,

    Could you do one for layerslider too, as it’s pretty popular.

    if you can’t, could you tell me what to change (or how to find out) the bit in your your functions.php code – the bit that says “echo slider_pro” how do I find out what to type?

  9. Stuart Edwards August 27, 2013 at 5:10 pm #

    Huge thanks for this – I’ve been looking for a full width slider for Canvas for AGES!

    The code seems to be breaking my site though unfortunately. I’ve pasting the code you mentioned into my functions.php file

    “100%”, “height”=>300)); ?>

    It crashes my site and I have to go edit it via FTP to get it working again.

    Any ideas?
    Thanks!

    • Bradley Charbonneau August 27, 2013 at 5:25 pm #

      Hi Stuart, Usually it’s a missing tiny little piece: a comma, even an extra blank space, or what’s usually a killer a “smart quote,” so not the straight ones but the curly cue ones. Know what I mean? See anything like that? That kind of stuff breaks sites …

  10. Jason Rhodes November 24, 2013 at 10:13 am #

    Hi,

    In the code at the top of this page it also mentions what’s need to get Revolution slider working in Canvas, and this is the code supplied:

    add_action( ‘woo_header_after’, ‘woo_custom_post_header_image’, 30 );
    function woo_custom_post_header_image() {
    if ( is_front_page() ) { ?>

    <?php
    }}

    But it seems that this site is stripping some code out, is there any way of me getting this full coded needed?

    Cheers.

  11. NoMan March 6, 2014 at 8:39 am #

    Revolution slider 4.2.3 is not working on Woothemes Canvas 5.6.1 Need to change something :/

    • Bradley Charbonneau March 19, 2014 at 9:04 pm #

      Hmm, I wonder if it’s 4.2.3 or 5.6.1 that broke something. This is a good case of how third-party plugins don’t provide a long-term solution as far as compatibility. I’m writing more about it here.

Trackbacks/Pingbacks

  1. Canvas 5.5.4 | WordPress U - December 6, 2013

    […] want to get some sort of (other) styling in there, I sometimes have to turn to another slider like Slider Pro. But now with shortcodes in there, that lets us do buttons, info boxes, custom fonts. This is a […]

  2. Law firm chooses professional and clean site in WOO Canvas - December 23, 2014

    […] photography chosen by art director Lauren Deane Evans to get that look just the way they want it. Slider Pro helps out to get a nice looking slider that fades in and out with ease, showing off some friendly […]

Leave a Reply