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
1
2
3
4
5
6
7
8
|
<?php
add_action( 'woo_header_after', 'woo_custom_post_header_image', 30 );
function woo_custom_post_header_image() {
if ( is_front_page() ) { ?>
<?php echo slider_pro(1, array("width"=>"100%", "height"=>300)); ?>
<?php
}}
?>
|
style.css
1
2
3
|
.home #nav-container {
margin-bottom: 0px !important;
}
|
Here’s a screenshot of the page with the slider at the top of the content, below the navigation.
Revolution Slider
Thanks to Tom Glen at Bay Staging who got the Revolution Slider working with Canvas using this code:
1
2
3
4
5
6
|
add_action( 'woo_header_after', 'woo_custom_post_header_image', 30 );
function woo_custom_post_header_image() {
if ( is_front_page() ) { ?>
<?php
}}
|
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?
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!
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
}}
cool site, tom.
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!
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!
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
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.
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!
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!
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
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.
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
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.
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!
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.
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!
If it ain’t broke … of course, this works well until something breaks!
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?
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?
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!
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?
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
}}
it did it again…
here’s what it stripping out.
echo do_shortcode( ‘[mega-slider id=”XXXX”/]’ )
inside the PHP tag
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?
That’s exactly the big question, isn’t it! The answer is that I don’t know for each slider. Maybe each plugin has some sort of code that it runs when you place the code not using a button or shortcode, but using code (PHP). It’d be nice to collect the correct code for each slider. I don’t know Layer Slider, but I assume it’s this one over at Code Canyon?
Hi Bradley,
Yes, it’s this one. It seems every theme is supplying a license for this lately :))
http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=kreatura
Thank you for your swift response.
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!
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 …
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.
Revolution slider 4.2.3 is not working on Woothemes Canvas 5.6.1 Need to change something :/
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.