who’s online/ recently active widgets showing just a picture
-
hi there,
the Who’s Online widget and recently active widgets only show me a tiny profile picture of the user. However, the members widget shows the tiny profile picture as well as the user’s name.
How do i get these two widgets to display the names of the users as well?
thank you
-
@ashrod, hope this helps. This fades in a tooltip by animating the member’s name in a black box with arrow pointing up towards the avatar on hover. It may need tweaking for your site and hope other’s can improve and optimize this further. I needed a quick solution to work with the Woffice theme by Alkaweb and is working well for me so far.
If you want to see this in action, just copy this and go to Woffice demo site using Firefox + Firebug and copy paste into the style editor tab and hover over the who’s online avatar to see the tooltip.
.avatar-block a { width: 50px; height: 50px; /* change to whatever your avatar size is */ display: inline-block; position: relative; } .avatar-block a:after { content: attr(data-bp-tooltip); font-size: 10px; position: absolute; z-index: 999; background: #000; color: #e0e0e0; padding: 2px 5px; line-height: 15px; opacity: 0; transition: opacity 0.4s ease-out; top: 55px; /* based on a 50x50 avatar and places the tooltip 5px below */ text-align: center; margin-left: -50%; left: 0; width: 100px; pointer-events: none; border-radius: 3px; } .avatar-block a:before { /* this is the arrow pointing up */ content: ''; position: absolute; left: 20px; top: 50px; /* based on a 50x50 avatar and places the tooltip 5px below */ width: 0; height: 0; transition: opacity 0.4s ease-out; opacity: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; clear: both; z-index: 999; pointer-events: none; } .widget.buddypress div.avatar-block { overflow: visible !important; } .avatar-block a:hover:before, .avatar-block a:hover:after { opacity: 1; } .avatar-block .item-avatar { display: inline-block; }
Hi All,
I googled a lot and read many posts but found no code snippet to show member names along the profile avatars of the BP Recently Active Members widget. So i created my own widget and that is super easy to do. I took the core class of the above widget did a single line modification to display names also and registered it as a widget through functions.php
Just paste the below code in functions.php of your child theme and it will work.class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(// Base ID of your widget
‘wpb_widget’,// Widget name will appear in UI
__(‘Recently Active Member Custom’, ‘wpb_widget_domain’),// Widget description
array( ‘description’ => __( ‘Sample widget based on WPBeginner Tutorial’, ‘wpb_widget_domain’ ), )
);
}// Creating widget front-end
public function widget( $args, $instance ) {
global $members_template;// Get widget settings.
$settings = $this->parse_settings( $instance );/**
* Filters the title of the Recently Active widget.
*
* @since 1.8.0
* @since 2.3.0 Added ‘instance’ and ‘id_base’ to arguments passed to filter.
*
* @param string $title The widget title.
* @param array $settings The settings for the particular instance of the widget.
* @param string $id_base Root ID for all widgets of this type.
*/
$title = apply_filters( ‘widget_title’, $settings[‘title’], $settings, $this->id_base );echo $args[‘before_widget’];
echo $args[‘before_title’] . $title . $args[‘after_title’];$max_limit = bp_get_widget_max_count_limit( __CLASS__ );
$max_members = $settings[‘max_members’] > $max_limit ? $max_limit : (int) $settings[‘max_members’];// Setup args for querying members.
$members_args = array(
‘user_id’ => 0,
‘type’ => ‘active’,
‘per_page’ => $max_members,
‘max’ => $max_members,
‘populate_extras’ => true,
‘search_terms’ => false,
);// Back up global.
$old_members_template = $members_template;?>
<?php if ( bp_has_members( $members_args ) ) : ?>
<div class=”avatar-block”>
<?php while ( bp_members() ) : bp_the_member(); ?>
<span class=”item-avatar”>
” class=”bp-tooltip” data-bp-tooltip=”<?php bp_member_name(); ?>”><?php bp_member_avatar(); ?>
” class=”bp-tooltip” data-bp-tooltip=”<?php bp_member_name(); ?>”><?php bp_member_name(); ?>
</span><?php endwhile; ?>
</div>
<?php else: ?>
<div class=”widget-error”>
<?php esc_html_e( ‘There are no recently active members’, ‘buddypress’ ); ?>
</div><?php endif; ?>
<?php echo $args[‘after_widget’];
// Restore the global.
$members_template = $old_members_template;
}/**
* Update the Recently Active widget options.
*
* @since 1.0.3
*
* @param array $new_instance The new instance options.
* @param array $old_instance The old instance options.
* @return array $instance The parsed options to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;$max_limit = bp_get_widget_max_count_limit( __CLASS__ );
$instance[‘title’] = strip_tags( $new_instance[‘title’] );
$instance[‘max_members’] = $new_instance[‘max_members’] > $max_limit ? $max_limit : intval( $new_instance[‘max_members’] );return $instance;
}/**
* Output the Recently Active widget options form.
*
* @since 1.0.3
*
* @param array $instance Widget instance settings.
* @return void
*/
public function form( $instance ) {
$max_limit = bp_get_widget_max_count_limit( __CLASS__ );// Get widget settings.
$settings = $this->parse_settings( $instance );
$title = strip_tags( $settings[‘title’] );
$max_members = $settings[‘max_members’] > $max_limit ? $max_limit : intval( $settings[‘max_members’] );
?><p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”>
<?php esc_html_e( ‘Title:’, ‘buddypress’ ); ?>
<input class=”widefat” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” style=”width: 100%” />
</label>
</p><p>
<label for=”<?php echo $this->get_field_id( ‘max_members’ ); ?>”>
<?php esc_html_e( ‘Max members to show:’, ‘buddypress’ ); ?>
<input class=”widefat” id=”<?php echo $this->get_field_id( ‘max_members’ ); ?>” name=”<?php echo $this->get_field_name( ‘max_members’ ); ?>” type=”number” min=”1″ max=”<?php echo esc_attr( $max_limit ); ?>” value=”<?php echo esc_attr( $max_members ); ?>” style=”width: 30%” />
</label>
</p><?php
}/**
* Merge the widget settings into defaults array.
*
* @since 2.3.0
*
*
* @param array $instance Widget instance settings.
* @return array
*/
public function parse_settings( $instance = array() ) {
return bp_parse_args( $instance, array(
‘title’ => __( ‘Recently Active Members’, ‘buddypress’ ),
‘max_members’ => 15,
), ‘recently_active_members_widget_settings’ );
}
}// Register and load the widget
function wpb_load_widget() {
register_widget( ‘wpb_widget’ );
}
add_action( ‘widgets_init’, ‘wpb_load_widget’ );Replying to me.
After pasting the above code you will see a new widget- (Recently Active Member Custom) in the widget sections. Add it at your respective place and it works.
- You must be logged in to reply to this topic.