Topic: adding widgets to a custom page

adding widgets to a custom page

@shaisimchi

Participant

14 years, 7 months ago

Hi,

I have created custom pages in my buddypress implementation.
I would like to add widgets to this custom page.
Before I go ahead and try to play with it any idea how this can be achieved?

Thanks,

Shai

Viewing 16 replies - 1 through 16 (of 16 total)

@lph2005

Participant

14 years, 7 months ago

Perfect timing – I just started to look into this for a website. Hopefully someone has information written up or can describe the best way to add a widget to a page.

@shaisimchi

Participant

14 years, 7 months ago

Hi,

I have something working which still needs some work.
where do you want to add your widget to? what kind of page? maybe I can help.

Thanks,

Shai

@shaisimchi

Participant

14 years, 7 months ago

OK I still need a little help here:

I am creating custom pages on my site the following way:
in bp-custom.php I am adding:

define(‘BP_MYPAGE_SLUG’, ‘mypage’);

function mypage_page_setup_root_component()
{
global $bp;
bp_core_add_root_component( BP_MYPAGE_SLUG );
}
add_action( ‘plugins_loaded’, ‘mypage_page_setup_root_component’, 2 );

function bp_show_mypage_page() {
global $bp, $current_blog, $wpdb;

if ( $bp->current_component == BP_MYPAGE_SLUG && $bp->current_action == ” ) {
// The first variable here must match the name of your template file below
bp_core_load_template( ‘mypage’, true );
}
}
add_action( ‘wp’, ‘bp_show_mypage_page’, 2 );

I am also creating a file called mypage.php inside my theme. this works great and already many custom pages like that.
What I want is to add the content of a widget (for example activity widget) into this page.

here is what i did: i created a new sidebar in functions.php lets assume its called mysidebar:

register_sidebars( 1,
array(
‘name’ => ‘mysidebar’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘
)
);

then within my newly created file called mypage.php i have the following code:
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(‘mysidebar’) ) : ?>

<a href="/wp-admin/widgets.php?s=&show=&sidebar=mysidebar”>

then i added the site activity widget in the admin to the mysidebar that I created.

So far it all works great. my problem is that when the widget gets added to my custom page mpage.php it pretty much goes all over the page and messes up things like the left hand side navigation menu, options-bar etc.
even placing it within html table doesnt help as it seems that it is trying to conform to the 3 widget areas I have on other sections of my site (like home page etc).
How do I control the location of the widget’s content on a custom page like that?

Help is much appreciated!

Thanks,

Shai

@shaisimchi

Participant

14 years, 7 months ago

Any idea anyone?

@graphility

Participant

14 years, 7 months ago

Hello there,

I saw your message, and I’ve been working on the very same thing this afternoon.
Are you looking to achieve something like this? http://graphility.com
My homepage is now custom, the image placeholder as well as the accompanying text are widgets.

Let me know, perhaps I can help and we can collaborate further.

@shaisimchi

Participant

14 years, 7 months ago

Sure – Is this the default home page of buddypress or is it a totally custom page?
if so – how do you ‘tell’ the widget where to be placed or create the place holder for it within the page?

Thanks,

Shai

@graphility

Participant

14 years, 7 months ago

Hello again,

First off, I’m a total noob to buddypress development, but better at regular wordpress development. So, here’s how I proceded:

1- in functions.php, I added two widgets, like this:
register_sidebars( 1,
array(
‘name’ => ‘showcaseImage’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘
)
);

register_sidebars( 1,
array(
‘name’ => ‘showcaseCaption’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘
)
);

2- I copy/pasted page.php and modified like this (removed loop and sidebar call):

<?php
/* Template Name: Showcase */
get_header();
?>

3- in _inc/css/default.css, I added this custom code:

#showcaseImage{text-align:center; width:720px; height:300px; overflow:hidden; margin:0 5px 0 0; border:1px solid #fff; float:left;}
#showcaseCaption{width:200px; height:300px; overflow:hidden; border:1px solid #fff; padding:0 18px 0 13px; float:left;}

4- in settings, I replaced the homepage by this static one.

That’s the whole hack, I guess. By removing the default css id’s and classes from page.php, and replacing them with my own, I place the widgets wherever I wish. Maybe there’s a better way? Not knowing enough about buddypress, your technique seems complex to me

Next step (for you and me): add some sweet jQuery and make this a slideshow

Additional next step for me: document this in a tutorial, I’m pretty sure it will come up handy for many.

~ hiddenson

@shaisimchi

Participant

14 years, 7 months ago

Can you explain more about your step 2 – i dont see the example code.

Thanks,

Shai

@graphility

Participant

14 years, 7 months ago

Damn, the code is being truncated…

Just leave header and footer calls, and in between:

@hnla

Participant

14 years, 7 months ago

It has been demonstrated on this site the procedure in creating a custom front or home page with widget aware areas if required, a search should have thrown up some posts. Approaches seem correct in essence The WP template page principle holds true for creating a new frontpage and moving posts to another designated page. pages created under the prime blog are automatically added to the main menu tabs unless you instruct otherwise. The method described for creating a bp defined page might be a little unnecessary in this instance?

In the last example I don’t see where you are adding your new areas? won’t you need something similar to this – or a variation thereof:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('showcaseCaption') ) : ?>

@graphility

Participant

14 years, 7 months ago

okaaay… give me your mail address, I’ll send the snippet to you

@shaisimchi

Participant

14 years, 7 months ago

shaisimchi @gmail.com

@shaisimchi

Participant

14 years, 7 months ago

@hnla your code is truncated too…

@shaisimchi

Participant

14 years, 7 months ago

the file default.css doesnt seem to exist in my installation. what version are you using?

@shaisimchi

Participant

14 years, 7 months ago

and what is the path to this file on your installation?

@graphility

Participant

14 years, 7 months ago

wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/default.css

I’m running buddypress 1.2.3 on WordPress 2.9.2, and I’m pretty sure the install shouldn’t matter much… Keep looking.