Move the featured pages block anywhere on front page


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

 

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.

 

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!


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.



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

  • OKeefeOnline

    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! 😀

    • Anita Hill

      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!

  • OKeefeOnline

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

  • Jure Toncic

    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.

  • Jure Toncic

    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?

  • Greg Kapitan

    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?

  • jolo

    Hi, is there a way to get the featured pages circle vertically centered on the page (independently from the monitor size)?
    cheers!

  • Jana Glass

    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.

  • Saveena Joshi

    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.

  • Saveena

    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

  • Ali

    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!?

  • Ali

    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?

  • grant Spooner-Roberts

    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 😀

    • Nicolas Post author

      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

  • Chris

    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

    • Nicolas Post author

      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 !

  • alex

    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!!!

      • alex

        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

        • Nicolas Post author

          You can set your own content (including empty content) for the featured pages excerpt in appearance > customize > front page.
          Hope this helps!

          • alex

            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

  • François

    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

    • Nicolas Post author

      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

  • Loïc

    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

  • Leanne

    Nicolas you are a legend! This has made my life (& work) so much easier & rewarding! Look forward to it.

  • Leanne

    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 🙂

  • Gijsbert Vandeweerdt

    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

  • Kristaps

    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.

  • Steve

    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,

  • Jess

    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!

    • Nicolas Post author

      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.

  • Mike

    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

  • David Swift

    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?

    • Arik

      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?

      • Tash

        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!

  • Gareth

    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

    • Nicolas Post author

      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!

Comments are closed.