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!
57 thoughts on “Move the featured pages block anywhere on front page”
Is there a way to show the featured pages ONLY on Mobile?
Never mind my previous posts, I realised I missed the notes since the update the change of prefixes, and have worked out how to modify it to suit…
array( TC_featured_pages::$instance , ‘tc_fp_block_display’)
now becomes
array( CZR_featured_pages::$instance , ‘czr_fn_fp_block_display’)
And now the code snippet works like a charm again! 😀
OK Perfect. thanks for the update !
Whoo, thanks! I had changed to CZR_featured_pages, but hadn’t changed to czr_fn_fp_block_display, and it wasn’t working. You saved me some headaches by posting your solution!
Up until the latest version (3.4.31) this snippet used to work in my Child theme functions.php file.
I checked the hooks api page and those hooks appear to still exist, but when in the functions.php file it makes the whole site show up as a blank grey page (F12 shows the site is still loading though)
Is there something different in this latest version that I am missing?
// MOVE FEATURED PAGES BELOW CONTENT ON FRONT PAGE
//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 ( ‘__after_main_container’, array( TC_featured_pages::$instance , ‘tc_fp_block_display’), 0 );
}
It is working now, I have changed the code on the root of my website.
Hello I tried everything but it still wont show after the content and before the footer, I don`t know what I am doing wrong.
Hello Nicolas. I am using your theme and its awesome, yesterday I made a child theme and after reading all comments I still cant put the featured pages after all my content and right before my footer, I tried every code that is here, only the one method Gareth did because I don`t understand it completely, I am a beginner in php. Can you please help me?
Nicolas, thank you for a great theme and your support as we will be using this theme for many sites! I am using a child theme of Customizr v3.4.13. I would like to have a “full width of site” single image (just like the slider but with one image) show below the slider and the featured pages block. When I upload an image when I edit the home page and choose maximum size, it only shows the size of the template and not full with of site like the slider above it. It is like the default setting is making the large image just small enough to fit within the templet with a border on each side. How do I make that image full width of site please?
Hi, is there a way to get the featured pages circle vertically centered on the page (independently from the monitor size)?
cheers!
I am really perplexed. I followed the instructions given and have since gotten a fatal error and now my entire site is gone. I have no idea what went wrong, or even how to fix it. Is there anyway you can possibly tell me what happened? This is the error I am getting : Fatal error: Class ‘TC_slider’ not found in /home1/ab23421/public_html/wp-content/themes/ocm/functions.php on line 2. And I can’t get to my dashboard or even to anything on my site to try to change it. When I try to change the .php file from the backend there is nothing there. I cannet even get into wordpress anymore! Help please.
Hi Jana,
This page might help : http://doc.presscustomizr.com/customizr/diagnosing-problems-customizr/
Don’t worry this is very common when working in functions.php
Thank you, thank you, thank you! I figured it out and found my site again! I am so happy with the theme. Thank you for all of your hard work and support!
What do we do for version 3.3+ using a child theme to achieve this?
Hi,First Thankyou for this beautiful theme,I love it.I am using this theme for a website. I am using the child theme of customizr
I am working on the codes to put the main container above the featured page and featured page above the footer,I have used the code as mentioned above just to appear it before the footer section.My code looks with one change
The problem is that the changes appear when I add it locally on my server on my PC but doesn’t work when I add the same code on the functions.php file on the server for the website.There seems to be no changes.Please let me know the fix.
Thanks.
I have added the code to change the featured images to appear after the main container. I have been using the child theme however the code works while i work locally on my computer but doesn’t seem to make any change while I add the same code in the functions.php in my website themes folder.
My code is 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 ( ‘__after_main_container’, array( TC_featured_pages::$instance , ‘tc_fp_block_display’), 0 );
}
Please let me know what am I doing wrong or what more should I change for the site.
Thanks
Actually, I just realized that this page appears if I try to navigate anywhere from this page. Everything seems to have crashed — I can’t even access my dashboard without this page appearing. All I did was copy/paste the above text into the .php editor of the child theme and now the entire thing seems to be completely corrupted. What has happened!?
Hey! I’m having the same problem as Grant. I want to switch my featured pages block with my main content block (above the footer), but I am garbage with coding and php jargon. I plugged in the child theme for Customizr and now I am in the .php fuctions editor via the Wordpress dashboard for the child theme. I copy/pasted the code you just posted for grant, and still I receive this message: syntax error, unexpected ‘3’ (T_LNUMBER) in /home/content/p3pnexwpnas04_data02/87/2432287/html/wp-content/themes/childtheme/functions.php on line 5
help?
Hi everyone, i have just started using this theme today and i have ran into a bit of a hitch.
what i need to do is move my featured pages to the bottom of the page, just above the footer. i have tried using two lines of code to enable this but i just don’t know where i am going wrong. (yes the Featured pages is active)
this is what i added.
add_action ( ‘__after_main_container’ , array( TC_featured_pages::$instance , ‘tc_fp_block_display’));
what happens then is i get this error
Fatal error: Class ‘TC_featured_pages’ not found in /home4/tea/public_html/wp-content/themes/kn1/functions.php on line 3
i am completely new to php so i probably shouldn’t be doing this but it’s a good job it’s easier to delete code than it is to create it 😀
Hi,
If you use a child and pasted this code into your functions.php, then this error is norma because the functions.php file of the child theme is beind parsed before the parent theme’s one.
You’ll have to wrap your wanted action into a WP hook that is fired once the parent theme has been parsed.
As an example, you could do the following :
add_action('wp' , 'move_my_featured_pages');
function move_my_featured_pages() {
add_action ( ‘__after_main_container’ , array( TC_featured_pages::$instance , ‘tc_fp_block_display’));
}
I hope this will help,
Cheers
Hi,
I hardly delve into the php of the website, I just tend to use a child theme to edit the css.
…I am also wondering how to switch the position of a post on my page, which is beneath the featured page circles. I want this post to be above this. I am confused as where to paste things and in which files. Would someone be able to give me a simple step by step guide (simpler than the one above) apologise if it seems simple and straightforward, I’m just very confused.
Thanks
Hi Chris,
Using a child theme is a very good practice, that’s a perfect starting point! 🙂
You’ll want to post this step by step guide request on the Customizr user forum.
We’ll do our best to help and it will benefit to everyone.
Thanks !
Hello,
I really love your theme, great great job.
I would like to make you a question,in the main page (where the slider is) the estructure is logo and menu, then the slider, then 3 parts where I can saw 3 pages and then it appears like a summary of the pages I wrote, can I take away the resume of this pages? So I want to have after the resume of the 3 pages with the 3 pictures above, the footer just after that part. I dont know if I explained it well.
Just let me know.
Thanks a lot!!!
Hi Alex,
I don’t really understand what you want to do with the featured pages…
Could you please try to explain it ?
Thanks
Hi Nicolas,
sorry I didnt explained it well….
I will try again, sorry for spending your time
When you get in to the home of the web page you will see like 5 parts.
part 1.- Title of the web or logo
Part 2.- Slider
Part 3.- 3 resume of pages with pictures in circles
Part 4.- the first paragraph of the 3 pages that I put in the part 3
Part 5.- the footer
Well what I want to do is to remove the part 4 is it possible??
If my explanaition is not good enough like this I will take a screenshot of the web and I will mark the part that I´m talking about.
if you need this picture please let me know how I can publish it here or how I can send it to you.
Thankyou very much!!!
Álex
You can set your own content (including empty content) for the featured pages excerpt in appearance > customize > front page.
Hope this helps!
Hi, thanks for the answer. In that part I can customize the 3 pages with the picture and a 200 character resume, but just under that resume it appears the text of the full page that I decide to put in the three spots above. If I turn off the option feautured main page it dissapear the 3 circle pages with the summary and the full text of the pages that I selected before.
I just want to make dissapear the full text of the pages but I want to leave in the main page the 3 circlepages with the summary under the pictures.
Thanks
Any help is welcome, please!!!
Hi I found this information
This is the structure that you published in http://presscustomizr.com/customizr/guide-css-html-customizr-wordpress-theme/
Logo — Social Icons — Tagline —
— Navbar Menu —
———————————–
— Carousel / Slider —
— FP1 FP2 FP3 —
— Post/Page —
— Footer One – Footer Two – Footer Three —
What I want to remove is the post/page
How I can do it??
Thanks!!!
Hello,
I’m probably messing things up, when I pasting the code on my functions.php (i’m using a child theme) the webstie just crash. I’ve to edit it back through filezilla…
is it something really small missing in the code?
By the way I’d like to move the featured pages below the “sticky page” used as my homepage, so that the short text would display right after the slider and before the FP is it possible?
thx a lot
Hi François, I am currently updating de Customizr hooks api documentation where you’ll find all the necessary hooks to move your FP block anywhere.
Hi nicolas,
That helped quite a bit. I didnt get right the “hooking” terms before, it’s all good now.
Many thanks again to the whole team!
I mean without changing the core ‘comments.php’…
Best
Hi Loic,
Yes this is possible but you are not in the relevant snippet to ask a question about comments.
Can you please open a new thread in the Customizr WP.org forum? We’ll do our best to help!
Thanks
Hello Nicolas,
Is it possible to change the order a appearance of the comment area, to have the comments-list before the comment-respond? So people read the comments before posting any other comments…
Best wishes
Nicolas you are a legend! This has made my life (& work) so much easier & rewarding! Look forward to it.
As per Arik & Kristap, is there a way of moving the featured pages snippet to another page? Thanks! Love this theme am using it on four totally different sites 🙂
Hi Leanne, This will be possible soon, I’m on it!
Stay tuned!
Thanks
Thanks, Nicolas.
Hi,
Thanks for the nice theme, Nicolas.
I want the featured pages and the slider to switch position on the homepage.
I tried the above code in the child theme, but then the featured pages are above the menu and everything.
I understand I have to chose the right hook. Which one should I choose?
Thanks
Hi Gisbert, I have just updated the snippet with this switch position example.
Hope this will help and enjoy the theme!
Hi Nicolas,
I was wondering is there a way to put the featured page block in a custom page instead of featured page?
In our website we plan to make the first page a splash page so I have made a custom template for that with the front-page.php option.
But since I needed to redirect people to the first real content page using a custom permalink ( snowbros.lv would direct to the splash page and snowbros.lv/main would then direct to the main page) I put a blank page in the wordpress options as the front page.
Hello Nicolas,
Love your theme. Is there a way to add text above or below the featured pages block? I have seen it done on a few of your showcase themes. Thanks,
Hi Steve, you can easily add content below the featured pages with the ‘__before_main_container’ hook and a priority of at least 30.
Hope this will help you, cheers.
Thanks Nicolas for getting back to me so soon. I found the link in the blog to do this. (http://www.presscustomizr.com/snippet/add-content-above-featured-pages/).
Hello,
I would like to add a paragraph (company vision/explanation) before the featured page block. Can you please gives me a step by step guide as to how I would go about this? Thanks, and I love this theme!
Hi Robyn, add action to the ‘__before_main_container’ hook and set the priority to 0 to do that.
Hope this helps!
Hey, you talk about the vertical location of the feature block, but how do I align it to the left of the page instead of the center? Thanks!
Hi Jess, I would recommend to do that with CSS. Use the developer tool of your browser (press F12) to find the HTML elements to target.
Have fun with the theme, cheers.
Hi,
I have a couple of questions about featured pages.
Is it possible to modify the number of featured pages we have above three?
Is it possible to use different featured pages on other pages?
Thanks,
Mike
Hi Mike, this is possible of course and you have examples of that in the Customizr theme’s showcase.
It requires quite advanced programming skills since there are no options available from the WP admin to do it.
Thanks for using the theme
Hello Nicolas,
I like how you did the boxes on your site. However, where your boxes are, I’d like to add a 468×60 Ad and I don’t see how I can do this easily. Is there another way I can accomplish this?
Is there a way to move the featured pages from the front page to another page?
On second thought: I don’t exactly need to move the featured pages. The only thing I want to use is the zoom effect. Can I apply it to any other picture?
Yes I would also like to know how to move the hover circle effect to different pages. I’ve done it with a previous version of Customizr but the theme has changed quite a bit I think so now I am stuck. It is such a fantastic theme. Thank you!
Please excuse me if I am being ignorant but I am still learning to understand PHP.
I am running the customizr theme with a child theme.
I wanted to move the featured pages block to below the main content and before the footer.
If I am correct, I have gathered from previous posts and comments that you add code based on the the above code to the functions.php file, in the child theme, in order to move the featured pages block. However this did not work for me, I ended up finding that if I copied the /parts/class-content-featured_pages.php (retaining the file path) file to my child theme and edited the TC_featured_pages class, I got my desired result.
Specifically I changed line 24 to read
I still am unsure how the code you’ve provided above is supposed to work. I don’t know if my method was correct or not but it’s working for me.
Thanks
Hi Gareth, you don’t have to apologize for your php skills : we are all “ignorants”!
You managed to do it by overriding the core class and that’s fine.
I just realized that my code was missing something. To be properly used in a child theme, it has to be hooked after the parent theme classes have been instantiated.
I just made the correction in the post above.
Thanks for pointing this out and have fun with the theme!