Moving the slider anywhere

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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”

Comments are closed.