Adding a widget area on home


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


In this simple example, I ‘ll show you how to widgetized the home page of the Customizr theme by placing a widget area above the featured pages.

 

In the following snippet, the widget area is added before the featured pages of the home page with the action hook named ‘__before_fp’.

You can of course use the hooks api of the theme to select another custom location.

 

Paste the following code into your functions.php file. (see how to customize the Customizr theme).

 


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.



51 thoughts on “Adding a widget area on home

  • LindaM

    Hi! I love the theme, but have a question about making the size of the widget bar at the bottom of the Home page a consistent height across different browsers. The height of the bar at http://www.gothicimagetours.co.uk/ is OK in Firefox, Edge and the old IE (though I would like it not quite so high) but it’s absolutely enormous in Chrome. I don’t have a Mac so don’t know what it looks like in Safari. Any help sorting this out would be much appreciated.

  • LindaM

    Hi, I love the theme, but have a query about how to make the bottom widget area on the home page the same height in all browsers. On the home page (http://www.gothicimagetours.co.uk/) the height is OK in Firefox and Edge and the old IE, though would like it a little less. However, in Chrome it’s enormous! How do I sort this out? Your help would be much appreciated.

  • makeonlineshop

    Hello ! Thank you so much !

    If I can help people like me who know nothing but are trying to understand, I managed to put a Google custom search on top of the page just under the menu (NAVBAR) by using this snippet.

    I have just replaced __before_fp by __after_navbar

    And actually my GCS bar can be seen on all the website pages, not only on the home as I feared because of the title of this page (Adding a widget area on home),

    This theme is definitively the best that anyone could expect ! Thank you again !

  • Paranovia

    How do I add a widget area on the right side bar? I have it in all my other pages but not home page.

  • Carlos González R

    Hi Nicola.
    I having a hard time trying to make this snippet work with Version: 3.4.15. Where it’s supposed the Widgets will appear? I can’t find them on Widget menu nor on Customize. Please advice

  • Dario Orlando Fernandez

    Hi All. Could not find a better place where to post this question. Is it possible to place a WP widget (eg. Recent Posts) inside a page article area?. If so, would someone give me some advice and/or guidance. I’m open to use external plugins but could not find the right one.
    My client wants to display recent posts somewhere on the article area, not on a sidebar nor under header, footer or anywhere else. I’m using the regular 12 column grid design and considered to place the latest 3 post header/abstracts inside one of the grid defined cells but can’t figure out how to do so. Please HELP!

  • ESL

    Hello Giorgio,

    Thanks a lot!! I only have one question left, just to be sure.
    In which folder should I place the unzipped functions.php file? In the childtheme folder on my macbook? Or in some file on WP? (I’m sorry I’m a bit of a noob;) )

    I really appreciate your help,

    Eva

  • ESL

    Hello @Giorgio25b, @Nicolas,

    I already installed the Childefy me plugin a few months ago. When I installed it, I saw the document: functions.php in my childtheme editor. A few weeks later it was gone, from that moment I am only able to see the style.css at the editor screen. So I can’t add content into my functions php file, because it don’t exist in my childtheme. There do exist a functions.php file in the main theme, customizr, but I’ve read that I can’t add content to that file because it will not work with my childtheme or something. Can someone help me please?:)

    Thank you!

    Eva

    • Giorgio25b

      Hi Eva,
      do not change the main customizr functions.php; actually do not change any of the theme core files; doing so might break your site and anyway next time you’ll do an update those changes would be overwritten.
      Make sure that your child theme folder includes the style.css and the functions.php [that you can now download here: functions.zip].
      Unzip the file, place it in your folder and activate again the child theme, this is because when WP does not find the required files for a child theme, it switches automatically to the father theme.
      Hope it helps.

  • Peter D.

    Hi, I’m pretty sure I posted a reply on this thread this week. It was considered for moderation. But I haven’t heard anything since…
    I also sent a mail about the same question. No reply up until now.
    It might be I have had a wrong impression on this theme. But I cannot understand why it is not possible to place any content on the front page. It might be I don’t understand how the theme works.
    Up until now I get the impression the theme offers not really much freedom of design, unless you are a code-oriented designer. But maybe I am wrong?
    I would love to hear something…

  • ESL

    Hello,

    Wonderful theme, thanks!
    I have created a child theme for my theme, but in the editor I don’t see a functions.php file, I only see the stylesheet. I do have a functions.php file in the customizr theme, but not in the child theme, is it possible to add the codes in that functions.php file?
    How can I create a functions.php file within my child theme?

    Thanks a lot,

    Kind Regards

    Eva

      • Peter Dees

        As you know I am fairly new to using WP themes and to Customizr Pro. However, I notice quite a lot of people have (had) the same question I have: how can I add ‘anything’ (a widget, a block of txt) to the Front page on a certain place (preferrably below the slider). The theme looks wonderful up until now, I am quite happy with the ease of customizing ALL typography (great!). But having to learn / use API hooks is quite a different level which I neither have the time or the understanding of code for. Is there really no easy way to add something to this page?
        Hope to hear, tnx.

        • Nicolas Post author

          Hi Peter, this is an excellent point.
          We are currently working on a major update to enable users of the Customizr theme adding any type of content anywhere and in live preview. Without having to code anything.
          This requires a lot a development but we’re almost there
          Stay tuned and you’ll get the update in the coming days.
          Before that, you can check the guide to customize the Customizr theme.
          If you still don’t find your way, please post a new topic in the support forum.

          Thanks 🙂

          • makeonlineshop

            Hello, any updates ? I would like to be able to add widgets on top around the header ! Thank you.

    • Giorgio25b

      @ ESL
      you might wanna try this plugin:
      https://wordpress.org/plugins/childify-me/
      It has been developed specifically to help people to create a proper child-theme just for Customizr.

      How to:
      Add it as a plug-in in your installation and activate it.
      Then go in Appearance -> Customize, and you’ll see the button Childify-Me, click on it, write a name for your child theme, create it and the Preview & Activate. When you’re there click on Save & Activate.

  • Anna Paola Bocciarelli

    I use wordpress WordPress 4.2.2 and customizr-pro child theme basato su customizr-pro Versione: 1.1.9.
    This snippet use to function correctly but now the new widget is not present anymore in wp widgets where i can find only footer widgets. Can you help me? Thanks

  • Mauricio Arcehelizaga

    Hi there,

    Can you please tell me how to make come custom widgets appear ONLY in the home page? I’m using the following code (I got it from this same conversation)

    I image its a conditional but I’m not sure how to insert it for 4 widgets.

    Thank you for the theme and any help you can give me.

    M

  • Marlena

    So I’m trying to add another widget area after the feature pages widget. I used you exact code above, however it broke my site. I also saw another person had the same issue. Can you assist me with this issue? Best regards, Marlena
    —————————————————————————————-
    add_filter( ‘tc_default_widgets’ , ‘add_featured_page_widget’ );
    function add_featured_page_widget( $defaults ) {
    $defaults[‘fp_widgets’] = array(
    ‘name’ => __( ‘Featured Pages Widget’ , ‘customizr’ ),
    ‘description’ => __( ‘Above the featured pages area on home’ , ‘customizr’ )
    );
    return $defaults;
    }

    add_action(‘__before_fp’ , ‘display_my_fp_widget’);
    function display_my_fp_widget() {
    dynamic_sidebar(‘fp_widgets’);
    }
    ———————————-

  • Helena

    Thank you all!!!

    This is really a great theme!!! I do intend to give you guys some cups of coffee!!!

    This is what I was looking for !! I did changed it to show only 2 extra widgets!!!

    However I have another question: 🙂

    I have used the last posts widget. How can I manage to get only by the homepage also the excerpts from the blog posts?

    Thanks a lot!!!

  • arnaud durhone

    Hello is there a way to display these widget event when the featured page option is switched off? i want to replace these featured page with the widget

  • Anna

    hello, this widget is wonderful … I wanted to know if there is a way to make one before and one after the featured pages …
    thank you
    and congratulations for the theme

  • Connie

    Thank you so much for such a versatile theme! This almost answered my question. I want a widget area at the top of the home page above the blog posts but I don’t want featured pages enabled. It doesn’t show up unless I have featured pages enabled.

    Is there an adjustment I can make that will let me have this widget area directly above the blog posts at the top of page (and also keep my sidebar if possible)?

    • Connie

      Looks like I figured it out but I still have to figure out how to make the spacing look better and make the sidebar start at the top of the page – any suggestions?

      • Connie

        Hi Nicholas, I am using after_header which pushes the sidebar down the page under the widget so I will try the before_content hook instead … wish me luck 🙂 And thank you for helping me, I really appreciate it!

      • Connie

        Darn, so close but the before_content hook made the widget repeat itself before every single blog post instead of just once at the top of the page. Any other suggestions?

  • Billy Kardasz

    Hello – first of all than you for the great theme. I’ve been able to make some some decent mods via a child theme, however my question is that I’d like to create a widget below the blog-post listing on the front page and above the footer.

    Using the example above I’ve been able to create a widget area (on the front page) after the featured page are using the ‘__after_fp’ hook, however cannot cannot locate/identify the hook which defines the area between the recent post listing and the footer.

    Thanks for any assistance!

    • Nicolas Post author

      You’ll want to give a try to :
      __after_loop
      __after_main_container
      __after_main_wrapper (with priority 0)
      __before_footer

      Did this help ?
      Cheers

  • Michael Case

    I love the theme overall, and I think there are some pretty sweet options, but I was wondering if it’s possible to replace any of the Featured Pages with widgets? Not just placing a widget section above, but to actually replace one of them with a widget.

    Also (this is significantly less related), I absolutely love the circle scaling effect on the Featured Pages and Featured Images for the posts – do you have any tips for duplicating this effect with a gallery or some other random image? I have experience with CSS (and some PHP), but my experiments with this type of effect haven’t been terribly fruitful thus far.

    Thanks, and again – excellent theme!

    • Nicolas Post author

      Thanks for this comment Michael 🙂
      Replacing featured pages by widget : you can disable the featured pages from the theme customizer and then add a line of code in functions.php to hook a widget area in place of the featured pages

      Scaling effect : it is actually a pretty simple CSS3 effect. If you inspect the webpage you’ll see how simple this effect is. To use it for other images of your website, I would recommend to wrap it in a responsive grid and use different scales and sizes for each devices.

      I hope this will help !
      Cheers 🙂

  • gene coon

    Thank you for the quick response and it did work, once I realized I needed to replace lines 30-36 with the new code.

    However now I have another issue. I need to increase the space between these widgets and the featured page item above them. I tried creating more space at the top of each widget area by modifying the CSS for my_fp_widget, row-fluid:before, and row-fluid:after but it did not cause any change to the position of the 3 widgets. It did however mess with the header. Any suggestions to adjust the margins and padding on at least the top and bottom if not the sides too is appreciated.

    I just saw that you live in Nice, France. I really enjoyed the week I spent there, have considered it my next place to live. Thanks again for your help.

  • Nicolas Post author

    Hi,
    to display your four widgets in a responsive row, you could wrap them in a Twitter Bootstrap flavored column code as follow :

    I hope this will help !

  • gene coon

    Excellent theme and is clearly the easiest I have ever worked with, so thank you.
    I was able to add four widget areas on the home page after the featured pages but they stack on top of each other. I left them visible. How do I get them to be in a single row just like the footer widget areas. I have played around with css but cannot get them to reduce in size from full page width. I appreciate any help.

    Here is my site http://www.stlunited.info

    Here is the code I added to the sites child theme functions.php file:

  • Ella Evans

    Nikeo,

    LOVE this theme and appreciate all the hard work however, the above code does not work.

    I have create a child theme and have absolutely nothing in my functions.php file other than this code you have instructed to insert into the file.

    The only thing the above code does is briefly display on my front page while my site is loading into any browser.

    Any help would be appreciated.

    I see Sally Anne Farmer had the same issue.

    Ella

  • Sally Anne Farmer

    It might be that the code went in after a <?php found at the bottom of the functions.php file. It worked ok when I put the code in before the occurrence of the <?php
    }
    So mia culpa!

  • Sally Anne Farmer

    __( ‘Featured Pages Widget’ , ‘customizr’ ),
    ‘description’ => __( ‘Above the featured pages area on home’ , ‘customizr’ )
    );
    return $defaults;
    }

    add_action(‘__before_fp’ , ‘display_my_fp_widget’);
    function display_my_fp_widget() {
    dynamic_sidebar(‘fp_widgets’);
    }
    >
    The code above taken from tyhe snippet broke my site and caused me to have to upload a new functions.php file from the original installation meaning I have lost all of my customisations. Thanks a lot!

Comments are closed.