code snippets php Featured pages __before_fp tc_default_widgets add_filter() dynamic_sidebar()

Adding a widget area on home

by Press Customizr|Published 24 September 2014

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

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

AUTHOR

Press Customizr

Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.

357 posts

51 thoughts on “Adding a widget area on home”

51 comments

LindaM
2 November 2016, 2 h 41 min

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.
- Menaka S
  2 November 2016, 4 h 56 min
  
  Hi,
  The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
  
  Please post at the support forums. Thanks 🙂
  - LindaM
    2 November 2016, 5 h 42 min
    
    Thanks. I realised that after I posted and have now asked my question in the right spot!
LindaM
2 November 2016, 2 h 02 min

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.
Menaka S
11 July 2016, 5 h 53 min

Thanks! 🙂
Glad that you liked it.
-On behalf of Nicolas and his team.
makeonlineshop
9 July 2016, 17 h 57 min

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
23 April 2016, 12 h 03 min

How do I add a widget area on the right side bar? I have it in all my other pages but not home page.
- Menaka S
  26 April 2016, 6 h 58 min
  
  Do check the layout of the home page.
presscustomizr
18 April 2016, 14 h 27 min

You can add as many widget zones as you want and assign them to the home page context.
We’re currently creating a detailed documentation for this topic : how to use the widget zones.
It will be ready in a few days in the Hueman theme documentation http://docs.presscustomizr.com/collection/224-hueman-theme :
Tomáš Humhal
18 April 2016, 14 h 12 min

Hi, great work. What about if you want add more than one widget area on home? Thanks
Carlos González R
21 November 2015, 20 h 20 min

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
15 October 2015, 8 h 39 min

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
23 June 2015, 10 h 05 min

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
- Giorgio25b
  23 June 2015, 15 h 34 min
  
  Yes Eva,
  all the modified files need to go into the child-theme folder.
  Please read this for further instructions:
  Creating a child theme for Customizr
ESL
22 June 2015, 13 h 08 min

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
  22 June 2015, 15 h 33 min
  
  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.
18 June 2015, 22 h 58 min

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
31 May 2015, 13 h 18 min

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
- Nicolas
  2 June 2015, 7 h 02 min
  
  Hi,
  You might want to get help on the support about this : https://wordpress.org/support/theme/customizr
  
  Thanks 🙂
  - Peter Dees
    16 June 2015, 9 h 59 min
    
    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
      21 June 2015, 14 h 58 min
      
      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
        9 July 2016, 16 h 22 min
        
        Hello, any updates ? I would like to be able to add widgets on top around the header ! Thank you.
- Giorgio25b
  21 June 2015, 5 h 16 min
  
  @ 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
16 May 2015, 19 h 00 min

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
b v
1 May 2015, 17 h 21 min

Hi

I need a widget area under the featured pages en before the footer. How do i do this?

Helena
21 April 2015, 15 h 21 min

Maybe you have this already solved.
Anyway, you can read here how I got it solved.

https://wordpress.org/support/topic/extra-feature-page-widget-appears-everywhere?replies=5

Marlena
25 February 2015, 17 h 45 min

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’);
}
———————————-
- Rocco Aliberti
  26 February 2015, 9 h 01 min
  
  Hi Marlena,
  did you copy the code in the snippet in your child-theme functions.php and this broke your site?
  You may have made some php syntax error. To see what kind of error you should enable WP_DEBUG
  I also suggest you to take a look at this http://doc.presscustomizr.com/customizr/diagnosing-problems-customizr/
  If you have other problems please open a new ticket in the Customizr wordpress forum and you’ll get assistance 😉
  
  Hope this helps.
  - Marlena
    26 February 2015, 17 h 13 min
    
    Thanks so much! I actually got it working now. I really appreciate your timely response! I’m about to have some fun customizing! 🙂
Helena
20 February 2015, 13 h 54 min

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
18 February 2015, 16 h 12 min

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
- Nicolas
  19 February 2015, 6 h 49 min
  
  Hi !
  You can use another hook for that, like __after_header, or __before_content for example.
Anna
18 February 2015, 12 h 12 min

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
8 February 2015, 0 h 18 min

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
  8 February 2015, 1 h 32 min
  
  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?
- Nicolas
  8 February 2015, 13 h 56 min
  
  Hi, you could replace the hook __before_fp by __after_header, or __before_content.
  
  Hope this helps !
  - Connie
    8 February 2015, 18 h 54 min
    
    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
    8 February 2015, 19 h 06 min
    
    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
23 January 2015, 5 h 39 min

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
  28 January 2015, 8 h 20 min
  
  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
23 January 2015, 1 h 51 min

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
  28 January 2015, 8 h 18 min
  
  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
8 January 2015, 20 h 57 min

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
  9 January 2015, 14 h 52 min
  
  Hi Gene,
  
  You’ll want to check this CSS guide on how to customize the theme.
  
  I hope this will help.
  Yes, Nice is a nice place to live, I agree 🙂
  Cheers
Nicolas
30 December 2014, 11 h 35 min
Hi,
to display your four widgets in a responsive row, you could wrap them in a Twitter Bootstrap flavored column code as follow :
```
add_action('__after_fp' , 'display_my_fp_widget');
function display_my_fp_widget() {
  ?>
  
    
    
    
    
  
  
I hope this will help !
```

Ella Evans
20 December 2014, 15 h 13 min

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
27 September 2014, 13 h 43 min

now it prints the code out just below the heading
Sally Anne Farmer
27 September 2014, 13 h 39 min

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
27 September 2014, 13 h 35 min

__( ‘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.