Sidebar Layouts

BuddyX Pro provides flexible sidebar options with multiple layout choices and 15+ dedicated widget areas for different content types. Configure sidebar positions for your entire site or specific page types.

Sidebar layout configuration in the WordPress Customizer

Accessing Sidebar Settings

1. Go to Appearance > Customize
2. Navigate to Sidebar

Global Sidebar Layout

Set the default sidebar position for your entire site:

Available Layouts

Layout	Description	Best For
Right Sidebar	Content left, sidebar right	Traditional blog layout, most common
Left Sidebar	Sidebar left, content right	Alternative layout, good for RTL
Both Sidebars	Sidebars on both sides	Content-rich sites, magazines
No Sidebar	Full-width content	Modern, minimal designs

Layout Selection

Right Sidebar:
┌──────────────────────┬─────────┐
│                      │         │
│      Content         │ Sidebar │
│                      │         │
└──────────────────────┴─────────┘

Left Sidebar:
┌─────────┬──────────────────────┐
│         │                      │
│ Sidebar │      Content         │
│         │                      │
└─────────┴──────────────────────┘

Both Sidebars:
┌─────────┬──────────────┬─────────┐
│         │              │         │
│ Sidebar │   Content    │ Sidebar │
│         │              │         │
└─────────┴──────────────┴─────────┘

No Sidebar:
┌────────────────────────────────┐
│                                │
│           Content              │
│                                │
└────────────────────────────────┘

Sidebar Width

Configure the width of sidebars across your site:

Setting	Description	Default
Global Sidebar Width	Width in pixels	260px
Minimum	Narrowest allowed	200px
Maximum	Widest allowed	400px

Responsive Behavior:

• On tablets: Sidebar width automatically adjusts
• On mobile: Sidebars stack below content or become toggleable

Content-Specific Sidebar Settings

Override the global layout for specific content types:

Blog/Posts

Setting	Options
Blog Archive Sidebar	Right, Left, Both, None, Default
Single Post Sidebar	Right, Left, Both, None, Default

Pages

Setting	Options
Page Sidebar	Right, Left, Both, None, Default
Search Results Sidebar	Right, Left, Both, None, Default

BuddyPress

Setting	Options
Activity Sidebar	Right, Left, Both, None, Default
Members Directory Sidebar	Right, Left, Both, None, Default
Groups Directory Sidebar	Right, Left, Both, None, Default
Member Profile Sidebar	Right, Left, Both, None, Default

WooCommerce

Setting	Options
Shop Archive Sidebar	Right, Left, Both, None, Default
Single Product Sidebar	Right, Left, Both, None, Default

LearnDash

Setting	Options
Course Archive Sidebar	Right, Left, Both, None, Default
Single Course Sidebar	Right, Left, Both, None, Default
Lesson Sidebar	Right, Left, Both, None, Default

bbPress

Setting	Options
Forum Archive Sidebar	Right, Left, Both, None, Default
Single Topic Sidebar	Right, Left, Both, None, Default

Available Widget Areas

BuddyX Pro registers multiple widget areas for different contexts:

Primary Sidebars

Widget Area	Description
Primary Sidebar	Default right sidebar
Secondary Sidebar	Default left sidebar (for both-sidebar layout)

BuddyPress Sidebars

Widget Area	Appears On
BuddyPress Left Sidebar	BP pages with left sidebar
BuddyPress Right Sidebar	BP pages with right sidebar
Members Directory Sidebar	Member listing page
Groups Directory Sidebar	Groups listing page
Activity Sidebar	Activity stream pages

WooCommerce Sidebars

Widget Area	Appears On
WooCommerce Left Sidebar	Shop pages with left sidebar
WooCommerce Right Sidebar	Shop pages with right sidebar

LearnDash Sidebars

Widget Area	Appears On
LearnDash Course Sidebar	Course archive and single course
LearnDash Group Sidebar	LearnDash group pages

bbPress Sidebars

Widget Area	Appears On
bbPress Left Sidebar	Forum pages with left sidebar
bbPress Right Sidebar	Forum pages with right sidebar

Other Sidebars

Widget Area	Appears On
FluentCart Left Sidebar	FluentCart shop pages
FluentCart Right Sidebar	FluentCart product pages
LearnPress Left Sidebar	LearnPress course pages
LearnPress Right Sidebar	LearnPress lesson pages
LifterLMS Left Sidebar	LifterLMS course pages
LifterLMS Right Sidebar	LifterLMS lesson pages

Sticky Sidebar

Keep sidebars visible while scrolling through long content:

Setting	Description	Default
Enable Sticky Sidebar	Fix sidebar on scroll	Off
Sticky Offset	Distance from top when sticky	20px

How It Works:

1. User scrolls page
2. When sidebar top reaches viewport top
3. Sidebar becomes fixed position
4. Sidebar scrolls internally if taller than viewport
5. Returns to normal at content end

Best Practices:

• Enable for long-form content
• Ensure sidebar content isn’t too tall
• Test on various screen sizes
• Consider disabling on mobile

Configuring Widget Areas

Adding Widgets

1. Go to Appearance > Widgets
2. Find the widget area you want to configure
3. Click the + button or drag widgets
4. Configure widget settings
5. Save changes

Recommended Widgets by Context

Blog Sidebar:

• Search
• Recent Posts
• Categories
• Archives
• Tag Cloud

BuddyPress Sidebar:

• Who’s Online
• Recently Active Members
• Groups
• Site-wide Activity

WooCommerce Sidebar:

• Product Search
• Product Categories
• Price Filter
• Active Filters
• Recently Viewed

LearnDash Sidebar:

• Course Progress
• Course Navigation
• Related Courses

Per-Page Sidebar Override

Override sidebar settings on individual pages/posts:

1. Edit the page/post
2. Find the Page Settings meta box
3. Select sidebar layout for this page
4. Save/Update the page

Available Per-Page Options:

• Use Default (from Customizer)
• Right Sidebar
• Left Sidebar
• Both Sidebars
• No Sidebar

Layout Hierarchy

Sidebar settings follow this priority:

1. Per-page setting (highest priority)
2. Content-type setting (e.g., Blog Archive Sidebar)
3. Global setting (fallback)

Example:

• Global: Right Sidebar
• Blog Archive: Left Sidebar
• Specific Post: No Sidebar

Result: That specific post shows no sidebar, other blog posts show left sidebar, other content shows right sidebar.

Troubleshooting

Sidebar Not Showing

Problem: Sidebar doesn’t appear even when enabled.

Solutions:

1. Add widgets to the appropriate widget area
2. Check content-type specific settings
3. Check per-page override settings
4. Verify the correct sidebar position is selected
5. Clear caching plugins

Wrong Widgets Appearing

Problem: Widgets from another sidebar appear.

Solutions:

1. Verify widgets are in the correct widget area
2. Check that context-specific sidebars have widgets
3. Empty sidebars fall back to primary sidebar
4. Review sidebar names carefully when adding widgets

Sidebar Overlapping Content

Problem: Sidebar overlaps or pushes content incorrectly.

Solutions:

1. Reduce sidebar width
2. Check for CSS conflicts
3. Disable conflicting plugins
4. Verify responsive breakpoints

Sticky Sidebar Jumping

Problem: Sticky sidebar jumps or behaves erratically.

Solutions:

1. Ensure sidebar isn’t taller than viewport
2. Check for JavaScript conflicts
3. Disable other sticky plugins
4. Verify sticky offset setting

Mobile Sidebar Behavior

On mobile devices, sidebars behave differently:

Device	Behavior
Desktop (>1024px)	Sidebars display as configured
Tablet (768-1024px)	Single sidebar, reduced width
Mobile (<768px)	Sidebars below content or hidden

Mobile Options:

• Sidebars can stack below content
• Can be hidden entirely on mobile
• Can become toggleable off-canvas
• Controlled in Mobile/Responsive settings

Related Documentation

• Widget Areas – Detailed widget area guide
• Sticky Sidebar – Fixed sidebar configuration
• Side Panel – Mobile off-canvas menu
• BuddyPress Settings – Community sidebars

---

Need Help?

• Visit our Documentation Portal
• Contact Support at support@wbcomdesigns.com