Howdy,
Here’s a quick recipe to change the slider position in Customizr (and Customizr-Pro), with only two lines of code!
By default the slider is hooked on the ‘__after_header’ hook (located in header.php template) in Customizr. To move the slider to another position in your website, you need to unhook from its original position, and then hook it to the desired one.
What is controlling the slider?
The rendering of the slider is done by tc_slider_display() method of the TC_slider class.
How to find a new hook for the slider?
The structural action hooks controlling the front-office rendering are located in php templates at the root of Customizr :
- index.php
- header.php
- footer.php
Just open those files and find the appropriate hook.
Case study : moving the slider to the top of the page
In the following example, I have choosen the ‘__header’ hook, which is used by every blocks of the header.
//we hook the code on the wp_head hook, this way it will be executed before any html rendering. add_action ( 'wp_head' , 'move_my_slider'); function move_my_slider() { //we unhook the slider remove_action( '__after_header' , array( TC_slider::$instance , 'tc_slider_display' )); //we re-hook the slider. Check the priority here : set to 0 to be the first in the list of different actions hooked to this hook add_action( '__header' , array( TC_slider::$instance , 'tc_slider_display' ), 0); }
Case study : moving the slider below the title in pages
In this case, the slider is moved below the page title. Home page and post layouts remain untouched.
//we hook the code on the wp_head hook, this way it will be executed before any html rendering. add_action ( 'wp_head' , 'move_my_slider'); function move_my_slider() { if ( !is_page() || tc__f('__is_home') ) return; //we unhook the slider remove_action( '__after_header' , array( TC_slider::$instance , 'tc_slider_display' )); //we re-hook the slider. Check the priority here : set to 0 to be the first in the list of different actions hooked to this hook add_action( '__after_content_title' , array( TC_slider::$instance , 'tc_slider_display' ), 0); }
Where to copy/paste this code? The best to customize a theme in WordPress is to create a child theme. Everything you need to know about child theme creation in Customizr here
That’s it!
If these snippet has been useful for you or you want to share some thoughts, just add a comment below!
66 thoughts on “Moving the slider anywhere”
https://uploads.disquscdn.com/images/ef4562245ae6f5b88f51d278dca14e765a30ffea0421c587af5ede7b32c875a0.jpg Hello can someone help me please? My website looks like from http://alpha-fenster.de/wordpress and as on the picture below it should look. Somehow does not work with the above code.
Thank you for your help in advance
Hi Anthony,
I don’t know if you were able to get this working, but one thing I noticed is you said “Neither of these codes in my custom css file in my child theme cause my slider to appear above my header bar.”
These changes need to be made in the functions file (functions.php) in your child theme, not the css file.
Hi Nicolas,
Thanks for the great design! I just passed in removing the slider on top of the page, so there isn’t a white space anymore. Is it also possible to move the menu in/above the header? So there’s no unnecessary space between the top of the page or between the slider and posts?
The menu is present within the header. You can definitely reduce the extra white space in the header using CSS.
Thanks! Oh sorry, I meant.. if it’s possible to place the menu in the slider? And do you also know the CSS to do that?
Hi,
It is not a standard requirement. It will involve some complex coding, I think.
Thanks for your reply! I got one more question… Is there a CSS code to
change the 3 bar menu color into white? And to change the background color of the slider menu?
I used this
.navbar .btn-toggle-nav .menu-label
.navbar .btn-toggle-nav .icon-bar
to change the menu titles, but the 3 bar logo/icon doesn’t change.
Hi Diana,
should do the trick for the 3 bar menu.
2 years ago I used the code from Case study : moving the slider to the top of the page.
Now I get the following errors and my homepage doesn’t show up anymore:
[19-Oct-2016 19:59:34 UTC] PHP Fatal error: Class ‘TC_slider’ not found in /home/elgecove/public_html/wp-content/themes/child-el-geco-verde/functions.php on line 8
[19-Oct-2016 20:05:53 UTC] PHP Fatal error: Class ‘TC_slider’ not found in /home/elgecove/public_html/wp-content/themes/child-el-geco-verde/functions.php on line 8
[19-Oct-2016 20:07:29 UTC] PHP Fatal error: Class ‘TC_slider’ not found in /home/elgecove/public_html/wp-content/themes/child-el-geco-verde/functions.php on line 8
Please advise.
Anthony
Hi,
Look at the release note of verison 3.4.30: http://presscustomizr.com/customizr-pro-v1-2-30-customizr-free-v3-4-30-release-note/
//class prefixes have been changed from TC_ to CZR_//
If you have used a child theme and used Class TC_slider, change it to czr_slider
Hope this helps
I am attempting to move my slider to the top of my webpage and this does not solve my problem. Even after making described changes to the code, my slider is still below the header/menu. What else do you think I may be doing incorrectly?
Hi,
This code moves the slider below content title.
Change this line
to
I was not clear, my apologies. I want my slider on my main homepage to be above the menus and logo, is this possible? Ideally I would like my logo overlaid on the top left of the slider permanently, but that may be a bit much.
Mainly I want my menu bar and login bar and tagline to be right below the slider on the main page.
If that’s not a possible thing for the pro version I understand.
Hi,
You need to do three things.
1. Use the first code snippet given.
2. Replace line no.8 as I have mentioned in my previous comment.
3. Uncheck against Sticky on Scroll under Sticky Header Settings in the customiser panel.
It does not work. I have tried two ways. Your way:
add_action ( ‘wp_head’ , ‘move_my_slider’);
function move_my_slider() {
remove_action( ‘__after_header’ , array( TC_slider::$instance , ‘tc_slider_display’ ));
add_action( ‘__header’ , array( CZR_slider::$instance , ‘czr_fn_slider_display’ ), 0);
}
and then this way:
add_action ( ‘wp_head’ , ‘move_my_slider’);
function move_my_slider() {
remove_action( ‘__after_header’ , array( CZR_slider::$instance , ‘czr_fn_slider_display’ ));
add_action( ‘__header’ , array( CZR_slider::$instance , ‘czr_fn_slider_display’ ), 0);
}
Neither of these codes in my custom css file in my child theme cause my slider to appear above my header bar.
Hi,
Did you uncheck Sticky on scroll?
I did. All three of your steps I have followed.
Hi
is it possible to do the following with the slider & is is a good idea.
I want to run my main slider as normal but I also wanted to add another slider into the sidebar just to show some photos of work carried out, you know the old before & after type.
I can achieve this by loading a slideshow plugin, but it adds extra bulk and code. So I thought why not use the resources already loading! Just looking now and messing around with some code already published but any help or pointers to how to get this done would be tremendously appreciated.
Thanks in advance
mark
Hello,
Sorry for my beginner question, but i am starting new with php and wordpress and need a litte hint. I wanted test the code snippet to move the slider on top of the menue. I added the code in the File header.php directly under do_action (‘__header’); – then i checked the site -> nothing changed ! Where is the misttake? It must be a bagatelle, but i didn’t find it.
thanks
ahmed
Hi, thanks for getting in touch !
Our team takes care of all support requests in the support forums.
If your issue is about the Customizr theme, please open a new thread in this forum : https://wordpress.org/support/theme/customizr
If you are a Pro user, you’ll want to open a new ticket here : http://presscustomizr.com/support-forums/forum/customizr-pro/
Cheers
Hi Rocco,
What are saying is that I don’t delete anything from the header section, I just paste in…
add_action ( ‘wp_head’ , ‘move_my_slider’);
function move_my_slider() {
remove_action( ‘__after_header’ , array( TC_slider::$instance , ‘tc_slider_display’ ));
add_action( ‘__header’ , array( TC_slider::$instance , ‘tc_slider_display’ ), 0);
}
OK thanks. One more question. Is it possible to list the notes on featured pages in form of points with bullets like be below each on its own line?
*websites
*Tech support
*…
Hi Simunji, this snippet is about moving the slider.
In order to keep this website clean and organized, please open a new thread in the support forum about your new question.
Thanks for your understanding!
I’m using the Adventurous Wordpress theme. What can I type into my css to move the slider above the Header Featured Image Options? Thanks.
Hi Sean, the snippet pulbished on our website uses WordPress code but are Customizr oriented. You might want to contact the developer of your theme to achieve what you want.
Thanks 🙂
I’m a bit confused by the color coding in the “Case study : moving the slider below the title in pages”. Could you possibly edit out the “do this, do that” bits and just write down what the coding is beforehand ans what it should look like after? That way I can just delete, copy and paste. Thanks, Nicolas.
Hello Sean,
are you referring to those line in orange?
There’s nothing weird there, they’re just php comments.
You can copy and past the whole snippet as is.
Bests
tc_slider_display()
do_action ( ‘__after_header’ )
?>
Hi Nicolas? First Thanks for the beautiful theme. I have just discovered it and gave it a try. I want to replcae the slider with Revolution slider which i did by deleting a section of code in header.php. The slider appears on the exact position as default one but unfortunately it on all site pages. How can i make it show only on home page?
This is the code i substituted with Revolution slider code:
tc_slider_display()do_action ( ‘__after_header’ )
?>
Regards
Hi Simunnji, the recommend way to extend/modify the theme is to use the hooks API.
You can use the customizer slider hook (describe on the current snippet) and hook anything you want, including a completely new slider like Revolution slider.
Then you can control where to display your new content with the conditional tags from WordPress.
Hope this helps!
Thank you for this code snippet it worked very nice and I appreciate your comments.
After making this change to the theme is it possible to get the logo to go beside the slider rather than the nav bar? And also when the screen shrinks for it to float above the slider rather than going below it?
Hello!!!
I would like to know if is possible to add the slider into the widget area.
Thanks a lot 😉
Hi Jose,
you can move the slider to any action hook, following the examples given in the current snippet.
You’ll find the list of all action hooks here : http://www.presscustomizr.com/customizr/hooks-api/
Example of sidebar hooks :
http://www.presscustomizr.com/customizr/hooks-api/#__before_right_sidebar_sidebars
http://www.presscustomizr.com/customizr/hooks-api/#__before_left_sidebar_sidebars
Hope this helps!
Hi Nicholas,
Thank you for this wonderful theme and all your help!
I am trying to move the slider below the page title but for a reason the above code did not work.. ant thoughts?
I pasted it in the custom css.
Thank you in advance.
Hi Loanna, this code has to be pasted in the functions.php file.
More about customizing the Customizr WordPress theme here : http://www.presscustomizr.com/customizr/how-to-customize-customizr-wordpress-theme/.
Thanks and enjoy the theme!
I was wondering how to get the slider to display in the actual content. After I removed the slider from the page, I was using the wordpress filter;
but I can’t seem to call the actual slider in my function
Doing this because I am moving the Content Header (at least trying to) above the loop and I want to make the slider smaller with text wrapping around it.
Hi Sean,
Here’s a snippet to implement what you want. You can add some conditional tags to have more controls on the context in which you want to apply this slider location change.
Best and I look forward to reading from you
THANK YOU!!
Hello,
I used this code to move the slider to the top of the front page. Result is that the logo and navigation menu are under the slider, as I would like to have it. But now the logo and the menu are not horizontally aligned anymore. Directly under the slider on the left side the logo is there and UNDER the logo is the menu.
Before they were perfectly horizontally aligned above the slider. I have tried searching CSS code to align them but nothing helped.
Also I would like to know were I should how the code will be if I only want the slider on the front page (static) on top. Rest of the posts/pages normal.
I am using a child theme. I just started with the design of this site so the funtion.php and the style.css in the child are ’empty’.
Thanks in advance for the help. I appreciate it.
Best Regards,
Vince
Hi Nicolas,
I was wondering if there was any way to center the gray box inside the slide?
Thank you for such a beautiful design =)
Hi Jennifer,
Simply add those line of CSS in the custom CSS section :
Hope this helps!
Hi Nicolas,
It definately helps! However, the slider now is not full-width anymore. It seems constrained by the layer it is placed in now.
Cheers!
Also, I noticed that the slider cuts of some of the bottom of the images. Is it possible to prevent this from happening, or is it due to the original image size being the wrong aspect ratio?
Cheers, Peter
Hi Nicolas,
Would it also be possible to move the slider on the pages only, but leave it where it is on the home page? I would like to move it below the page title. Of course, moving the page title above the slider would also work. The main thing is that I would like the front page to remain untouched.
Peter
Hi Peter, I have updated the snippet with this case.
Hope this will help you, cheers
Can I put a slider on a category page?
Hi Joshua, you might be interested by this freshly created snippet : http://www.presscustomizr.com/snippet/displaying-a-slider-in-your-category-pages/
Hope this helps!
Hi Nicolas!
How can I move the slider below post or page articles while on the frontpage still at default location?
Hi John, you need to use the WordPress conditionnal tags to do so.
More about this here : http://codex.wordpress.org/Conditional_Tags
Hello, everybody!
How can I move the slider a little bit lower? e.g. 30-50 px down
Nicolas!
Nice to hear from you for the very first time!
Now, as I am new to everything and I have been learning everything from your experiences, I just don´t know how to use this file function.php along with style.css and my child theme.
Could please let me know where to put these three boys together? In the same folder I suposse?
And, the most difficult thing for me to understand given the fact that I have already followed all the steps you posted before.
Please I really want to use functions.php in my Customizr theme.
Thanks for everything! I love Customizr!
Samuel
Hi Samuel, you might want to learn the basics from the WordPress codex before diving more into theme customizations : http://codex.wordpress.org/Functions_File_Explained
Cheers
Hi Nicolas! Nice to meet you man! Nice to meet everybody from this great Customizr community!
I am totally a newcomer to Wordpress and coding. So I would like to ask you for some really important thing to me.
Please,
Teach me how to move the shadow around the three circles (Highlighted pages) because I turned my background into white and every time I hover over the circles they pop up in the original color.
I hope you can understand me Nicolas! Hope to hear from you soon!
Samuel
Hi Samuel, you might want to check those Customizr theme’s featured pages snippets to find a solution.
Hope this will help and enjoy the theme!
is it possible to change the size of the slider?
Sure, it’s easy : check this snippet : Change Customizr slider height
Hey Nicolas,
I just wanted to say I absolutely love your theme. I have created a child theme and was wondering where the above snippet is supposed to go. Can I put it in my functions.php file?
Thank you,
Alex
Hi Alex, thanks for your comment.
Yes this snippet has to be pasted in your functions.php of the child file :
Your functions.php file willl look like this :
That’s it!
Thank you for the quick reply. Can this method of relocating the slider also be used to relocate the the three featured pages? For instance could I place the three pages after the optional static page on the homepage?
Thank you,
Alex
Hi,
Yes you can apply the same methodology if you need to move the featured pages. Check this snippet : How to move Customizr Featured pages
Sorry for the repeat post, I didn’t say that the comment was awaiting moderation. I thought I just forgot to post it.
I can’t get the css code above to move my slider to the top of the screen. I’ve constrained the size of the slider so that may be what is preventing the move to the top. Any help would be greatly appreciated.
Hi! This is VERY helpful!
I have been using the Custom CSS area – is the above html so I will need this changed to to CSS?
If yes, what is the best way to know how to do that?
Thanks!
No problems, you can use also use the custom CSS!
Cheers