New to the community? Start here

custom widget area in Buddypress social header

Please explain in detail how to create a custom widget area in Buddypress social header and how to call it in top-header.php

Sat, 14 Apr 2012 17:36:36

Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
Hi abhisinha,

First of all, it’s highly recommended that you use the bp-social-child theme if you’re going to be customizing anything at all. If you use the bp-social theme itself, you will lose your custom stuff as soon as you update the theme, and will have to redo everything (!) See this page for more on WPMUdev child themes: https://wpmudev.com/wpmu-and-buddypress-themes/what-are-parent-and-child-themes/

You need to first register the new sidebar function. The bp-social-child theme doesn’t have a functions.php file, so you need to create it. In a text or code editor (you can even use Notepad for this), add the following to a new file and “Save As” functions.php in the root of the child-theme.
```
<?php

register_sidebars( 1,

array(

'name' => 'My-Home-Top',

'id' => 'my-home-top',

'before_widget' => '<div id="%1$s" class="widget %2$s">',

'after_widget' => '<div class="clear"></div></div></div>',

'before_title' => '<h3 class="widgettitle">',

'after_title' => '</h3><div class="widget-content">'

)

);

?>
```
Next, copy this file from the bp-social parent theme to your child-theme: lib/templates/wp-template/top-header.php

You will need to create the same folder structure in the child-theme (a lib folder in the root of the child-theme, a templates folder inside that, a wp-template folder inside that one, and top-header.php inside that… phew!)

Now, in your child-theme’s top-header.php, add a blank line between the 2 </div> at lines 69 and 70 and insert the call to your new sidebar like so:

<?php dynamic_sidebar('my-home-top');?>

That will position your new widget area beneath the header image and login stuff. Finally, you’ll probably want to add some custom styling to your new widget area. Open child-style-sample.css that you’ll find in bp-social-child_inccss and rename that file child-style.css. Let’s start by making the widget area full-width: add the following after everything else in that file:
```
#my-home-top {

width:100%;

}
```
Now when you visit Appearance > Widgets in your WP dashboard, you will see a new widget area called My-Home-Top. Add whatever you like there to see how it appears on your site.

Any other custom styles you want to add to your child-theme should be made in child-style.css too. If you need more help with this, don’t hesitate to post again.

Hope this helps! :o)
aecnu
- WP Unicorn
- 2,863 pts: Hero points 19,444 pts: Rep. points LEVEL 29
Greetings abhisinha,

Let us know how you make out with pcwriters instructions above.

Thank you for being a WPMU Dev Member!

Cheers, Joe
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
@pcwriter: Thanks for the clear explanation. But I could implement your solution successfully only with the parent theme. As soon as I start installing and activating bp-social-child theme I start getting blank home page, sample page etc. I have access to the wp-admin area though.

I followed the instructions to use childs for customisation and tried to install bp-social-child theme. For this purpose I made a copy of bp-social-child folder with its contents from themesbp-socialthemesbp-social-child and placed it alongside its parent bp-social in the wp-content/themes directory and activated the child. But I get a blank homepage only
Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
Hi again abhisinha,

If you get completely blank pages, that would tend indicate that there’s a code problem in the functions.php file.

Does your child-theme work properly without any of the code additions or modifications shown above?
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
No. It did not. Then I started afresh. Fresh uploads of WP, BP, Social theme. And activated the child theme. It worked. Then I started with your instructions about the custom widget area. Implemented it successfully in the child theme.: http://mycraftdecor.com/wbschild

But there is 1 major problem. The CSS style part
```
#my-home-top {

width:100%;

}
```
has no effect on the custom widget area with id my-home-top
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
BTW for custom style I’m using
```
#my-home-top {

width:40%;

background-color:#5C69BE;

color:#F00;

}
```
in /wbschild/wp-content/themes/bp-social-child/_inc/css/child-style.css
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
@pcwriter: Please help me in customising the custom widget area #my-home-top. My wp-content/themes/bp-social-child/_inc/css/child-style.css doesn’t seem to have any effect on this custom widget area
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Seems @pcwriter is busy over the weekend. Hoping him to be back soon and keeping the post from going to the 3rd of 4th page

Cheers

PC
Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
Hi abhisinha,

Sorry, I seem to have missed this thread. Been rather busy with my own projects :slight_frown:

And I have led you astray with incomplete code.

In top-header.php, where you have added this:

<?php dynamic_sidebar('my-home-top');?>

…please replace it with this:
```
<div id="hometop">

<?php dynamic_sidebar('my-home-top');?>

</div>
```
You’ll notice the new <div id=”hometop”> added to the above code. That div wraps everything inside your new widget area, and that’s the id you’ll want to style. So your new css would look like this:
```
#hometop {

width:40%;

background-color:#5C69BE;

color:#F00;

}
```
If you want to go a step further and style individual widgets or widget titles, try these:
```
#hometop .widget {

background-color:#fff;

padding:10px;

}

#hometop .widgettitle {

background-color:#f5f5f5;

padding:5px;

}
```
Hope this helps! :o)
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
@PCW : Glad you noticed it… I posted on this thread 3 hours ago so as to bring it up and send you a reminder :wink:

Cheers

PC
Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
@PC,

That was luck then, because this thread is not showing anywhere in forum activity in my profile

:o)
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
That is strange as you have posted on this thread before too… anyways, its good you noticed it, may be by co-incidence :wink:

Cheers

PC
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
@pcwriter and @PC

Thanks to both of you. I’ll check the code tomorrow and get back to you. If I want to use a custom template for Activity Page, maybe a customised copy of full width template : my full width template Where do I store it? in Child? or in the parent?

# I want to add the custom sidebars to this page.
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Heya Abhi,

We haven’t heard from you on this once for last 3 days. Did you happen to try the code suggested above and get it working ?

Please advise.

Cheers

PC
abhisinha
- Design Lord, Child of Thor
- 59 pts: Hero points 58 pts: Rep. points LEVEL 3
Thanks @PC for the concern. In fact I had checked the code given by pcwriter and got it working as desired. Then I had replied to both of you today itself. At that time pcwriter’s

Reputation was at 1,234 + then added 5 points from me. Now it’s 1239. I remember it clearly. The strange thing is where did my reply get lost/hidden whatever? I had even marked this topic as resolved

Anyway once again thanks to both of you for guiding me and for keeping the topic alive.

(Hope this time my words don’t vanish from this stream/thread)

THANK YOU

~abhi
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Oh yeah, now I get it.. Actually I did not have access to my emails for some strange reason. I now am able to access my email and found your cookies :slight_smile: (thanks for that, they are warm), Along with your message, that however does not get displayed in the thread itself, but is sent to our reputation page and our emails !

Glad that its fixed for you now :slight_smile: Have a wonderful time !

Cheers

PC
Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
Hi abhi,

I also got the email about the cookies. Thank you, they’re yummy!

Just glad we could help out! :o)

Ready to get started?

How do you rate me?

Thank you for rating your experience!