BuddyX
Get BuddyX Pro

Custom Widgets

Pro feature

BuddyX Pro includes custom widgets for enhanced functionality.

Widgets Settings Widget areas configuration in the Customizer

Available Widgets

1. BP Profile Completion Widget

File: inc/widgets/bp-profile-completion-widget.php Requires: BuddyPress

Displays a profile completion progress bar encouraging users to complete their profile.

Features:

  • Progress percentage display
  • Visual progress bar
  • Links to incomplete sections
  • Customizable message

Settings:

  • Title
  • Completion message

Best used in:

  • BuddyPress member sidebar
  • Dashboard widgets
  • Activity stream sidebar

2. LearnDash Featured Course Widget

File: inc/widgets/ld-featured-course-widget.php Requires: LearnDash

Showcases a featured course with image, title, and enrollment button.

Features:

  • Course thumbnail
  • Course title
  • Short description
  • Enrollment/continue button
  • Price display

Settings:

  • Title
  • Course to feature
  • Display style

Best used in:

  • Homepage sidebar
  • Blog sidebar
  • Course archive sidebar

3. Login Widget

File: inc/widgets/login-widget.php

Displays a login form for logged-out users and user info for logged-in users.

Features:

  • Login form with username/password
  • Remember me checkbox
  • Register and forgot password links
  • User avatar when logged in
  • Logout link when logged in

Settings:

  • Title
  • Show/hide register link
  • Show/hide forgot password link
  • Redirect URL after login

Best used in:

  • Sidebar
  • Header widget area
  • Off-canvas sidebar

4. Vendor Profile Widget

File: inc/widgets/class-vendor-profile-widget.php Requires: Dokan or WC Vendors

Displays vendor information on store and product pages.

Features:

  • Vendor avatar
  • Store name
  • Store rating
  • Contact information
  • Store link

Settings:

  • Title
  • Display elements

Best used in:

  • Product sidebar
  • Store sidebar
  • Marketplace pages

Widget Areas

BuddyX Pro registers multiple widget areas:

Main Widget Areas

Area Description
Main Sidebar Primary sidebar for pages/posts
Right Sidebar Secondary sidebar (when using both sidebars)
Footer Widgets Footer widget area (columns configurable)

Specialty Widget Areas

Area Description Requires
BuddyPress Sidebar BuddyPress pages sidebar BuddyPress
WooCommerce Sidebar Shop/product sidebar WooCommerce
Off Canvas Sidebar Off-canvas filter area WooCommerce

Adding Widgets

Via Customizer

  1. Go to Appearance → Customize → Widgets
  2. Select a widget area
  3. Click Add a Widget
  4. Select your widget
  5. Configure settings
  6. Click Publish

Via Widgets Screen

  1. Go to Appearance → Widgets
  2. Find the widget you want
  3. Drag it to a widget area
  4. Configure settings
  5. Click Save

Widget Styling

Widgets inherit theme styling:

  • Background colors from theme settings
  • Typography from theme fonts
  • Spacing from theme design

Custom Widget CSS

Target widgets with these classes:

.widget { }                    /* All widgets */
.widget-title { }              /* Widget titles */
.widget_buddyx_login { }       /* Login widget */
.widget_bp_profile_completion { }  /* Profile completion */

Conditional Display

Many widgets show different content based on user state:

Login Widget

User State Displays
Logged Out Login form
Logged In User info + logout

Profile Completion Widget

User State Displays
Logged Out Nothing
Logged In Progress bar
100% Complete Congratulations message

Plugin Compatibility

Some widgets require specific plugins:

Widget Required Plugin
BP Profile Completion BuddyPress
LearnDash Featured Course LearnDash
Vendor Profile Dokan or WC Vendors
Login Widget None (works standalone)

Widgets that require plugins will not appear if the plugin is not active.

Best Practices

Widget Placement

  • Place login widget in easily accessible areas
  • Use profile completion in member-focused areas
  • Feature courses on high-traffic pages
  • Match widget areas to page purpose

Performance

  • Limit widgets per area (5-7 recommended)
  • Use caching for complex widgets
  • Avoid duplicate widgets

Mobile Experience

  • Test widget display on mobile
  • Consider hiding some widgets on mobile
  • Ensure touch-friendly interactions

Developer Information

Creating Custom Widgets

class My_Custom_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            __( 'My Custom Widget', 'buddyxpro' ),
            array(
                'description' => __( 'Widget description', 'buddyxpro' ),
            )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo $args['before_title'] . $instance['title'] . $args['after_title'];
        // Widget content here
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        // Admin form fields
    }

    public function update( $new_instance, $old_instance ) {
        // Save logic
        return $new_instance;
    }
}

add_action( 'widgets_init', function() {
    register_widget( 'My_Custom_Widget' );
});

Related Documentation