Move the featured pages block anywhere on front page

⚠️ 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 simple recipe to change the featured pages block position in Customizr, we two lines of code!

Like for the slider positioning, we will :

1 find the method controlling the featured pages block

2 identify the wanted hook to place the block

3 write the code in functions.php

 

By default the slider is hooked on the ‘__before_main_container’ hook (located in the index.php template) in Customizr. To move the featured pages to another position in your website, you need to unhook it from its original position, and then hook it to the desired one.

 

What is controlling the featured pages block?

The rendering of this block is done by tc_fp_block_display() method of the TC_featured_pages class.

 

How to find a new hook for the featured pages?

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 featured pages to the top of the home page

In the following example, I have choosen the ‘__before_header’ hook, which will execute some code before the <header>…</header> block.

How to locate hooks in customizr? Check this snippet here

//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_fp');
function move_my_fp() {
	//we unhook the featured pages
	remove_action  ( '__before_main_container', array( TC_featured_pages::$instance , 'tc_fp_block_display'), 10 );

	//we re-hook the block. Check out the priority here : set to 0 to be the first in the list of different actions hooked to this hook 
	add_action  ( '__before_header', array( TC_featured_pages::$instance , 'tc_fp_block_display'), 0 );
}

 

Case study : switching the positions of the slider and the featured pages on front page

In this case, we simply have to switch the hooks of the callback functions for the slider and the featured pages.

remove_action ('__after_header' , array( TC_slider::$instance , 'tc_slider_display' ));
remove_action  ( '__before_main_container' , array( TC_featured_pages::$instance , 'tc_fp_block_display'), 10 );

add_action ('__before_main_container' , array( TC_slider::$instance , 'tc_slider_display' ), 10);
add_action  ( '__after_header' , array( TC_featured_pages::$instance , 'tc_fp_block_display'));

 

Where to copy/paste this code? The best  way 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!

Leave a comment

Your email address will not be published. Required fields are marked *

57 thoughts on “Move the featured pages block anywhere on front page”