Moving the slider anywhere


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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.

 

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.

 

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!


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



66 thoughts on “Moving the slider anywhere

  • SaRita Custis

    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.

  • Diana

    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?

    • Menaka S

      The menu is present within the header. You can definitely reduce the extra white space in the header using CSS.

      • Diana

        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?

          • Diana

            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.

            • Menaka S

              Hi Diana,

              should do the trick for the 3 bar menu.

  • Anthony Moldena

    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

      • Anthony Joseph

        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?

        • Menaka S

          Hi,
          This code moves the slider below content title.
          Change this line

          to

          • Anthony Joseph

            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.

            • Menaka S

              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.

            • Anthony Joseph

              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.

  • Mark

    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

  • Ahmed

    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

  • Sean

    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);
    }

  • Simunji

    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
    *…

    • Nicolas Post author

      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!

      • Sean

        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.

        • Nicolas Post author

          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 🙂

          • Sean

            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.

            • Rocco Aliberti

              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

  • simunnji

    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

    • Nicolas Post author

      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!

  • Leah

    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?

  • Ioanna

    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.

  • Sean

    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

    • Sean

      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.

      • Nicolas Post author

        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

  • Vince

    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

  • Jennifer Castano

    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 =)

    • Nicolas Post author

      Hi Jennifer,
      Simply add those line of CSS in the custom CSS section :

      Hope this helps!

  • Peter Blesgraaf

    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!

    • Peter Blesgraaf

      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

  • Peter Blesgraaf

    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

  • John

    Hi Nicolas!

    How can I move the slider below post or page articles while on the frontpage still at default location?

  • Samuel

    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

  • Samuel

    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

  • Alex

    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

    • Nicolas Post author

      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!

  • Sue

    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.

  • Cari

    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!

Comments are closed.