Getting Started

Install BuddyX Pro, run the demo importer, and pick the kind of community you want to build.

Complete Setup Guide: From a Fresh WordPress Install to a Live Community

This is the one guide to follow from start to finish. Begin with a brand-new WordPress site and, step by step, end with a fully themed, working community. Do the steps in order and you will never have to guess what comes next.

Time needed: about 30-45 minutes. You need: a WordPress site (version 6.5 or newer, PHP 8.0 or newer), an admin login, and your BuddyX Pro download.

Coming from BuddyX free? Do Steps 1-3 below, then jump to the Migrate from BuddyX Free step to bring all your existing settings across in one click.

Step 1: Start with a fresh WordPress install

Install WordPress the usual way, or use a local tool like Local, XAMPP, or Studio.
Log in at yoursite.com/wp-admin.
Confirm your versions under Tools > Site Health > Info. You need WordPress 6.5+ and PHP 8.0+. Update first if either is lower.

Step 2: Install and activate BuddyX Pro

BuddyX Pro is a premium theme, so you install it from the zip you downloaded, not from the WordPress.org directory.

Download BuddyX Pro from your account at wbcomdesigns.com.
In your dashboard, go to Appearance > Themes > Add New > Upload Theme.
Choose the zip, click Install Now, then Activate.
Add your license key under Appearance > BuddyX Pro Theme License so you receive updates.

Step 3: Add your community engine (BuddyNext)

BuddyX Pro is built for BuddyNext, our own community platform. It adds member profiles, activity feeds, groups, Spaces, and messaging. (BuddyX Pro also works with BuddyPress and BuddyBoss, but BuddyNext is the complete first-party option we recommend.)

You have a head start on Pro: the theme can install first-party plugins for you.

Go to Appearance > Getting Started and open the Dashboard tab.
In the Wbcom Community Family section, find BuddyNext and read its card.
Install and activate BuddyNext (from its card, or download it from buddynext.com and upload it under Plugins > Add New > Upload Plugin).

Your community is now live and themed end to end.

Want more than community? The same Getting Started screen installs the rest of the family in one click: courses (Learnomy), forums (Jetonomy), a job board (WP Career Board), a services marketplace (WP Sell Services), events (Eventonomy), and more. See the Wbcom Plugin Family.

Step 4: Import demo content (recommended)

Do not start from a blank site. BuddyX Pro ships starter pages you can edit into your own.

Go to Appearance > Customize > General and open the demo / starter content option, or use the block editor's Patterns to drop in ready-made sections.
Set your homepage under Settings > Reading > Your homepage displays > A static page.

See Demo Content (Starter Pages) for the full walkthrough.

Step 5: Set your brand (logo, colors, fonts)

Everything visual lives in Appearance > Customize. Start with these three.

Logo: open Site Identity, upload your logo (and a dark-mode logo if you use dark mode), and set the title and tagline.
Colors: open Site Skin. Pick one of the color presets for an instant look, or set your own primary and accent colors. The live preview updates as you go.
Fonts: open Typography and choose a font preset, or set your own heading and body fonts.

Click Publish to save.

Step 6: Build your header, menus, and footer

Header: open Site Header to choose your header layout, menu position, search style, and the cart or account icons. Pro adds extra header layouts and a sticky header.
Menus: go to Appearance > Menus, build your menu, and assign it to the Primary location.
Footer: open Site Footer to set your footer widgets and the copyright line.

Step 7: Style your community pages

Pro gives you full control over the pages your members see. All of these live under Appearance > Customize > Community Settings.

Members Directory and Groups Directory: pick a card or list style.
Single Member and Single Group: choose the header layout for profile and group pages.
Activity Control: set what appears in the feed.

If you use Youzify, note that it takes over these community screens, so the Community Settings panel does not appear while Youzify is active.

Pro includes a login designer and a sign-in popup, so members never see a plain WordPress login.

Open Appearance > Customize > WP Login and pick a login preset, then set your logo, background, and button style.
For an on-page login and register popup, open Sign-in Popup and turn it on.

See Login Presets and Sign-in Popup.

Step 9: Already on BuddyX free? Migrate your settings

If you set up your site on BuddyX free first, do not reconfigure by hand.

Go to Appearance > Getting Started and open the Migrate from BuddyX Free tab.
Tick the box and select Migrate.

Your colors, fonts, header, sidebars, logo, and other Customizer settings carry straight into BuddyX Pro. Your free settings are left untouched.

Step 10: Go live and check the member journey

Walk the site the way a member will before you invite anyone.

Open your homepage logged out. It should look finished.
Register a test account and confirm the sign-in popup and profile work.
Visit the members, groups, and activity pages.
Toggle dark mode from the header and confirm every page repaints cleanly.

If every step looks right, your community is ready.

Where to go next

Choose Your Path - pick your site type and the plugin that powers it.
Recipes & Tutorials - focused walkthroughs (private community, homepage, dark-mode branding, and more).
Wbcom Plugin Family - every first-party plugin that pairs with BuddyX Pro.

Stuck on any step? See Troubleshooting or the FAQs.

Choose Your Path

What kind of site are you building? Pick the description that fits - we'll route you to a step-by-step setup. You don't need to know WordPress terminology yet - we'll introduce each piece as you go.

If none of the options below match what you want, skip ahead to Browse by topic in the main docs index or just walk through Quick Start for a 15-minute baseline.

You're building a place where visitors can register, create a profile, follow each other, post updates, join groups, and message each other. Think Facebook-lite for your niche - a fan club, alumni network, hobby community, professional society, etc.

What "plugins" you'll need (a "plugin" in WordPress is an add-on you install - like an app - that adds features. They're free unless marked otherwise.):

BuddyPress - the free, open-source plugin that adds the "sign up + profile + activity feed" features. Without it, BuddyX Pro is still a beautiful theme but it doesn't have community features.
(Alternative) BuddyBoss Platform - a paid competitor to BuddyPress with extra features. BuddyX Pro works with both.

Setup steps:

Install BuddyX Pro - turn on the theme
From your WordPress admin, install and activate BuddyPress (Plugins → Add New → search "BuddyPress" → Install → Activate)
Configure BuddyPress Settings - pick which features you want (groups, messages, etc.)
Set Up Member Profiles - what fields people fill in when they sign up
Configure Member Directory - the page where visitors can browse all members
Set Up Groups - sub-communities people can join
Configure Activity Stream - the "feed" of recent posts + interactions

Recommended settings for first-time setup:

Header layout: Layout 1 (clean, traditional) or Layout 2 (centered logo)
Member profile header: Left View (avatar on the left, name + bio on the right)
Turn on: online status indicators, in-site notifications, private messaging

A site to sell physical or digital products

You're building an online store. Products can be physical (t-shirts, books) or digital (downloadable files, ebooks, software).

What "plugins" you'll need:

WooCommerce - the free, industry-standard plugin for selling things on WordPress. It handles cart, checkout, payments, shipping, inventory, taxes.
(Alternative for digital-only) FluentCart - a newer, simpler alternative if you only sell digital goods.

Setup steps:

Install BuddyX Pro
Install and activate WooCommerce (Plugins → Add New → search "WooCommerce")
Run the WooCommerce setup wizard (it asks about your store address, currency, payment method, shipping) - takes about 5 minutes
Configure Shop Settings - how the shop pages should look
Add your first product (Products → Add New)
Connect a payment processor (Stripe and PayPal are the two most common; WooCommerce has buttons to set them up)
Set up shipping rules if you ship physical goods (WooCommerce → Settings → Shipping)

Recommended settings:

Turn on the cart icon in the header (so visitors can see what they've added)
Shop layout: Grid view (most familiar to online shoppers)
Turn on "product quick view" so people can peek at a product without leaving the listing page

A site to teach online courses or lessons

You're building a place where students sign up, take courses, watch lessons, take quizzes, get certificates. Often called an "LMS" (Learning Management System).

What "plugins" you'll need:

LearnDash - paid, professional-grade course platform. BuddyX Pro has deep integration with LearnDash.
(Free alternatives we support) LearnPress, LifterLMS, TutorLMS, Sensei - see Other LMS for setup on each.

Setup steps:

Install BuddyX Pro
Install and activate LearnDash (or your chosen LMS)
Configure LearnDash Settings
Create your first course (Courses → Add New)
Add lessons inside the course (a course is the container; lessons are the content)
Set up course pricing (free / one-time payment / subscription)
Customize Course Pages - how the course list + single course pages look

Recommended settings:

Course archive layout: Grid
Turn on progress tracking (shows students how far they've gotten)
Show the course sidebar with lesson list

A site to publish articles or news (blog / magazine)

You're building a content site - articles, tutorials, news pieces, an opinion column, a niche magazine. Posts shown chronologically; visitors read + share.

What "plugins" you'll need:

Nothing required - WordPress handles blog posts natively
(Recommended) Yoast SEO or Rank Math - free plugins that help your articles show up on Google
(Optional) Jetpack - adds traffic stats, related-posts suggestions, social sharing

Setup steps:

Install BuddyX Pro
Configure Blog Settings - pick a layout (Grid / Magazine / Editorial / etc.) and how many columns
Set Up Single Post Layout - how individual articles look (header position, featured image size, related posts, etc.)
Create categories + tags (Posts → Categories) so visitors can browse by topic
Configure Sidebar - what shows alongside articles
Add widgets in Appearance → Widgets (e.g. recent posts, popular tags, social links)

Recommended settings:

Blog layout: Grid for visual content, Editorial for long-form text, Magazine for news-style
Turn on related posts (keeps readers on your site)
Show author bio at the end of each post
Turn on social sharing buttons

A site where OTHER people sell things (a marketplace)

You're building Etsy / Amazon-lite - a site where multiple vendors each have their own store, products, and earnings. Visitors browse across all vendors and check out in one cart.

What "plugins" you'll need:

WooCommerce (free) - same as the e-commerce setup above
PLUS one of these marketplace plugins:
- Dokan (free + paid) - the most popular, beginner-friendly choice
- MultiVendorX / MVX (free + paid) - strong feature set, slightly more technical
- WCFM Marketplace (free + paid) - feature-rich, lots of vendor controls
- WC Vendors (free + paid) - long-established, dependable

Setup steps:

Complete the E-Commerce Store steps above first
Install + activate ONE marketplace plugin (pick from the four above)
Configure the marketplace plugin (each has its own setup wizard)
Follow the BuddyX Pro doc for your chosen plugin:
- Dokan Marketplace
- MultiVendorX (page exists; see Marketplace folder)
- WCFM Marketplace
- WC Vendors

Recommended settings:

Vendor dashboard layout: pick the layout your vendors will spend most time in (most marketplace plugins ship a default)
Decide vendor commission upfront (e.g. you keep 10%, vendors keep 90%)
Test the full vendor signup → product upload → customer purchase flow before going live

A community + an online store at the same time

You're building a site where people sign up + interact with each other AND can buy things from you (or each other). Examples: a fitness coaching community where you also sell training plans; a hobby group where members can sell handmade items.

Setup steps:

Do the community website setup first (BuddyPress)
Then do the e-commerce store setup (WooCommerce)
Optionally, add a marketplace plugin (Dokan or similar) if your members should sell to each other
WooCommerce profiles automatically connect to BuddyPress profiles - purchase history shows on member profiles

A community + online courses at the same time

You're building a learning community - students take courses + interact in discussion groups, ask each other questions, form study cohorts.

Setup steps:

Do the community website setup first (BuddyPress)
Then do the online learning setup (LearnDash or alternative)
Most LMS plugins integrate with BuddyPress out of the box - a course can have its own group automatically
Optionally add bbPress for course forums so students can ask questions per lesson

A private / members-only site

You're building a site where ONLY logged-in users see content. Could be a paid subscription, an internal company portal, an invite-only community.

What "plugins" you'll need:

MemberPress / Restrict Content Pro / Paid Memberships Pro - paid plugins that gate content behind a login (or behind a paid subscription). Pick whichever fits your budget; BuddyX Pro works with all of them.
(Free alternative) WordPress's built-in "private" pages - but these don't scale beyond a few pages

Setup steps:

Install + activate your membership plugin
Use the plugin's setup wizard to create membership tiers (e.g. Free / Pro / Premium)
Mark which pages / posts / categories are gated to which tier
Set up payment if you're charging
Optionally add the BuddyPress community setup above for member discussion + profiles

Next steps after picking your path

After you've completed the steps for your chosen site type:

Pick your colors - or use a color preset if you'd rather not pick each color individually
Pick your fonts - or use a typography preset
Set up your header - the bar at the top with your logo + menu
Set up your footer - the bottom of every page
Add menus - what links appear in the navigation
Test the site on a phone (open it on your phone or use Chrome DevTools' device mode)
Pre-launch checklist - common gotchas to check before going live

Stuck or confused?

Troubleshooting Guide - common things that go wrong + how to fix them
Glossary - plain-English definitions of WordPress / BuddyX terminology
FAQ - common questions
Email us at support@wbcomdesigns.com any time - we're happy to help

Demo Content (Starter Pages)

BuddyX Pro 5.1.0+ ships a built-in one-click demo content path. It creates a small set of pattern-driven pages so a fresh install lands somewhere visually finished instead of a blank dashboard.

Important: this is NOT a legacy "Demo Importer" that copies an external site. There are no downloaded assets, no BuddyPress demo users, no sample posts, no widget-area dumps, and no external HTTP calls. The button creates a handful of real WordPress pages using patterns that ship inside the theme.

What it creates

One click creates seven WordPress pages, each composed of theme-shipped block patterns rendered against the no-sidebar full-width template:

Page	Patterns used
Home	hero-typography-led, social-proof-logos, features-alternating, social-proof-stats, services-grid, social-proof-testimonials, general-pricing, general-faq, cta-fullbleed
About	hero-split-screen, about-story, about-founder, team-grid
Services	services-grid, features-alternating, cta-newsletter
Pricing	general-pricing, general-faq
Journal	(empty - this page is set as the posts page so the blog archive renders here)
FAQ	general-faq, cta-newsletter
Contact	contact pattern (form + map + business hours)

Plus a primary navigation menu wiring those pages in the order above, and a couple of theme_mod defaults that match the demo screenshots (sidebar layout, blog archive layout, color preset).

That is the complete footprint. No BuddyPress activity, no member fixtures, no sample posts.

Why it works this way

No external HTTP - the patterns live in the theme zip, the customer's site never reaches out to an importer server.
No bundled images - keeps the theme zip small enough for the WP.org review process; images on the demo pages are theme assets you already have.
Idempotent - clicking the button twice does NOT create duplicate pages. The component checks for existing pages by slug and refuses to overwrite.
Customer-triggered - the button never fires on activation; the admin must click it.
Translation-ready - every page title + nav label runs through __() so language packs work out of the box.

Where to find it

Two paths land in the same place:

Fresh install - opening the Customizer on a brand-new WordPress site (where the fresh_site option is still 1) automatically previews the demo pages + menu via WP's native Starter Content API. The customer just clicks Publish to commit them. No button hunt required.
Existing site - an admin notice appears on the dashboard with a Set up demo site button. Clicking it materialises the same set of pages outside the Customizer (the WP Starter Content API only works on truly fresh installs, so the button covers the other 99% of cases).

Steps - existing site

Activate the BuddyX Pro theme.
Look for the "Set up demo site" admin notice on the dashboard.
Click Set up demo site.
The 7 pages + nav menu are created. You stay on the same admin screen; refresh to see the new menu in Appearance > Menus.
Visit the homepage to see the new layout.

To dismiss the notice without creating anything, click Dismiss. The notice does not return.

Steps - fresh install

Activate the BuddyX Pro theme.
Go to Appearance > Customize.
The preview iframe shows the demo pages + the primary nav already wired up. Make any edits you want.
Click Publish to commit the pages.

If you skip the Customizer step on a fresh install, the demo content stays available behind the same admin button described above.

Customising the result

After the pages exist, they are normal WordPress pages. You can:

Edit them in Gutenberg like any other page.
Swap any block pattern for another from the theme's pattern library at Patterns > Browse all.
Re-arrange or rename pages without breaking anything - the demo button does not track them after creation.
Delete any page you do not need.

The demo set is a starting point, not a managed snapshot.

Resetting

To go back to a blank site:

Trash the demo pages from Pages.
Delete the primary nav menu from Appearance > Menus.
Reset the theme_mods the demo set: Appearance > Customize, then change any defaults the demo applied (sidebar layout, color preset).

There is no built-in "reset" button - the demo button is a one-way fill, not a sync.

What 5.0.x users will notice

The 5.0.x One-Click Demo Import experience that downloaded a remote site bundle was retired in 5.1.0:

The Welcome screen no longer ships a "Demo Installation" card linking to an external docs page.
The legacy importer plugin dependency (One Click Demo Import / similar) is no longer required.
There is no sample BuddyPress data, no widget content blob, and no .xml site export to import.
Customers who used the legacy importer should not need to do anything during the upgrade - the legacy importer's pages remain in WordPress as plain pages, untouched.

If you need that kind of full-site clone for a customer migration, ship a real WordPress export (Tools > Export) instead of relying on a theme-bundled importer.

Quick Start - 15-minute path from install to live site (use the demo button at step 1)
Block Patterns - The pattern library the demo pulls from
Color Presets - The colour palette the demo selects (default-light by default)
Choose Your Path - Recipes by site type once the demo is in

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Installation Guide

This guide walks you through installing and activating BuddyX Pro on your WordPress site.

Before You Begin

Pre-Installation Checklist

WordPress 6.5 or higher installed
PHP 8.0 or higher on your server
MySQL 5.7+ or MariaDB 10.3+
At least 128MB PHP memory limit (256MB recommended)
Valid BuddyX Pro license key
Backup of your current site (recommended)

Download the Theme

Log in to your WBCom Designs account
Navigate to Downloads
Find BuddyX Pro and click Download
Save the .zip file to your computer

Installation Methods

Method 1: WordPress Admin Upload (Recommended)

Log in to your WordPress admin dashboard
Navigate to Appearance > Themes
Click Add New at the top of the page
Click Upload Theme
Click Choose File and select the buddyx-pro.zip file
Click Install Now
Wait for the installation to complete
Click Activate to enable the theme

Method 2: FTP Upload

Use this method if the upload fails due to server limitations:

Extract the buddyx-pro.zip file on your computer
Connect to your server via FTP client (FileZilla, Cyberduck, etc.)
Navigate to /wp-content/themes/
Upload the extracted buddyx-pro folder
Go to Appearance > Themes in WordPress admin
Find BuddyX Pro and click Activate

Method 3: cPanel File Manager

Log in to your hosting cPanel
Open File Manager
Navigate to public_html/wp-content/themes/
Click Upload and select the buddyx-pro.zip file
After upload, right-click the zip file and select Extract
Go to WordPress admin > Appearance > Themes
Activate BuddyX Pro

Post-Installation Setup

Step 1: Install recommended plugins

After activating BuddyX Pro, you may see a notice about recommended plugins:

Click the notification or go to Appearance > Install Plugins.
Select the plugins you need:
- BuddyPress or BuddyBoss Platform - For community features (member profiles, activity, groups, messaging).
- WooCommerce - If you want a shop, paid memberships, or the WP Sell Services bundled plugin.
- Bundled BuddyX Pro plugins (Jetonomy, MediaVerse, WB Gamification, WP Career Board, WP Sell Services) - install on demand from the BuddyX Pro Plugins notice on your dashboard. See Bundled Plugins for the full reference.
Click Install and then Activate.

5.1.0 note: the legacy Kirki Customizer Framework plugin is no longer required. BuddyX Pro 5.1.0 ships a first-party customizer framework in-theme. If Kirki is still active from a 5.0.x install, you can safely deactivate it on upgrade.

Step 2: Set up demo content (optional)

BuddyX Pro 5.1.0 ships with built-in pattern-driven demo pages - no third-party importer plugin required.

On the dashboard, find the Set up demo site admin notice.
Click the button. Seven pages get created (Home, About, Services, Pricing, Journal, FAQ, Contact), each composed of theme-shipped block patterns.
A primary navigation menu wiring those pages is also created.

See Demo Content (Starter Pages) for the full reference, including how the fresh-install Customizer auto-preview path differs from the existing-site admin button. The legacy Starter Templates / One-Click Demo Import flow from 5.0.x is no longer required.

Step 3: Configure Basic Settings

Go to Appearance > Customize
Set your Site Identity (logo, site title, tagline)
Configure Header options (layout, menu position)
Set your Colors in the Skin panel
Click Publish to save changes

Step 4: Set Up Menus

Navigate to Appearance > Menus
Create a new menu or edit existing
Add pages, categories, or custom links
Assign to menu locations:
- Primary Menu - Main navigation
- Footer Menu - Footer links
- Topbar Menu - Top bar links (if enabled)
Save your menu

Step 5: Configure Widgets

Go to Appearance > Widgets
Add widgets to available sidebar areas:
- Primary Sidebar
- BuddyPress Sidebars (if BuddyPress active)
- Footer Widget Areas
Configure widget settings as needed

Updating the Theme

Automatic Updates

BuddyX Pro supports automatic updates through WordPress:

Go to Appearance > Themes
If an update is available, you'll see a notification
Click Update Now
Wait for the update to complete

Manual Update

If automatic updates don't work:

Download the latest version from your account
Deactivate the current BuddyX Pro theme
Delete the old theme folder via FTP
Upload and install the new version
Reactivate the theme

Important: Your customizer settings are stored in the database and will be preserved during updates.

Troubleshooting Installation

Upload Failed: File Size Limit

Problem: The theme file is too large to upload.

Solutions:

Increase PHP upload limits in php.ini:

upload_max_filesize = 64M
post_max_size = 64M

Use FTP upload method instead
Contact your hosting provider to increase limits

Theme Is Missing stylesheet

Problem: "The theme is missing the style.css stylesheet" error.

Solutions:

Ensure you're uploading the correct zip file (not the download wrapper)
The zip should contain the buddyx-pro folder directly
Try extracting and re-zipping with only the theme folder

White Screen After Activation

Problem: Site shows blank white screen after theme activation.

Solutions:

Increase PHP memory limit:
```
define('WP_MEMORY_LIMIT', '256M');
```

Enable WordPress debug mode to see errors:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Check for plugin conflicts by deactivating all plugins

Customizer Not Loading

Problem: Customizer shows loading spinner indefinitely.

Solutions:

Clear browser cache
Try a different browser
Deactivate caching plugins temporarily
Check for JavaScript errors in browser console

Child Theme Installation

For customizations that survive theme updates:

Download the BuddyX Pro child theme from your account
Install via Appearance > Themes > Add New > Upload Theme
Activate the child theme instead of the parent theme
Make customizations in the child theme files

See Creating a Child Theme for detailed instructions.

Next Steps

After successful installation:

Configure Header Options
Set Up Typography
Configure BuddyPress
Explore All Features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Introduction to BuddyX Pro

Welcome to BuddyX Pro - everything you need to build a thriving community website with WordPress.

For the full, always-current in-house plugin catalog (every product, free and pro, in one place), see Plugin family.

What BuddyX Pro is

BuddyX Pro is a complete community platform: a beautiful WordPress theme plus an in-house suite of plugins, all bundled together under a single license from Wbcom Designs. Turn on the theme for the look; turn on the bundled plugins to power the parts of your community you need.

Because the theme and every bundled plugin are built and supported by the same team, you get one place to ask for help - no vendor-pointing-at-vendor when something needs work.

Theme highlights

Member Profiles - user profiles, avatars, cover images, custom fields
Social Activity - activity feeds, likes, comments, reactions
Groups - public / private groups with their own discussions and members
Messaging - private messaging between members
Dark Mode - light / dark color modes with a visitor toggle
Typography Presets - 7 hand-curated font pairings (Geist, Inter, IBM Plex, DM Sans, Editorial, Magazine, Default)
Color Presets - 14 brand-tuned palettes that pair light + dark variants automatically
60+ Block Patterns - pre-designed page sections you drop in to build pages fast
Per-page Settings - override sidebar / header / footer / color mode / loader on individual pages

Bundled plugin ecosystem (included with every license)

These are the in-house plugins built and maintained by Wbcom Designs that ship alongside BuddyX Pro. Every one is included with your theme license - no separate purchase, no per-plugin renewals.

Plugin	What it adds
Jetonomy	Modern community surface - forums, Q&A, ideas, and votes, with six trust levels for moderation
MediaVerse	Native video upload + hosting + player, no third-party video service needed
WB Gamification	Points, ranks, badges, leaderboards - turn engagement into measurable progress
WP Career Board	Job board + resume management for community-led careers / placement sites
WP Sell Services	Service marketplace built on WooCommerce - sell consulting, lessons, freelance work
WB Ad Manager	Display ad zones, sponsorship slots, and ad rotation across your site
Listora	Directory builder - business listings, member directories, location-aware browse
Learnomy	First-party LMS - courses, lessons, quizzes, certificates, drip schedules

See Bundled Plugins for the full reference.

Why we recommend the in-house ecosystem: every bundled plugin is built and supported by Wbcom Designs alongside the theme. Compatibility is a feature, not a hope. Updates are coordinated. Support is one team. You don't end up debugging "is this the theme or is this plugin X" - there's one phone number.

Who BuddyX Pro is for

You are	BuddyX Pro helps you
A community builder	Create social networks, membership sites, fan communities, alumni networks
A course creator	Sell courses with community features - students chat, form study groups, share progress
A marketplace owner	Run a marketplace where multiple vendors sell their products or services
A business owner	Member directories, professional networks, internal company portals
A blogger / publisher	Publish articles with a clean reading experience + community discussion

Third-party plugins also work

Beyond the in-house bundled plugins, BuddyX Pro also plays nicely with the established WordPress community / e-commerce ecosystem. Use these when they fit a specific need the bundled set doesn't cover, or when you have an existing site already invested in a particular third-party plugin:

Third-party plugin	What it does
BuddyPress / BuddyBoss Platform	The classic open-source community plugin (and its paid counterpart). BuddyX Pro has deep visual integration.
WooCommerce	The industry-standard e-commerce plugin for selling physical or digital products
LearnDash / LifterLMS / TutorLMS / Sensei / LearnPress	Various LMS options for online courses
bbPress	Discussion forums (alternative to Jetonomy's forum surface)
Dokan / WCFM Marketplace / MultiVendorX / WC Vendors	Multi-vendor marketplace plugins (alternatives if you choose not to use WP Sell Services for your marketplace)
Elementor / Elementor Pro	Page-building plugin (alternative to the built-in block editor + block patterns)
The Events Calendar	Event listings + scheduling
GamiPress / myCred	Gamification (alternatives to WB Gamification)
FluentCart / SureCart	Lighter-weight e-commerce alternatives to WooCommerce
GeoDirectory / Business Directory	Directory listings (alternatives to Listora once it ships)
WP Job Manager	Jobs (alternative to WP Career Board)
Yoast SEO / Rank Math	SEO optimization

BuddyX Pro is designed to work with the WordPress ecosystem as a whole - pick whichever combination fits your site. We recommend starting with the bundled in-house plugins because they're tested together, supported by the same team, and update in sync.

What you need

Requirement	Minimum
WordPress	6.5+
PHP	8.0+
MySQL	5.7+

Required additional plugins: none. BuddyX Pro 5.1.0+ ships its own customizer framework - no separate Customizer plugin is needed (pre-5.1.0 needed Kirki; that dependency was removed).

Get started

Quick Start (about 45 minutes)

The mandatory first-time setup - every site needs these basics regardless of what kind of site you're building.

Install + activate the theme (2 min)
Site identity (5 min) - logo, title, tagline, favicon
Colors (5 min) - preset or custom
Fonts (5 min) - preset or custom
Header + menu (8 min)
Footer (5 min)
Essential pages (10 min) - Home, About, Contact, Privacy Policy
Set your homepage (3 min)
(Optional) Dark mode (2 min)

Full Quick Start Guide →

Choose your path

After the mandatory setup, pick what kind of site you're building:

Community site - sign-ups, profiles, groups, chat
Online store - sell products
Online courses - teach, sell access
Blog or magazine - publish articles
Marketplace - multi-vendor selling
Private / members-only - gated content

Customizer overview

All theme settings live in Appearance → Customize:

Main Customizer Panels

Panel	What it controls
Site Identity	Logo, site title, tagline, favicon
Site Header	Header layout, menu, header icons
Site Skin	Colors, color presets, dark mode
Typography	Fonts, typography presets, sizes
Site Sidebar Layout	Sidebar positions per content type
Site Footer	Footer widgets, copyright
BuddyPress	Community settings (when BP plugin active)
WooCommerce	Shop settings (when Woo plugin active)

Next steps

Quick Start - the mandatory first-time setup walkthrough
Installation Guide - detailed install + activation steps
System Requirements - server requirements + recommendations
Choose Your Path - pick your site type
Upgrading from 5.0.x - if you're updating an existing BuddyX Pro site
Upgrading from BuddyX Free - if you're moving from the free theme
Glossary - plain-English definitions of every term in these docs

Got questions? We're a small, friendly team - drop us a line at support@wbcomdesigns.com any time, or check the Troubleshooting and FAQ for common answers.

Quick Start - First-Time Setup

Set up your site's essentials in about 45 minutes. Every site needs these basics - regardless of whether you're building a community, a store, a course site, or a blog. Do these first, then pick your path.

This guide is the mandatory first-time setup. After you finish it, your site will look professional and be ready for visitors. The site-type-specific stuff (community, store, etc.) builds on top of this.

What you'll set up (and why each is mandatory)

Step	Why it's mandatory	Time
1. Install the theme	Nothing renders until BuddyX Pro is active	2 min
2. Site identity (logo + title)	Without a logo or readable title, visitors don't know whose site they're on	5 min
3. Colors	The default works, but most sites need brand colors to feel like yours	5 min
4. Fonts	Default fonts are generic; picking a font pairing makes the site feel intentional	5 min
5. Header (layout + menu)	Without navigation, visitors can't move around the site	8 min
6. Footer	Every visitor sees this on every page; empty footer looks unfinished	5 min
7. Essential pages (Home, About, Contact, Privacy)	Privacy is legally required in most countries; the others are basic site furniture	10 min
8. Homepage	WordPress shows your latest posts by default - most sites need a real Home page	3 min
9. (Optional) Dark mode	Decide if visitors get a light/dark toggle	2 min

After all this, jump to Choose Your Path to set up the features specific to your type of site (community, shop, courses, etc.).

Step 1 - Install the theme (2 minutes)

Download buddyx-pro.zip from your account at wbcomdesigns.com
In your WordPress admin, go to Appearance → Themes → Add New → Upload Theme
Click Choose File, select buddyx-pro.zip
Click Install Now, then Activate

If the upload fails (often because the ZIP is too large for your host's upload limit), see the longer Installation Guide for the workaround.

Where to go next: Appearance → Customize in your WordPress admin. This opens the "Customizer" - a panel on the left side of the screen where you'll make every setting change in the steps below. The right side shows a live preview of what visitors will see.

Step 2 - Site identity (5 minutes)

This is your site's name, tagline, logo, and favicon. Every visitor sees these on every page.

In Customizer, open Site Identity:

Setting	What it is	Recommendation
Site Title	The text name of your site (also used in the browser tab)	Your brand name
Tagline	A short one-line description below the title	Skip if you have a logo; otherwise a memorable tagline
Logo	An image that replaces the text title in the header	Recommended: 200-300px wide, transparent PNG or SVG
Site Icon (Favicon)	The tiny icon in the browser tab and bookmarks	Required: 512×512px square image

Logo upload:

Click Select Logo
Upload your logo file
Skip the cropping step (click Skip Cropping) unless you want the cropped version
Use the Logo Size slider to fit it nicely in the header
If your logo is dark and you'll use dark mode (Step 9), also upload a Dark Mode Logo (light-colored version)

Why mandatory: visitors land on your site and immediately look for "is this the right place?" The logo + site title answer that in half a second.

Click Publish at the top of the Customizer to save.

Step 3 - Colors (5 minutes)

You have two ways to set colors. Pick whichever you prefer.

Option A - Use a color preset (fastest)

In Customizer, open Site Skin
Scroll to Style preset - a grid of 14 hand-tuned color swatches
Click the one that feels right for your brand:
- Default Light / Default Dark - the BuddyX baseline
- Sapphire - bright blue, great for SaaS / tech sites
- Indigo - rich blue-purple, great for fintech
- Coral - warm orange, great for marketing / hospitality
- Carbon - near-black, premium / luxury feel
- ...and 9 more (#color-presets-bxpro) for all 14 with previews)
Click Publish

Option B - Set your brand colors manually

If you have a specific brand color (a hex code from your brand guide), do this instead:

In Customizer, open Site Skin
Scroll to Primary Color - this is your brand's main accent (drives buttons, links, highlights)
Click the color swatch and paste your brand hex (e.g. #FF5733)
Optionally adjust Body Background, Content Background, Heading Color, Body Text Color if your brand has a specific palette
Click Publish

Most sites do Option A for the first launch and switch to Option B later when they want exact brand colors. Either way you can change later without losing other settings.

Why mandatory: the default theme colors are generic - until you set yours, your site looks like every other un-customized WordPress site.

Step 4 - Fonts (5 minutes)

Same as colors - two options.

Option A - Use a typography preset (fastest)

In Customizer, open Typography (or Site Skin → Typography Preset)
Pick a preset. Default = no preset (uses the theme's system-ui baseline), plus the 7 named presets:
- Inter - clean, neutral (works everywhere)
- Geist - modern, technical (great for SaaS)
- IBM Plex - corporate, dependable
- DM Sans - friendly, approachable
- Editorial - sophisticated serif for long-form content
- Magazine - bold display + readable body, for news / blog sites
- Humanist - warm, readable humanist sans-serif
Click Publish

Option B - Set fonts manually

In Customizer, open Typography
Pick a Body Font (the font used for most reading text) - choose from the dropdown
Pick a Heading Font (for H1-H6) - usually different from the body font for contrast
Optionally pick separate fonts for Site Title, Menu, and Sub-menu
Click Publish

The fonts come from Google Fonts (a free font library Google hosts). The first time a visitor lands on your site, the fonts download from Google. After that they're cached in the visitor's browser.

Why mandatory: typography is half of "how a site feels". Default fonts look unintentional; a deliberate choice looks professional.

Step 5 - Header (8 minutes)

The header is the bar at the top of every page. It holds your logo + menu (and optionally a search icon, cart, notification bell, etc.).

In Customizer, open Header → Header Layout
Pick one of 4 layouts:
- Layout 1 - logo on left, menu on right (most common; safest first pick)
- Layout 2 - logo centered, menu below
- Layout 3 - logo on left, menu centered, icons on right
- Layout 4 - full-width banner-style header
Click Publish

The menu is the list of links in your header (e.g. Home / About / Shop / Contact).

Go to Appearance → Menus (a separate WordPress admin page, not the Customizer)
Click Create a new menu
Name it "Primary Menu" (this is the name you'll see in WordPress; visitors never see it)
From the left panel, add pages (you'll create the pages in Step 7 - for now just leave a placeholder if needed)
Under "Menu Settings" at the bottom, check Primary Menu as the display location
Click Save Menu

You can come back and add more pages to the menu later. For first launch, having even 4-5 links is fine.

Why mandatory: without a working menu, visitors can't move between pages. Even a tiny site needs a Home / About / Contact navigation.

The footer is the area at the very bottom of every page. Most sites use it for:

Site description / about blurb
Social media links
Recent posts or popular content
Contact info / email
Copyright text
Privacy Policy + Terms of Service links

Go to Appearance → Widgets
You'll see footer widget areas (Footer 1, Footer 2, Footer 3, depending on layout)
For each area, click + and add a widget:
- Text widget - write a short site description
- Recent Posts widget - show your 3-5 latest articles
- Custom HTML widget - for social media icons or contact info
- Navigation Menu widget - for footer links (Privacy, Terms, etc.)

Set copyright text

In Customizer, open Site Footer → Copyright
Edit the copyright text (e.g. "© 2026 Your Brand Name. All rights reserved.")
Click Publish

Why mandatory: the footer is on every page, including the homepage. An empty footer makes a site look abandoned or under-construction.

Step 7 - Essential pages (10 minutes)

Every site should have these four pages before launch:

Page	What's on it	Required for
Home	Your main landing page - usually a mix of hero image, intro text, featured content	Every site
About	Who you are, why this site exists, your story	Every site (trust signal)
Contact	A form or email + maybe an address + maybe social links	Every site (people want to reach you)
Privacy Policy	What data you collect, how you use it, GDPR/CCPA compliance	Legally required in most countries

How to create a page

For each of the four:

Go to Pages → Add New
Type the title (e.g. "About")
Add content using the WordPress block editor (drag in headings, paragraphs, images)
Click Publish
Note the URL of the page - you'll add it to your menu

Use block patterns to save time

BuddyX Pro ships pre-designed block patterns for these pages. Instead of writing from scratch:

In the WordPress block editor, click the + icon to add a block
Click the Patterns tab
Browse for "About hero", "Contact form", "Privacy intro" patterns
Click to insert, then edit the text + images

See Block Patterns for the full pattern library.

Privacy Policy quick option

WordPress ships a Privacy Policy template:

Go to Settings → Privacy
Click Create New Page
Edit the auto-generated template to match what your site actually does
Click Publish

Step 8 - Set your homepage (3 minutes)

By default, WordPress shows your latest blog posts on the home URL. Most sites want a static "Home" page instead.

Go to Settings → Reading
Under Your homepage displays, pick A static page
Homepage dropdown → pick the "Home" page you created in Step 7
Posts page dropdown → pick a "Blog" page (create one if you want a separate blog section) or leave blank if you don't have a blog
Click Save Changes

Visit yoursite.com/ to see your new Home page.

Why mandatory: without this, visitors hitting your domain see your blog feed (which may have 0 posts on day 1) instead of a designed welcome.

Step 9 (optional) - Dark mode (2 minutes)

Decide if visitors get to toggle between light and dark colors.

In Customizer, open Site Skin → Color Mode
Pick one of two modes:
- Light (recommended for first launch) - the look new visitors land on is light
- Dark - new visitors land on dark (mostly for tech / gaming sites)
If you want visitors to choose for themselves, turn on Show color-mode toggle - a sun/moon icon appears on the site that they can click
If you have a dark logo, go back to Site Identity and upload a Dark Mode Logo (a light-colored version)
Click Publish

See Dark Mode for the full reference.

Skip this step at first launch if you're unsure. You can always turn it on later.

You're done with the mandatory setup!

Your site now has:

✓ A logo + site identity
✓ A color palette that fits your brand
✓ Fonts that feel intentional
✓ A header with a working menu
✓ A footer with copyright + widgets
✓ Four essential pages (Home, About, Contact, Privacy)
✓ A real Home page (not a default blog feed)
✓ (Optional) Dark mode decision

This is enough to launch a basic site that looks professional.

What's next

Pick the path that fits the kind of site you're building:

Site type	Where to go
Community / social network	Choose Your Path → Community
Online store	Choose Your Path → E-Commerce
Online courses	Choose Your Path → Learning
Blog / magazine	Choose Your Path → Blog
Marketplace (multiple vendors)	Choose Your Path → Marketplace
Just a brochure site (no special features)	You're already done! Add more pages + patterns as needed

Common questions

Did I have to do all 9 steps? Steps 1-8 are mandatory for any serious site. Step 9 (dark mode) is optional.

Can I do these out of order? Yes - but the order above is recommended because each step shows results in the live preview that informs the next decision. Logo first → then colors → then fonts → ... makes more sense than the reverse.

My site still looks wrong after this - what now? Make sure each step was followed (logo uploaded, menu assigned to "Primary Menu" location, homepage set to your Home page in Settings → Reading). If you're still stuck, see Troubleshooting or email support@wbcomdesigns.com.

How long until I can launch? With the steps above done + the type-specific Choose Your Path steps done, most sites can launch in 2-4 hours total.

Quick Reference (after first-time setup)

Task	Where in WordPress
Change logo	Appearance → Customize → Site Identity
Change colors	Appearance → Customize → Site Skin
Change fonts	Appearance → Customize → Typography
Change header layout	Appearance → Customize → Header
Change footer	Appearance → Widgets + Appearance → Customize → Site Footer
Edit menu	Appearance → Menus
Add a page	Pages → Add New
Change homepage	Settings → Reading
Toggle dark mode	Appearance → Customize → Site Skin → Color Mode

Need help?

Troubleshooting Guide - common things that go wrong
Glossary - plain-English definitions
FAQ - common questions
Email us at support@wbcomdesigns.com - we're happy to help

System Requirements

This document outlines the minimum and recommended requirements for running BuddyX Pro.

Server Requirements

Minimum Requirements

Requirement	Minimum	Recommended
PHP Version	8.0	8.2+
MySQL Version	5.7	8.0+
MariaDB Version	10.3	10.6+
WordPress Version	6.5	6.6+
PHP Memory Limit	128MB	256MB+
Max Upload Size	32MB	64MB+
Max Execution Time	60 seconds	300 seconds

PHP Extensions Required

The following PHP extensions must be enabled:

curl - For API requests and updates
dom - For XML/HTML processing
fileinfo - For file type detection
hash - For security functions
json - For JSON data handling
mbstring - For multibyte string handling
openssl - For secure connections
pcre - For regular expressions
xml - For XML processing
zip - For file compression

Recommended PHP Settings

Add these to your php.ini or .htaccess:

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300
max_input_vars = 3000
memory_limit = 256M

WordPress Requirements

Core Requirements

WordPress 6.5 or higher
Pretty permalinks enabled (Settings > Permalinks)
wp-content directory writable
uploads directory writable

Database Requirements

UTF-8 character set (utf8mb4 recommended)
InnoDB storage engine
Adequate database size for your content

Browser Compatibility

BuddyX Pro supports all modern browsers:

Browser	Minimum Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
Opera	76+

Note: Internet Explorer is not supported.

Plugin Compatibility

Fully Supported Plugins

These plugins have full template and styling integration:

Plugin	Minimum Version	Notes
BuddyPress	11.0	Full template override
BuddyBoss Platform	2.0	Complete compatibility
WooCommerce	8.0	Shop, cart, checkout styling
LearnDash	4.0	Course templates, dashboard
bbPress	2.6	Forum templates
FluentCart	1.0	Product pages, checkout
Dokan	3.7	Marketplace templates
LearnPress	4.2	Course templates
Tutor LMS	2.0	Course styling
LifterLMS	7.0	Course templates
GamiPress	2.0	Badge display
Elementor	3.15	Page builder support
Elementor Pro	3.15	Theme builder support

Recommended Plugins

Starter Templates - For importing demo content
WP Fastest Cache or LiteSpeed Cache - For performance

The Kirki Customizer Framework plugin was a 5.0.x dependency. BuddyX Pro 5.1.0+ ships its own first-party customizer framework, so Kirki is no longer required (or recommended) - it can be safely deactivated and removed after upgrading.

Known Incompatibilities

Some plugins may cause conflicts:

Other BuddyPress themes with template overrides
Plugins that heavily modify the WordPress customizer
Legacy page builders (Visual Composer, Divi Builder)

Hosting Recommendations

Shared Hosting

Minimum for small communities (under 500 members):

2GB+ disk space
256MB+ PHP memory
Adequate monthly bandwidth
PHP 8.0+ support

Recommended Providers: SiteGround, Bluehost, A2 Hosting

VPS/Cloud Hosting

For medium communities (500-5,000 members):

2+ CPU cores
4GB+ RAM
SSD storage
Managed WordPress optimization

Recommended Providers: Cloudways, DigitalOcean, Vultr

Dedicated/Enterprise

For large communities (5,000+ members):

4+ CPU cores
8GB+ RAM
Object caching (Redis/Memcached)
CDN integration
Database optimization

Recommended Providers: WP Engine, Kinsta, Pagely

Performance Considerations

Caching

Enable caching for optimal performance:

Page Caching - WP Fastest Cache, LiteSpeed Cache
Object Caching - Redis or Memcached
Browser Caching - Configured via .htaccess
CDN - Cloudflare, StackPath, KeyCDN

Database Optimization

Regular cleanup of post revisions
Optimize database tables monthly
Use object caching for complex queries
Consider database indexing for large sites

Image Optimization

Use WebP format when possible
Implement lazy loading (built into theme)
Optimize images before upload
Consider image CDN (Cloudinary, imgix)

Checking Your Environment

Using Site Health

WordPress includes a Site Health tool:

Go to Tools > Site Health
Review Status tab for issues
Check Info tab for server details
Address any critical issues shown

Manual PHP Info Check

Create a file phpinfo.php in your root:

<?php phpinfo(); ?>

Access it via browser, then delete after checking.

WP-CLI Commands

If you have WP-CLI access:

# Check PHP version
wp cli info

# Check WordPress version
wp core version

# Check plugin versions
wp plugin list

# Check theme status
wp theme status

Upgrading Requirements

From Older PHP Versions

If upgrading from PHP 7.x:

Test on a staging site first
Update all plugins to latest versions
Check for deprecated function warnings
Verify all functionality after upgrade

From Older WordPress Versions

If upgrading from WordPress 5.x:

Back up your database and files
Update all plugins first
Update WordPress core
Test thoroughly after upgrade

Troubleshooting Environment Issues

PHP Memory Exhausted

Add to wp-config.php:

define('WP_MEMORY_LIMIT', '256M');

Upload Size Too Small

Add to .htaccess:

php_value upload_max_filesize 64M
php_value post_max_size 64M

Execution Time Exceeded

Add to wp-config.php:

set_time_limit(300);

Or in .htaccess:

php_value max_execution_time 300

Next Steps

Once your environment meets requirements:

Install BuddyX Pro
Configure Basic Settings
Set Up Your Community

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Translate Strings with Loco Translate

BuddyX Pro is fully translation-ready and works seamlessly with the Loco Translate plugin. This guide walks you through translating theme strings into your preferred language.

What You'll Need

WordPress 5.0 or higher
Loco Translate plugin (free)
BuddyX Pro theme installed and active

Why Use Loco Translate?

Loco Translate provides several advantages:

Feature	Benefit
In-Dashboard Editing	Translate directly in WordPress admin
Safe Location	Stores translations outside theme folder
Update-Proof	Translations survive theme updates
No Coding Required	Visual interface for all strings
PO/MO Generation	Automatically creates translation files

Step-by-Step Translation Guide

Step 1: Install Loco Translate

Go to Plugins > Add New
Search for "Loco Translate"
Click Install Now then Activate

Step 2: Set Your Site Language

Navigate to Settings > General
Scroll to the Site Language dropdown
Select your target language (e.g., French, German, Spanish)
Click Save Changes

Note: If your language isn't listed, you may need to install language packs manually. You can temporarily set it to English while preparing translations.

Step 3: Verify Folder Structure

Before translating, ensure this directory exists and is writable:

wp-content/languages/loco/themes/

Why this matters:

Translations saved here are protected from theme updates
WordPress automatic updates won't delete your work
This is the recommended "Custom" location in Loco Translate

To create the folder:

Connect via FTP or use File Manager in cPanel
Navigate to wp-content/languages/
Create folder loco if it doesn't exist
Inside loco, create folder themes
Ensure folders have write permissions (755)

Warning: Never save translations directly in the theme folder (wp-content/themes/buddyx-pro/languages/) as theme updates will delete them.

Step 4: Access Translation Dashboard

Click Loco Translate in the admin menu
Select Themes from the submenu
Find and click BuddyX Pro from the theme list

You'll see a list of existing translations and available languages.

Step 5: Add a New Language

Click the New language button (has a + icon)
Select your target language from the dropdown
Important: Choose Custom as the location
- This saves to wp-content/languages/loco/themes/
- Protects translations from updates
Click Start translating

Step 6: Translate Theme Strings

The translation editor shows all translatable strings:

Understanding the Interface:

Element	Meaning
Bold blue text	Untranslated strings
Regular text	Already translated
*Star icon ()**	Unsaved changes
Filter box	Search for specific phrases

How to Translate:

Click on a string in the upper pane
The original English text appears in the Source text area
Enter your translation in the Translation area below
Move to the next string (use Tab or click)
Repeat for all strings you want to translate

Tips for Efficient Translation:

Use the Filter to find specific words (e.g., "Login", "Profile")
Focus on user-facing strings first (buttons, menus, messages)
Keep placeholder variables intact (e.g., %s, %d, {name})
Match the tone and formality of your site

Step 7: Save Your Work

Click the Save icon in the editor toolbar (or press Ctrl+S)
Loco Translate creates/updates the .po and .mo files
Your translations are immediately active on the frontend

Common Strings to Translate

Here are frequently translated BuddyX Pro strings:

English	Purpose
Home	Main navigation
Activity	BuddyPress activity stream
Members	Member directory
Groups	Group directory
Log In / Log Out	Authentication
Register	New user signup

Profile & Members

English	Purpose
Profile	User profile page
Edit Profile	Profile editing
Messages	Private messaging
Notifications	User alerts
Friends	Friend connections
Following / Followers	Social follow system

Activity Stream

English	Purpose
What's new?	Activity post box
Post Update	Submit button
commented	Activity action
liked	Reaction action

Groups

English	Purpose
Create a Group	Group creation
Join Group	Membership action
Leave Group	Exit action
Group Settings	Admin area

Updating Translations After Theme Updates

When BuddyX Pro is updated, new strings may be added:

Go to Loco Translate > Themes > BuddyX Pro
Click on your language
Click Sync to detect new strings
New untranslated strings appear in bold blue
Translate the new strings
Save your work

Troubleshooting

Translations Not Showing

Problem: Frontend still shows English text.

Solutions:

Clear any caching plugins
Verify site language is set correctly
Check that .mo file was generated (not just .po)
Ensure file permissions allow writing

Permission Denied Error

Problem: Cannot save translations.

Solutions:

Check folder permissions (should be 755)
Verify wp-content/languages/loco/themes/ exists
Contact hosting provider if using managed WordPress

Missing Strings

Problem: Some strings don't appear in Loco Translate.

Causes:

Strings may be from plugins (BuddyPress, WooCommerce)
JavaScript strings may need separate translation
Custom code may have hardcoded text

Solution: Translate plugin strings separately via Loco Translate > Plugins

Placeholder Variables

Problem: Translation shows broken text like %s or {name}.

Solution: Keep all placeholder variables in your translation:

Original: Welcome back, %s!
Translation: Willkommen zurück, %s! (German)

The %s gets replaced with the actual username at runtime.

Alternative Translation Methods

WPML (Premium)

If you need a multilingual site (multiple languages simultaneously):

BuddyX Pro is WPML compatible
Allows visitors to switch languages
More complex setup than Loco Translate

Polylang (Free/Premium)

Another multilingual option:

Compatible with BuddyX Pro
Free version available
Good for simple multilingual needs

Manual PO File Editing

For developers:

Copy buddyx-pro.pot from theme's languages folder
Rename to your locale (e.g., buddyx-pro-de_DE.po)
Edit with Poedit or similar tool
Generate .mo file
Upload to wp-content/languages/themes/

Best Practices

Backup First - Export translations before major changes
Use Custom Location - Always save to wp-content/languages/loco/themes/
Sync Regularly - Check for new strings after theme updates
Test Thoroughly - View translated pages to check context
Keep Consistent - Use the same terms throughout (e.g., always "Profile" not sometimes "Account")

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Upgrading from BuddyX Free to BuddyX Pro

This guide helps you migrate your settings when upgrading from the free BuddyX theme to BuddyX Pro. The built-in migration tool automatically transfers your customizer settings, saving you time and preserving your design choices.

Before You Upgrade

Pre-Upgrade Checklist

Backup your WordPress site (database and files)
Note any custom CSS you've added to BuddyX free
Document any child theme customizations
Ensure you have a valid BuddyX Pro license
Test the upgrade on a staging site first (recommended)

What Gets Migrated

The migration tool automatically transfers 80+ theme settings from BuddyX free to BuddyX Pro:

Category	Settings Migrated
Layout	Site layout, container width
Loader	Site loader, loader background color
Page Mapping	Login page, registration page, 404 page
Typography	Site title, tagline, headings (H1-H6), menu, submenu, body text
Colors	Primary color, link colors, button colors, background colors
Header	Header background, search, cart, login/register links
Subheader	Background settings, breadcrumbs, typography
Blog	Layout options, image position, grid columns, masonry view
Single Post	Content width, title layout, sidebar options
Sidebars	Main sidebar, BuddyPress sidebars, bbPress sidebar, WooCommerce sidebar, sticky sidebar
WP Login	Custom login settings, logo, background
Footer	Background, colors, copyright text, link colors

Special Color Mappings

BuddyX Pro has a more organized color system. During migration, some color settings are automatically mapped to their new locations:

BuddyX Free Setting	BuddyX Pro Setting
Site Title Typography → Color	Site Title Color
H1 Typography → Color	Headings Color
Tagline Typography → Color	Body Text Color
Menu Typography → Color	Menu Color
Body Typography → Color	Body Text Color
Subheader Typography → Color	Subheader Title Color

How to Upgrade

Step 1: Install BuddyX Pro

Download BuddyX Pro from your WBCom Designs account
Go to Appearance > Themes > Add New > Upload Theme
Upload the buddyx-pro.zip file
Click Install Now
Do NOT activate yet if you want to preserve your BuddyX free settings

Step 2: Activate BuddyX Pro

After installation, click Activate
You'll be redirected to the Getting Started page
The migration tab will automatically appear if BuddyX free settings are detected

Step 3: Run the Migration

Navigate to Appearance > Getting Started
Click on the BuddyX Free to Pro Upgrade tab
Check the box: Migrate BuddyX free theme options to the BuddyX Pro theme
Click the Upgrade button
Wait for the success message: "Successfully migrate Buddyx Free theme options to Buddyx Pro theme"

Navigate to Appearance > Getting Started to find the migration tab

Step 4: Verify Your Settings

After migration, verify your settings were transferred correctly:

Go to Appearance > Customize
Check the following sections:
- Site Identity - Logo and site title
- Skin > Colors - Primary and secondary colors
- Typography - Font families and sizes
- Header - Layout and elements
- Footer - Background and content colors
Visit your frontend to confirm the appearance

What's NOT Migrated

Some items require manual setup after migration:

Manual Configuration Required

Item	Action Needed
Custom CSS	Copy from BuddyX free Customizer > Additional CSS to BuddyX Pro
Child Theme Files	Update child theme to extend `buddyx-pro` instead of `buddyx`
Menu Assignments	Re-assign menus if new menu locations exist
Widget Areas	BuddyX Pro has additional widget areas - configure as needed
Pro-Only Features	Configure new features like Dark Mode, Side Panel, etc.

New Features in BuddyX Pro

After migration, explore these exclusive BuddyX Pro features that aren't available in the free version:

A modal login/registration popup that appears when users click login links, providing a seamless authentication experience without leaving the current page.

Location: Appearance > Customize > General > Sign-in Popup

Features:

Enable/disable popup login
Customize popup appearance
Configure redirect after login (current page, profile, activity, custom URL)
Works alongside or instead of page-mapped login

Side Panel

A slide-out navigation panel that provides quick access to menu items, user profile, and widgets.

Location: Appearance > Customize > Side Panel

Features:

Toggle panel open/closed by default
Show on desktop, mobile, or both
Customize background colors
Add menu and widget areas
Show/hide logout button for logged-in users

Group Single Settings

Extended customization options for individual BuddyPress/BuddyBoss group pages.

Location: Appearance > Customize > Community Settings > Single Group

Features:

Multiple header layout options (Left, Centered, Container, Stretch views)
Navigation styles (Default, Icon + Label, Swipe modes)
Show/hide group elements (type, activity, description, organizers, privacy)
Customize group cover images

Bundled plugins (new in 5.1.0)

BuddyX Pro 5.1.0 ships an in-house plugin ecosystem under the same license - every plugin is built and supported by Wbcom Designs alongside the theme. See Bundled Plugins for the full reference. Quick summary of what they replace in the legacy 5.0.x bundle:

5.0.x plugin	5.1.0 replacement	Notes
BuddyPress Reactions Pro	Jetonomy	Richer reaction model + per-trust-level moderation. The legacy plugin still works on a 5.1.0 install but is no longer marketed.
Activity Share Pro	Built into the theme	Share buttons are now a theme-level feature in the Single Post + Activity templates. No separate plugin to install.
(no equivalent)	MediaVerse	Native video upload + hosting + player - no third-party video service needed.
(no equivalent)	WB Gamification	Points, ranks, badges, leaderboards.
(no equivalent)	WP Career Board	Job board + resume management.
(no equivalent)	WP Sell Services	Community service marketplace on WooCommerce.
(no equivalent)	WB Ad Manager	Display ad zones, sponsorship slots, ad rotation.
(no equivalent)	Listora	Directory builder.
(no equivalent)	Learnomy	First-party LMS - courses, lessons, quizzes, certificates.

Third-party plugins that keep working:

Plugin	What stays the same
rtMedia	Styled media galleries, upload button, activity stream media
MediaPress	Gallery layouts, media player styling, activity media list-view toggle in BuddyPress General settings
GamiPress / myCred	Coexist with WB Gamification - track separate points
WP Job Manager	Coexists with WP Career Board - install only one job board path
LearnDash / LifterLMS / Tutor / Sensei / LearnPress	All continue to integrate; Learnomy is opt-in

Additional Pro Features

Feature	Description	Location
Dark Mode	Light/dark theme toggle for visitors	Skin > Color Mode
Advanced Headers	5 header layout styles	Site Header
WP Login Branding	Modern, Classic, Split login themes	WP Login section
Color Presets	Pre-designed color schemes	Skin > Color Presets
Extended Typography	More font customization	Typography panel
Member Profile Layouts	6 profile header styles	BuddyPress > Single Member
Social Links	Add social icons to member profiles	BuddyPress > Single Member

Troubleshooting

Migration Tab Not Showing

Problem: The "BuddyX Free to Pro Upgrade" tab doesn't appear.

Cause: BuddyX free theme settings were not found in the database.

Solutions:

Ensure BuddyX free was previously active on this site
Check that theme_mods_buddyx exists in wp_options table
If you never customized BuddyX free, there's nothing to migrate

Settings Not Transferring

Problem: Some settings didn't migrate correctly.

Solutions:

Clear any caching plugins
Try the migration again (if button is disabled, settings already migrated)
Manually configure the missing settings in Customizer

Button Shows "Disabled"

Problem: The Upgrade button is grayed out and disabled.

Cause: Migration has already been completed for this site.

Note: The migration is designed to run only once to prevent accidentally overwriting your BuddyX Pro customizations.

Colors Look Different

Problem: Colors appear slightly different after migration.

Cause: BuddyX Pro has separate color controls that didn't exist in the free version.

Solution:

Go to Appearance > Customize > Skin
Fine-tune individual color settings
Consider using a Color Preset as a starting point

Post-Migration Checklist

After completing the migration, work through this checklist:

Verify Migrated Settings

Verify site logo appears correctly
Check header layout and menu display
Confirm colors match your original design
Test typography on headings and body text
Review sidebar placements
Check footer content and colors
Test on mobile devices
Verify BuddyPress/BuddyBoss components display correctly
Check WooCommerce pages (if applicable)
Re-add any custom CSS
Update child theme (if using one)

Configure New Pro Features

Sign-in Popup - Enable modal login at Customize > General > Sign-in Popup
Side Panel - Configure slide-out menu at Customize > Side Panel
Dark Mode - Enable light/dark toggle at Customize > Skin > Color Mode
Group Settings - Customize group pages at Customize > Community Settings > Single Group
Member Profiles - Set profile layout at Customize > Community Settings > Single Member
WP Login Branding - Style login page at Customize > WP Login

Plugin Integrations (If Applicable)

Bundled plugins - Install the ones you need (Jetonomy, MediaVerse, WB Gamification, WP Career Board, WP Sell Services) from the BuddyX Pro Plugins dashboard notice. See Bundled Plugins.
rtMedia - Verify media galleries display correctly.
MediaPress - Check activity media settings at Customize > Community Settings > General Setting.
Legacy 5.0.x plugins - If Activity Share Pro / BuddyPress Reactions Pro are still active from the free build, you can keep them or replace with Jetonomy (reactions) + the built-in social-share controls (sharing).

Reverting to BuddyX Free

If you need to go back to the free theme:

Your BuddyX free settings are still stored in the database
Simply activate the BuddyX free theme
Your original settings will be restored
BuddyX Pro settings remain separate and won't be lost

Note: Each theme stores its settings independently, so switching between them won't cause data loss.

Getting Help

If you encounter issues during migration:

Documentation: Check our full documentation
Support: Submit a ticket at wbcomdesigns.com/support
Community: Join our Facebook Group

When contacting support, include:

WordPress version
BuddyX Pro version
Screenshots of the issue
Any error messages displayed

Related Guides:

Installation Guide - Fresh installation instructions
Demo Importer - Import pre-built demos
Quick Start Guide - Get started quickly
Child Theme - Using child themes

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Upgrading from BuddyX Pro 5.0.x to 5.1.x

If your site currently runs BuddyX Pro 5.0.x (any 5.0.0 through 5.0.7), this guide walks you through the safe path to 5.1.x.

The short version: BuddyX Pro 5.1.x is engineered for byte-identical visual continuity. Your customer-saved settings come across automatically. Most sites need 5 minutes of verification + zero manual fixes. This guide explains what to back up, what migrates automatically, what to spot-check, and what to do if anything looks off after the upgrade.

Switching from the free BuddyX theme (not the pro version)? Use Upgrading from BuddyX Free instead - that's a different migration path.

What 5.1.x changed (so you know what to watch for)

5.1.x is the largest single release in BuddyX Pro's history. The biggest changes:

Kirki removed - pre-5.1.0 the theme depended on the Kirki plugin to render the WordPress Customizer. 5.1.0 ships its own in-theme framework. You no longer need the Kirki plugin installed; it's safe to deactivate after upgrade.
Site Skin reorganized - the Customizer's Site Skin panel was redesigned (Phase 3 UX overhaul). Controls grouped by surface (page / box / header / footer / etc.) for easier discovery.
Color tokens system - the color rendering pipeline rewritten to use CSS custom properties (--bx-color-*). One color change now flips every surface that uses that color. Existing customer color choices are preserved.
Dark mode shipped - fully customizable dark palette with light/dark modes. Off by default; opt-in via Customize → Site Skin → Color Mode.
14 color presets + 7 typography presets - one-click palettes and font pairings. Opt-in; existing color/font choices are kept.
7 blog layouts - added Editorial and Minimal layouts; renamed the columns slider from post_per_row to blog_columns. Existing layout choices preserved.
In-theme asset manifest - every conditional CSS file now goes through a single manifest with proper load conditions. Same visual output; cleaner code.
Block-pattern dark coverage - pattern-driven landing pages now flip correctly in dark mode.
Per-page settings meta box - override sidebar / loader / color mode / header / footer per page.
Bundled-plugins ecosystem expanded - the in-house plugin set has grown (see your dashboard's recommended plugins panel for the current list).

None of these require manual customer action on a typical upgrade. The migration handles compatibility.

Before you upgrade - 5-minute backup checklist

Even though the migration is engineered to be safe, always back up before any theme update. Standard hygiene:

Full database backup - most hosts (SiteGround, Cloudways, WP Engine, Kinsta, etc.) have a one-click backup button. Click it before doing anything else.
wp-content/themes/buddyx-pro/ folder backup - if you've made any direct edits to the theme files (not recommended - use a child theme instead), copy the folder so you can restore your edits afterward.
Note your current settings - open the Customizer once and screenshot the panels you remember customizing (Site Identity, Site Skin, Header, Typography). You'll use these to verify nothing visibly changed after the upgrade.
Test on staging if your host has staging - staging is a free safety net: clone your live site to staging, upgrade there first, verify, then upgrade live. Worth the 10 minutes.

If you don't have staging and don't want to back up: you're probably going to be fine, but you're trusting the migration to be perfect. We engineer it to be - but having a backup means you sleep easier.

The upgrade itself

Go to Appearance → Themes in WordPress admin
If BuddyX Pro shows an update available, click Update Now
Wait ~30 seconds while the new version downloads + installs
WordPress shows "Update Successful" - that's it. The theme is now on 5.1.x.

If your site uses a license-management plugin (Envato, WPBakery activator, etc.), check your dashboard's BuddyX Pro license status after upgrade. If you license through wbcomdesigns.com directly, no action needed.

What migrates automatically

The migration runs once on first 5.1.x page load. It handles:

Setting-value shape changes

Pre-5.1.0 some boolean settings stored 'on' / 'off' strings; 5.1.0 stores '1' / '0' for consistency with WordPress core. The migration translates these - your saved values keep their intent ('on' becomes '1', both render as "enabled").

This is the most invisible migration: customers never see the change, but it prevented a class of silent bugs where ! empty('off') was true (so "off" got treated as "on").

Customizer Field framework swap

Pre-5.1.0 controls were rendered by Kirki. 5.1.0 renders them with the in-theme Customizer Framework. The setting IDs are unchanged - your saved values are read by the new framework without translation. Kirki is no longer a dependency; you can deactivate the plugin after upgrade.

Color preset compatibility

5.0.x had its own color-preset system with 12 presets (Default Blue, Fresh Green, Warm Orange, etc.). 5.1.0 ships a new 14-preset library (Default Light, Sapphire, Coral, Carbon, etc.). The migration maps the closest old preset to the closest new preset. If you'd customized colors AFTER picking a preset, those custom colors take precedence over the preset mapping.

Blog layout setting

The Columns control for blog archives was named post_per_row in 5.0.x; 5.1.0 renames it to blog_columns and changes the input type from slider to radio-buttonset. The migration reads the legacy value and writes it to the new setting. Your column choice (1/2/3/4) is preserved.

Site loader default

5.0.x defaulted the site-loader overlay to '2' (truthy → on). 5.1.0 defaults to '0' (off) - a change to MATCH the free theme's behavior and fix a glitch on community pages. Customers who explicitly enabled the loader keep their setting; only customers who never opened the customizer setting see the new default.

Dark mode default

Pre-5.1.0 there was no built-in dark mode (some sites used a child-theme dark-mode hack). 5.1.0 ships native dark mode but defaults it OFF. Your site continues rendering exactly as before unless you go enable it.

What to verify after upgrade - 5 minutes

After the upgrade page reloads, do this quick visual check:

Home page (logged out) - does it look the same as before? Logo, colors, fonts, header layout, footer.
A blog post or page - same check.
The Customizer (Appearance → Customize) - open Site Skin. Your saved colors should still be selected. Open Typography - your saved fonts should still be selected.
A BuddyPress page (if you use BP) - activity stream, member directory, member profile, group. Same look as before.
A WooCommerce page (if you use Woo) - shop archive, single product, cart. Same look.
A LearnDash page (if you use LD) - course archive, single course, lesson. Same look.
Mobile - open your site on your phone or use Chrome DevTools mobile mode. Same responsive behavior.

If anything looks different, see the troubleshooting section below.

Troubleshooting

"My customizer panel is empty / broken"

Cause: Kirki was deactivated mid-migration and a child theme or plugin still depends on it.

Fix: reactivate Kirki temporarily (BuddyX Pro 5.1.x doesn't need it, but if a third-party plugin depends on it, that plugin will fail without it). Then in a separate step, update that third-party plugin to a version that doesn't need Kirki, OR keep Kirki active alongside BuddyX Pro 5.1.x (both can coexist).

"My logo is missing / shrunk"

Cause: logo_size setting changed from wp_head static rendering to live-preview slider in 5.1.0. The slider stored the value differently, and a non-standard legacy value may not have migrated.

Fix: Customize → Site Identity → Logo Size. Drag the slider to the value you want. Publish.

"Colors look slightly different"

Cause: Pre-5.1.0 some defaults were #ef5455, #111111, etc. 5.1.0 ships a slightly different baseline (#ee4036, #003049). Sites that explicitly customized colors are unaffected - your saved values still apply.

If your site relied on the old defaults (i.e. you never customized colors but liked the old baseline), pick a Color Preset like "Default Light" to get a coordinated palette, or set the old hexes manually in Customize → Site Skin.

"The site loader stopped showing"

Cause: 5.1.0 defaults site_loader to '0' (off) to match the free theme's behavior. Only fresh installs see the new default - but if your customer never opened the customizer setting, the new default kicks in.

Fix: Customize → General → Site Loader → Show Site Loader → On. Publish.

"Dark mode toggle is gone / appearing somewhere new"

Cause: pre-5.1.0 dark mode (if you had a child-theme hack) used different markup. 5.1.0 ships native dark mode with a different toggle UI + position settings.

Fix: Customize → Site Skin → Color Mode. Pick Light or Dark. If you want the toggle, turn on "Show color-mode toggle" and pick a position. See Dark Mode for the full reference.

"A specific BuddyPress / WooCommerce / LearnDash page looks broken"

Cause: rare. Usually a third-party plugin update needs to align with 5.1.x.

Fix:

Update all your plugins to their latest versions (Plugins → Installed Plugins → bulk-update)
Clear any page caches (WP Rocket, W3 Total Cache, Cloudflare, etc.)
Hard-reload the page (Cmd+Shift+R / Ctrl+F5)
If still broken, email support@wbcomdesigns.com with: the page URL, a screenshot, and what plugins are active

"Migration didn't seem to run / settings are blank"

Cause: extremely rare; would indicate a database write failure or a plugin conflict blocking the migration hook.

Fix:

Deactivate ALL plugins except WordPress core
Visit any page on the site (front-end or admin) - this triggers the migration if it hasn't run
Check Customizer → Site Identity. If your saved logo / title is back, migration ran successfully.
Reactivate plugins one by one to find the conflict
If the migration still hasn't run, email support@wbcomdesigns.com - we'll help you trigger it manually

What if I need to roll back?

If something is critically wrong and you can't wait for a fix:

Download the latest 5.0.x release from your customer account at wbcomdesigns.com
In WordPress admin: Appearance → Themes → BuddyX Pro → Theme Details → Delete (only after switching to a different theme temporarily)
Re-upload the 5.0.x ZIP via Appearance → Themes → Add New → Upload Theme
Activate

Your customizer settings are preserved across the rollback - theme_mods_buddyxpro persists in the database regardless of which version of the theme is active. Setting IDs that 5.1.0 added (dark_*, site_color_mode, etc.) are simply ignored by 5.0.x.

Roll back only as a temporary measure. Email support@wbcomdesigns.com to tell us what broke so we can fix it; you'll want to come back to 5.1.x for security + feature updates.

After a successful upgrade

Once you've verified the upgrade went smoothly, consider:

Explore the new features - Dark Mode, Color Presets, Typography Presets, Per-page Settings
Deactivate Kirki (if you had it installed only for BuddyX) - no longer needed
Check for available updates to the bundled-plugins ecosystem (Jetonomy, MediaVerse, WP Gamification, WP Career Board, WP Sell Services, plus Listora and Learnomy when they ship) - your BuddyX Pro license covers these
Read the changelog at readme.txt for the full list of changes

Need help with an upgrade? We're happy to help - drop us a line at support@wbcomdesigns.com and include your site URL + a description of what looks off.

Site Identity & Branding

Logo, favicon, and site identity options.

Logo & Favicon Options

BuddyX Pro provides comprehensive logo customization options to help you establish your brand identity. Configure primary logos, dark mode alternatives, mobile versions, and site icons (favicons) to create a cohesive visual experience across all devices and color schemes.

Logo and favicon configuration in Site Identity

Accessing Logo Settings

Go to Appearance > Customize in your WordPress admin
Click on Site Identity in the customizer panel
Logo options appear after the site title and tagline settings

What You Can Do

BuddyX Pro's logo system gives you complete control over your branding:

Upload and configure your primary logo
Adjust logo size for optimal display (150-300px)
Set a separate dark mode logo that appears automatically when dark mode is active
Upload a mobile-specific logo for better display on small screens
Configure your site icon (favicon) for browser tabs and bookmarks
Use different logo formats (SVG, PNG, JPG) based on your needs
Optimize logos for retina/high-DPI displays

Primary Logo Settings

Logo Upload

Upload your main logo that appears in the header across your website.

Setting	Description	Default
Logo	Primary logo image file	None
Supported Formats	PNG, SVG, JPG, WebP	-
Upload Location	Site Identity > Logo	-

How to Upload:

Click Select Logo button
Choose Upload Files or select from Media Library
Click Select to apply the logo
Use Skip Cropping to maintain original dimensions

Logo Size Control

Adjust your logo's display width on desktop screens.

Setting	Description	Default
Logo Size	Desktop logo width	150px
Minimum	Smallest allowed width	150px
Maximum	Largest allowed width	300px
Adjustment	1px increments via slider	-

Live preview (5.1.0+): Dragging the Logo Size slider updates the logo in the Customizer preview iframe immediately - no Publish + refresh round-trip required. The setting writes through postMessage and the Customizer Framework injects the new CSS rule live.

Sizing Best Practices:

Start at 150px and adjust upward for visibility
Consider your logo's aspect ratio when sizing
Test at different screen sizes to ensure clarity
Balance logo size with available header space
Larger sizes work better for text-based logos

Example Sizes by Use Case:

Logo Type	Recommended Size	Notes
Icon/Symbol	150-180px	Simple marks need less space
Text Logo	180-220px	Ensure text readability
Combination Mark	200-250px	Balance icon and text
Wide Horizontal	250-300px	Use max space available

Dark Mode Logo

When dark mode is enabled, BuddyX Pro automatically switches to an alternate logo optimized for dark backgrounds.

Setting	Description	Location
Dark Mode Logo	Alternate logo for dark theme	Site Identity (below primary logo)
Automatic Switching	Changes based on user's color mode	Automatic
Same Size Setting	Uses primary Logo Size setting	-

When to Use Dark Mode Logo:

Your primary logo has dark text that's invisible on dark backgrounds
Your logo uses colors that clash with dark mode color scheme
You want brand consistency across both light and dark themes
Your logo includes shadows or effects designed for light backgrounds

Design Tips for Dark Mode Logos:

Use light or white text instead of dark
Increase contrast between logo elements
Consider simplified versions with better visibility
Test against actual dark mode background colors
Maintain brand recognition despite color changes

Common Approaches:

Inverted Colors: Swap dark text for light text
Outlined Version: Use outline logo on dark backgrounds
Alternative Colorway: Brand-approved dark theme colors
Simplified Mark: Simpler version optimized for dark

Site Icon (Favicon)

The site icon appears in browser tabs, bookmarks, mobile home screens, and various browser interfaces.

Setting	Description	Requirements
Site Icon	Square favicon image	512x512px minimum
Format	PNG recommended	Must be square
Location	Site Identity > Site Icon	WordPress native

Site Icon Requirements:

Dimensions: Exactly square (1:1 aspect ratio)
Minimum Size: 512 x 512 pixels
Recommended Format: PNG with transparency
Design: Simple, recognizable at small sizes
File Size: Under 100KB for fast loading

Where Your Site Icon Appears:

Location	Size Displayed	Notes
Browser Tabs	16x16 or 32x32px	Tiny, needs to be simple
Bookmark Bars	16x16px	Same as tabs
Mobile Home Screen	180x180px	iOS web clips
Windows Taskbar	32x32px	Pinned sites
Android Home	192x192px	Add to home screen
RSS Feed Readers	64x64px	Feed icons
Search Suggestions	Varies	Browser-dependent

Design Best Practices:

Keep It Simple: Should work at 16x16px
High Contrast: Clear against browser backgrounds
Brand Recognition: Use primary brand element
No Text: Text becomes illegible at small sizes
Center Focus: Important elements in center
Test at Scale: View at actual browser tab size

Recommended Logo Sizes by Use Case

Business Website

Primary Logo:

Desktop Width: 180-200px
Original File: 400px wide (2x for retina)
Format: PNG with transparency or SVG
Aspect Ratio: 3:1 horizontal

Dark Mode Logo:

Same dimensions as primary
Light text on transparent background

Site Icon:

512x512px PNG
Simple icon or letter mark

Community Platform

Primary Logo:

Desktop Width: 200-220px
Original File: 500px wide
Format: SVG preferred (scales perfectly)
Aspect Ratio: 4:1 or wider

Dark Mode Logo:

Essential for community sites with dark mode toggle

Site Icon:

Community symbol or first letter
512x512px with good contrast

E-Commerce Site

Primary Logo:

Desktop Width: 150-180px (leaves space for cart icon)
Original File: 400px wide
Format: PNG or SVG
Aspect Ratio: 2.5:1

Dark Mode Logo:

Optional, unless using dark theme

Mobile Logo:

Recommended: Square icon version
Saves mobile header space

Site Icon:

Store symbol or brand mark
High recognition factor

Portfolio/Creative Site

Primary Logo:

Desktop Width: 220-280px (bold presence)
Original File: 600px wide
Format: SVG for crisp display
Aspect Ratio: Flexible based on design

Dark Mode Logo:

Highly recommended for creative sites

Site Icon:

Creative mark or monogram
Reflects portfolio style

Learning/Course Platform

Primary Logo:

Desktop Width: 200-240px
Original File: 500px wide
Format: SVG or PNG
Aspect Ratio: 3:1 to 4:1

Dark Mode Logo:

Important for course reading modes

Site Icon:

Educational symbol (book, graduation cap, etc.)
Simple, professional design

File Format Recommendations

SVG (Scalable Vector Graphics)

Best For:

Text-based logos
Simple icon logos
Geometric designs
Logos needing perfect scaling

Advantages:

Infinite scaling without quality loss
Small file size
Crisp on all displays
No retina version needed

Considerations:

Not suitable for photographic logos
Complex SVGs can impact performance
Ensure browser compatibility

PNG (Portable Network Graphics)

Best For:

Logos with transparency
Complex designs with gradients
Photographic elements
Retina display optimization

Advantages:

Lossless compression
Transparency support
Wide browser support
Predictable rendering

Considerations:

Larger file size than SVG
Requires 2x version for retina
Can appear blurry if scaled up

Optimization Tips:

Export at 2x size (e.g., 400px for 200px display)
Use PNG-8 for simple logos (smaller file)
Use PNG-24 for complex logos
Optimize with tools like TinyPNG

JPG (JPEG)

Best For:

Photographic logos
Complex color gradients
Backgrounds within logos

Advantages:

Small file sizes
Good for photographs
Universal support

Considerations:

No transparency support
Lossy compression
Not ideal for text or sharp edges

When to Use:

Logo includes photograph
White or solid background is acceptable
File size is critical concern

WebP

Best For:

Modern websites prioritizing performance
Logos with transparency
High-quality with small file size

Advantages:

Superior compression
Supports transparency
Better quality-to-size ratio

Considerations:

Newer format, not universally supported
Provide PNG fallback
Check theme support

Logo Optimization Tips

File Size Optimization

Keep logo files under these sizes for optimal performance:

Format	Target Size	Maximum Size
SVG	Under 10KB	50KB
PNG	Under 50KB	150KB
JPG	Under 30KB	100KB
WebP	Under 30KB	80KB

Tools for Optimization:

TinyPNG/TinyJPG: Compress PNG and JPG files
SVGOMG: Optimize SVG files
Squoosh: Google's image compression tool
ImageOptim: Mac application for all formats
ShortPixel: WordPress plugin for automatic optimization

Retina/High-DPI Displays

Modern devices have high-resolution displays requiring sharper images.

Approach 1: 2x Image Export

Design logo at actual display size (e.g., 200px)
Export at 2x size (400px)
Upload the 400px version
WordPress/theme scales it down to 200px
Result: Crisp on retina displays

Approach 2: SVG Format

Use SVG for vector logos
Automatically crisp at any size
No need for multiple versions
Best for text and geometric logos

Testing Retina Quality:

View on actual retina device (MacBook, iPhone, etc.)
Zoom browser to 200% on desktop
Check for pixelation or blur
Compare against vector version

Transparent Backgrounds

When to Use Transparency:

Logo needs to work on any background color
Header has image or gradient background
Logo overlays header image
Supporting dark mode with one logo file

Formats Supporting Transparency:

PNG (most common)
SVG (vector transparency)
WebP (modern option)

Exporting with Transparency:

Remove background layer in design software
Export as PNG-24 or SVG
Verify transparency in image viewer
Test against different background colors

Common Transparency Issues:

White "halo" around edges (export at higher resolution)
Semi-transparent elements appearing different (check alpha channels)
Background showing through thin strokes (increase stroke weight)

Logo Positioning & Spacing

While logo upload happens in Site Identity, logo positioning is controlled by Header Layout settings.

Header Layout	Logo Position	Best Logo Type
Layout 1	Left aligned	Horizontal logos
Layout 2	Centered	Balanced logos
Layout 3	Left (above menu)	Horizontal or tall
Layout 4	Centered (above menu)	Any aspect ratio

Related Setting: Appearance > Customize > Site Header

Visual Spacing Considerations

Although padding/margins aren't directly configurable in the customizer, logo spacing is built into each layout:

Automatic Spacing:

Logo has built-in padding from header edges
Spacing adjusts based on logo size setting
Mobile breakpoints automatically adjust spacing
Sticky header may reduce spacing when scrolling

Custom Spacing (Advanced):

If you need custom logo spacing, use Additional CSS:

/* Adjust logo top/bottom spacing */
.site-branding .custom-logo-link {
    padding: 20px 0;
}

/* Adjust logo left spacing */
.site-branding {
    padding-left: 30px;
}

/* Mobile logo spacing */
@media (max-width: 768px) {
    .site-branding .custom-logo-link {
        padding: 10px 0;
    }
}

Text Logo Fallback

If no logo image is uploaded, BuddyX Pro displays your site title as a text logo.

Text Logo Display

Condition	Display
No logo uploaded	Site Title as text
Logo uploaded	Logo image
Logo + "Display Site Title" ON	Both show

Text Logo Styling:

Controlled by Typography settings:

Font family: Customizer > Typography > Site Title
Font size: Automatic based on theme
Font color: Customizer > Colors
Font weight: Typography settings

When Text Logo Works Well:

Clean, modern designs
Typography-focused branding
Startup/bootstrap phase before logo design
Minimalist aesthetic

Common Questions

Q: What's the best logo format?

A: SVG for vector logos (text, geometric), PNG for complex logos with transparency. SVG scales perfectly and loads fast. PNG works everywhere and supports detailed designs.

Q: Why does my logo look blurry?

A: You're likely uploading a file that's too small for the display size. Upload at 2x the desired display width (e.g., 400px file for 200px display), or use SVG format.

Q: How do I add a mobile-specific logo?

A: BuddyX Pro currently uses the same logo on mobile but scales it appropriately. For a custom mobile logo, you would need custom code or a child theme. The logo automatically responds to mobile screen sizes.

Q: Can I have different logos for different pages?

A: The customizer sets a site-wide logo. For page-specific logos, you'd need custom code using conditional logic in a child theme's header.php.

Q: Does the logo link to the homepage?

A: Yes, clicking the logo always returns users to your site's homepage. This is standard web convention and improves navigation.

Q: How large should my original logo file be?

A: For PNG: 2x your desired display size (e.g., 400-600px wide). For SVG: design at actual size, it scales automatically. For retina displays, always export at 2x.

Q: Will a large logo file slow down my site?

A: Yes, if not optimized. Keep logos under 100KB. Use compression tools like TinyPNG. Consider SVG for smallest file sizes. Optimize all images before uploading.

Q: How do I create a dark mode logo?

A: Design the same logo with inverted colors (light on transparent). If your primary logo has black text, make the dark mode version with white text. Upload both in Site Identity.

Q: Why isn't my dark mode logo showing?

A: Check three things: 1) Dark mode is enabled in Customizer > Skin Settings, 2) Dark mode logo is actually uploaded, 3) Clear browser and plugin caches.

Q: What's the difference between logo and site icon?

A: Logo appears in your header and is typically horizontal/rectangular. Site icon (favicon) is the tiny square icon in browser tabs, must be 512x512px, and appears in bookmarks.

Q: Can I use a full-width logo?

A: Logo width is controlled by the Logo Size slider (150-300px maximum). For full-width branding, consider using the Sub-Header or a custom header image instead.

Q: How do I center my logo?

A: Logo position is determined by Header Layout. Choose Layout 2 or Layout 4 in Customize > Site Header for centered logo display.

Q: Does the logo automatically resize on mobile?

A: Yes, logos automatically scale down on mobile devices to fit smaller screens while maintaining aspect ratio. The theme handles responsive sizing.

Q: Why does my logo have a white box around it?

A: Your logo file has a white background instead of transparency. Re-export your logo as PNG-24 with a transparent background, or use SVG format.

Q: Can I use animated logos?

A: Animated GIFs work as logos, but they can't be resized well and increase page load time. SVG animations are possible but require custom code. Static logos are recommended for performance.

Recommended Logo Dimensions by Aspect Ratio

Square Logos (1:1)

Display Size: 150-180px Upload Size: 360px x 360px (2x) Best For: Icon-based brands, app-style logos

Horizontal Logos (3:1)

Display Size: 240px wide x 80px tall Upload Size: 480px x 160px (2x) Best For: Text-heavy logos, wide wordmarks

Balanced Logos (2:1)

Display Size: 200px wide x 100px tall Upload Size: 400px x 200px (2x) Best For: Combination marks, balanced text and icon

Wide Logos (4:1 or wider)

Display Size: 300px wide x 75px tall (maximum width) Upload Size: 600px x 150px (2x) Best For: Long company names, tagline inclusion

Tall Logos (1:2)

Display Size: 150px wide x 300px tall Upload Size: 300px x 600px (2x) Best For: Stacked text, vertical marks Note: Works best with Layout 3 or 4

Troubleshooting

Logo Not Appearing After Upload

Problem: Logo doesn't display after uploading and selecting.

Solutions:

Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
Click Publish in customizer to save changes
Check file format is supported (PNG, SVG, JPG, WebP)
Verify file uploaded successfully to Media Library
Disable caching plugins temporarily
Try uploading a different logo file to isolate issue
Check browser console for JavaScript errors
Verify file permissions on wp-content/uploads folder

Logo Appears Stretched or Distorted

Problem: Logo doesn't maintain correct proportions.

Solutions:

Re-upload with correct aspect ratio from design software
Don't use WordPress crop tool - skip cropping
Check original file isn't already distorted
Verify Logo Size setting isn't forcing unusual dimensions
Try SVG format which preserves aspect ratio
Clear browser cache after re-uploading
Inspect with browser dev tools for conflicting CSS

Logo Too Large on Mobile

Problem: Logo takes up too much space on mobile screens.

Solutions:

Theme automatically scales logos on mobile
Reduce desktop Logo Size setting (affects mobile too)
Clear mobile browser cache to see changes
Check for custom CSS forcing desktop sizes on mobile
Consider adding mobile-specific logo via child theme
Test on actual device, not just browser resize

Dark Mode Logo Not Switching

Problem: Same logo appears in both light and dark modes.

Solutions:

Verify dark mode is enabled: Customizer > Skin Settings
Check Dark Mode Logo is actually uploaded and published
Clear all caches (browser, WordPress, plugin caches)
Test in incognito/private browsing window
Verify you're actually in dark mode (check color scheme)
Check for JavaScript errors preventing mode switch
Disable theme-related plugins to test for conflicts

Logo Quality Poor on Retina Displays

Problem: Logo looks pixelated on high-resolution screens.

Solutions:

Upload logo at 2x the display size (e.g., 400px for 200px display)
Use SVG format for infinite scaling
Export PNG at higher resolution with quality set to maximum
Don't scale up a small logo - create larger source file
Test on actual retina device (MacBook, iPhone, iPad)
Check Logo Size setting isn't enlarging a small file
Use PNG-24 instead of PNG-8 for better quality

Site Icon Not Showing in Browser Tab

Problem: Favicon doesn't appear after uploading.

Solutions:

Ensure image is exactly square (512x512px minimum)
Use PNG format, not JPG
Clear browser cache (may take several refreshes)
Close and reopen browser completely
Wait up to 24 hours for browser to fetch new favicon
Force refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
Check browser bookmark bar - may update there first
Test in different browser to rule out caching
Verify file uploaded to Site Icon, not Logo field

Logo Overlapping Header Elements

Problem: Logo covers menu items or icons.

Solutions:

Reduce Logo Size setting
Change Header Layout to one with more space
Reduce number of menu items in primary navigation
Hide some header icons if not essential
Consider Header Layout 3 or 4 (logo above menu)
Check for custom CSS forcing logo width
Test at different screen sizes to find breakpoint

White Background Behind Transparent Logo

Problem: Logo shows white box despite transparent PNG.

Solutions:

Re-export logo with transparency enabled
Save as PNG-24, not PNG-8 or JPG
Remove white background layer in design software
Check for CSS adding background-color to logo
Verify transparency in image viewer before uploading
Try SVG format which better preserves transparency
Check "Additional CSS" for conflicting styles

Integration with Other Settings

Logo settings work with several other theme features:

Header Options

Header Layout: Controls logo position (left, center, above menu)
Sticky Header: Logo appears in fixed header when scrolling
Header Background: Logo must contrast with background color/image

Location: Customize > Site Header

Skin & Color Settings

Dark Mode: Triggers automatic switch to dark mode logo
Color Scheme: Logo should work with selected color palette
Accent Colors: Consider logo colors when choosing accents

Location: Customizer > Skin Settings

Typography

Site Title Font: Used for text logo fallback
Heading Fonts: Should complement logo typography
Font Pairing: Logo font should work with site fonts

Location: Customizer > Typography

Mobile Breakpoints: Logo automatically scales at mobile sizes
Mobile Menu: Logo appears with hamburger menu icon
Touch Targets: Logo link sized for touch interaction

Location: Automatic responsive behavior

Site Identity Settings - Site title, tagline, and basic branding
Header Layout Styles - Logo positioning and header designs
Dark Mode Configuration - Setting up dark mode with alternate logos
Mobile Header Options - Mobile-specific header behavior
Sticky Header - Logo display in fixed header
Typography Settings - Font styling for text logos

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com
Community Forums: BuddyX Support

Site Identity Settings

The Site Identity panel in the WordPress Customizer allows you to configure your website's core branding elements including the site title, tagline, logo, and site icon (favicon).

Site Identity Typography Site title typography settings in the Customizer

Accessing Site Identity Settings

Go to Appearance > Customize in your WordPress admin
Click on Site Identity in the customizer panel

Available Settings

Site Title

The site title appears in browser tabs, search results, and can be displayed in your header. It is a standard WordPress Site Identity field.

Setting	Setting ID	Description
Site Title	`blogname`	Your website's name (e.g., "My Community Site")

Best Practices:

Keep your site title concise (under 60 characters)
Use your brand name or a descriptive title
Consider SEO implications for search visibility

Tagline

The tagline is a short description of your website's purpose. It is a standard WordPress Site Identity field.

Setting	Setting ID	Description
Tagline	`blogdescription`	A brief description of your site

Best Practices:

Keep taglines under 120 characters
Describe what makes your site unique
Include relevant keywords naturally

Logo

BuddyX Pro adds a Logo Size control to the standard WordPress logo field.

Setting	Setting ID	Description	Default
Logo	`custom_logo`	Upload your primary logo image	None
Logo Size	`logo_size`	Adjust desktop logo width (150-300px)	150px

Logo Size Adjustment:

The Logo Size slider allows you to control the desktop display width:

Minimum: 150px
Maximum: 300px
Step: 1px increments

Supported Formats:

PNG (recommended for logos with transparency)
SVG (vector format, scales without quality loss)
JPG (for photographic logos)
WebP (modern format with good compression)

Recommended Dimensions:

Standard logo: 300px x 100px (max)
For crisp high-DPI display, upload at 2x the intended display size, or use SVG
File size: Under 100KB for optimal loading

Dark Mode Logo

When dark mode is active, BuddyX Pro can display an alternate logo optimized for dark backgrounds. This is a single image field (there is no separate retina field - upload a 2x image or an SVG if you need high-DPI sharpness). It reuses the same Logo Size value as the primary logo.

Setting	Setting ID	Description	Default
Dark Mode Logo	`dark_mode_logo`	Alternate logo shown when dark mode is active	None

When to Use:

Your primary logo has dark text that's invisible on dark backgrounds
You want brand consistency across color schemes
Your logo uses colors that clash with dark mode

BuddyX Pro uses the same logo across screen sizes - there is no separate mobile logo field. The logo scales down responsively on smaller screens. A distinct mobile logo would require custom code in a child theme.

Site Icon (Favicon)

The site icon appears in browser tabs, bookmarks, and mobile home screens.

Setting	Description
Site Icon	Square image for browser tabs
Recommended Size	512 x 512 pixels

Requirements:

Must be square (1:1 aspect ratio)
Minimum 512 x 512 pixels
PNG format recommended
Simple, recognizable design

Where It Appears:

Browser tabs
Bookmark bars
Mobile home screen (when saved)
Windows taskbar pins
RSS feed readers

Site Title and Tagline Typography

The Site Identity fields above set the text of your title and tagline. To style how that text looks (font, size, weight, spacing, alignment), BuddyX Pro gives you two dedicated typography controls in the Typography panel.

Go to Appearance > Customize
Click on Typography
Select Site Title Typography

Site Title Settings

Controls the typography of the site title link in the header (the .site-title element).

Option	Description	Default
Font Family	Google Font or system font for the title	Theme baseline
Font Weight	Thickness of the title text	600 (Semi Bold)
Font Size	Size of the title text	38px
Line Height	Space between lines	1.2
Letter Spacing	Space between characters	0
Text Transform	Case style (none, uppercase, lowercase, capitalize)	none
Text Align	Horizontal alignment (left, center, right)	left
Text Decoration	Additional styling (none, underline)	none

Site Tagline Settings

Controls the typography of the tagline / site description (the .site-description element).

Option	Description	Default
Font Family	Google Font or system font for the tagline	Theme baseline
Font Weight	Thickness of the tagline text	Regular (400)
Font Size	Size of the tagline text	14px
Line Height	Space between lines	1.4
Letter Spacing	Space between characters	0
Text Transform	Case style	none
Text Align	Horizontal alignment	left
Text Decoration	Additional styling	none

Tip: Set font sizes in pixels (px) for predictable results. The title and tagline typography controls are independent of the Logo settings above - if you display a logo image instead of text, these settings still apply whenever the text title or tagline is shown.

Configuration Examples

Example 1: Standard Business Site

Site Title: "Acme Community"
Tagline: "Connect, Learn, and Grow Together"
Logo: acme-logo.webp (280px wide)
Site Icon: acme-icon.webp (512x512)

Example 2: Community Platform

Site Title: "Developer Network"
Tagline: "Where developers connect and collaborate"
Logo: devnet-logo.svg
Dark Mode Logo: devnet-logo-light.svg

Example 3: Learning Platform

Site Title: "LearnHub Academy"
Tagline: "Online courses for professionals"
Logo: learnhub-logo.webp
Logo Size: 200px
Site Icon: learnhub-favicon.webp

Troubleshooting

Logo Not Displaying

Problem: Logo doesn't appear after upload.

Solutions:

Clear browser cache and refresh
Check file permissions on uploads folder
Verify image format is supported
Check for CSS conflicts with caching plugins

Logo Appears Blurry

Problem: Logo looks pixelated on high-resolution displays.

Solutions:

Upload a larger source image (at least 2x desired display size)
Use SVG format for vector logos
Enable and upload a retina version
Check the Logo Size setting isn't scaling up a small image

Dark Mode Logo Not Switching

Problem: Same logo shows in both light and dark mode.

Solutions:

Verify Dark Mode Logo is uploaded
Check dark mode is enabled in Skin settings
Clear any caching plugins
Test in incognito/private browser window

Site Icon Not Showing

Problem: Favicon doesn't appear in browser tabs.

Solutions:

Ensure image is exactly square
Upload at least 512x512 pixels
Use PNG format
Clear browser cache (Ctrl+F5 / Cmd+Shift+R)
Wait for browser to fetch new favicon

Integration with Other Settings

Site Identity settings work in conjunction with:

Site Header - Logo placement and menu layout
Site Skin - Dark mode logo switching
Mobile Header - The logo scales down responsively below the hamburger breakpoint
Typography - Site title font styling

Logo & Favicon Options - Advanced logo configuration
Header Layout Styles - Header design options
Dark Mode - Dark color scheme settings

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

General Settings

Site layout, loader, page mapping, scroll-to-top, and other global controls.

Page Mapping

Page Mapping lets you redirect users to custom pages for important site functions like login, registration, and 404 errors. Instead of WordPress defaults, you can create branded, customized pages for these experiences.

Page Mapping Settings Page mapping configuration for login, registration, and 404 pages

What You Can Do

With BuddyX Pro's page mapping feature, you can:

Redirect login to a custom page with your branding
Send new users to a custom registration page
Create a helpful 404 error page with navigation
Use page builders (Elementor, etc.) for these pages
Control the exact user experience for these key moments
Integrate forms from plugins (WPForms, Contact Form 7, etc.)

Why Use Page Mapping?

Default WordPress Pages:

Basic, unstyled forms
Limited customization options
No branding or design control
Generic error messages

Custom Mapped Pages:

Full design freedom
Match your brand identity
Add helpful content and CTAs
Use page builders
Include videos, images, testimonials
Track conversions with analytics

Available Page Mappings

Redirect users to a custom login page instead of the default wp-login.php.

Location: Appearance > Customize > General > Page Mapping

Steps:

First, create your custom login page:
- Go to Pages > Add New
- Title it "Login" or "Sign In"
- Add a login form using:
  - BuddyPress login widget
  - WPForms user login form
  - Ultimate Member shortcode
  - Custom login shortcode
- Design the page to match your brand
- Publish the page
Then map the page:
- Go to Appearance > Customize
- Click General > Page Mapping
- Find Login Page dropdown
- Select your custom login page
- Click Publish

Now when users try to access wp-login.php or click login links, they'll be redirected to your custom page.

Common Login Forms:

Plugin/Feature	Shortcode
BuddyPress	Use Login widget or `[bp-login]`
WPForms	`[wpforms id="123"]` (User Login form)
Ultimate Member	`[ultimatemember form_id="123"]`
Custom HTML	Build your own form with styling

Registration Page

Redirect new users to a custom registration page instead of default WordPress registration.

Steps:

Create your registration page:
- Go to Pages > Add New
- Title it "Register" or "Sign Up"
- Add registration form using:
  - BuddyPress registration (if enabled)
  - WPForms user registration form
  - Ultimate Member registration
  - Custom registration form
- Add welcome message, benefits, testimonials
- Publish the page
Map the registration page:
- Go to Appearance > Customize
- Click General > Page Mapping
- Find Registration Page dropdown
- Select your custom registration page
- Click Publish

Registration Form Options:

Feature	How to Add
BuddyPress	Enable registration in Settings > BuddyPress > Settings
WPForms	Create User Registration form with email confirmation
Ultimate Member	Use UM registration form
Gravity Forms	User Registration add-on

404 Error Page

Create a helpful 404 page instead of the default "Page Not Found" message.

Steps:

Create your 404 page:
- Go to Pages > Add New
- Title it "404 - Page Not Found" (or similar)
- Add helpful content:
  - Friendly error message
  - Search bar
  - Popular pages links
  - Categories/tags navigation
  - Contact information
  - "Back to Home" button
- Publish the page
Map the 404 page:
- Go to Appearance > Customize
- Click General > Page Mapping
- Find 404 dropdown
- Select your custom 404 page
- Click Publish

Helpful 404 Page Elements:

┌──────────────────────────────────────┐
│  [Logo]                              │
│                                      │
│       Oops! Page Not Found           │
│                                      │
│  The page you're looking for         │
│  doesn't exist or has been moved.    │
│                                      │
│  [Search Box]                        │
│                                      │
│  Popular Pages:                      │
│  • Home                              │
│  • Shop                              │
│  • Blog                              │
│  • Contact                           │
│                                      │
│  [Back to Home Button]               │
└──────────────────────────────────────┘

Custom Page Setup Examples

Using Elementor:

Create new page: "Login"
Edit with Elementor
Add sections:
- Hero section with welcome message
- Login form widget (BuddyPress/WPForms)
- Benefits section
- Footer with "Need an account?" link
Style to match brand colors
Publish and map in Customizer

Layout:

┌─────────────────────────────────────┐
│       Welcome Back!                 │
│   Sign in to your account           │
│                                     │
│  [Email field]                      │
│  [Password field]                   │
│  ☑ Remember me    Forgot password? │
│                                     │
│  [Sign In Button]                   │
│                                     │
│  Don't have an account? Register    │
└─────────────────────────────────────┘

Content Structure:

Hero Section
- "Join Our Community"
- Brief value proposition
Registration Form
- Email, username, password fields
- Profile photo upload (BuddyPress)
- Terms acceptance checkbox
Benefits Section
- Member testimonials
- Feature highlights
- Trust badges
FAQ Section
- "Is registration free?" → Yes!
- "How long does it take?" → Under 2 minutes
- "What happens next?" → Welcome email + tour

404 Page with Personality

Content Ideas:

┌─────────────────────────────────────┐
│         🔍                          │
│                                     │
│    404 - Lost in Cyberspace?        │
│                                     │
│  This page went on vacation without │
│  telling us. Try these instead:     │
│                                     │
│  📌 Search our site:                │
│  [Search Box]                       │
│                                     │
│  🏠 Go to Homepage                  │
│  🛒 Browse Shop                     │
│  📰 Read Blog                       │
│  📧 Contact Us                      │
│                                     │
│  Need help? Live chat is available! │
└─────────────────────────────────────┘

Working with BuddyPress

If you have BuddyPress active, consider these approaches:

BuddyPress Has Built-In Pages

BuddyPress automatically creates:

Member registration page
Activation page
Profile pages
Activity page

When to Use Page Mapping with BuddyPress:

Scenario	Recommendation
Custom login form	Map login to custom page with BuddyPress login widget
Enhanced registration	Keep BP registration, style with customizer
Custom 404	Always beneficial to map custom 404
Landing page style	Map registration to full landing page

BuddyX Pro has a Sign-in Popup feature separate from page mapping:

Sign-in Popup Settings Sign-in popup customizer settings for modal login/registration experience

Sign-in Popup Login Result Sign-in popup modal appearance on frontend

Location: Appearance > Customize > General > Sign-in Popup

This creates a modal popup for login/registration rather than redirecting to a page. Use either:

Sign-in Popup for modal experience
Page Mapping for full-page experience

Don't use both for the same purpose.

Recommended Setups by Site Type

E-Commerce Store

Login Page: Yes (custom with WooCommerce account benefits)
Registration Page: Yes (landing page style with discounts offer)
404 Page: Yes (with product search and popular categories)

Why: Capture leads during registration; help lost shoppers find products on 404.

Community Platform

Login Page: Optional (use BuddyPress popup instead)
Registration Page: Yes (showcase community benefits)
404 Page: Yes (suggest popular groups and activity)

Why: Registration needs strong value prop; 404 can reconnect users to community.

Blog / Magazine

Login Page: Optional (only if you have subscriber accounts)
Registration Page: Optional (for newsletter signup)
404 Page: Yes (search + popular posts)

Why: Blogs don't always need custom login; great 404 improves navigation.

Corporate Website

Login Page: Yes (professional branded page for employee/client login)
Registration Page: Yes (if offering client portal)
404 Page: Yes (professional with contact options)

Why: Maintain brand consistency; help visitors find information even on errors.

Membership Site

Login Page: Yes (upsell features and benefits)
Registration Page: Yes (landing page with pricing tiers)
404 Page: Yes (guide to member resources)

Why: Every touchpoint is a conversion opportunity; help members navigate.

Educational Platform

Login Page: Yes (student login with course previews)
Registration Page: Yes (showcase courses and instructors)
404 Page: Yes (course search and support links)

Why: Encourage enrollment; help students find courses on 404.

Testing Your Mapped Pages

After mapping pages, test thoroughly:

Test	How to Check
Login redirect	Visit `yoursite.com/wp-login.php`
Logout redirect	Log out and see where you land
Registration works	Try registering a test account
404 displays	Visit `yoursite.com/fake-page-xyz`
Forms function	Submit all forms to verify they work
Mobile responsive	Test on phone and tablet

Troubleshooting

Cause: Login page requires login to view.

Solution: Make sure your custom login page is set to Public and doesn't require authentication.

Registration Form Not Submitting

Cause: Form plugin conflict or missing shortcode.

Solution:

Verify form shortcode is correct
Check form plugin is active
Test form on a regular page first
Check browser console for JavaScript errors

404 Page Shows Default Template

Cause: Mapping not saved or cache issue.

Solution:

Re-save Customizer settings
Clear all caches (plugin, browser, CDN)
Check if page is published (not draft)

Cause: No published pages available.

Solution: Create and publish at least one page before trying to map it.

Security Considerations

Best Practice	Why
Use CAPTCHA	Prevent spam registrations
Enable SSL (HTTPS)	Protect login credentials
Strong password requirements	Improve account security
Email verification	Confirm real email addresses
Rate limiting	Prevent brute force attacks

Recommended Security Plugins:

Wordfence
iThemes Security
All In One WP Security

Advanced Customization

Control where users go after successful login:

Location: Appearance > Customize > General > Sign-in Popup

Options:

Current page
Profile page
Activity page
Custom URL

Change wp-login.php to a custom URL for security:

Use a plugin like:

WPS Hide Login
Perfmatters
iThemes Security

Then map your custom slug to your custom page.

Common Questions

Can I use the same page for login and registration? Yes! Many forms support both in one page. WPForms and Ultimate Member have combined login/register forms.

What happens if I delete a mapped page? WordPress will revert to default behavior (standard wp-login.php or 404 template).

Can I have different login pages for different user roles? This requires custom code or specialized plugins. Default page mapping applies to all users.

Do I need to map all three pages? No. Map only the pages you want to customize. Others will use defaults.

Can I track conversions on my custom registration page? Yes! Add Google Analytics or Facebook Pixel to track registration completions.

Will page builders work on mapped pages? Yes! Elementor, Beaver Builder, and other page builders work perfectly for custom login/404 pages.

Can I use membership plugin pages? Yes. If you use Ultimate Member, MemberPress, or similar, you can map to their pages.

Sign-in Popup - Alternative to page mapping
WP Login Branding - Style default login page
Header Settings - Header on custom pages
Footer Settings - Footer on custom pages

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Scroll to Top Button

The Scroll to Top button helps visitors quickly return to the top of your page without manually scrolling. It appears as they scroll down and smoothly animates back to the top when clicked.

Scroll to Top Settings Scroll to top button configuration in the Customizer

What You Can Do

With BuddyX Pro's scroll to top feature, you can:

Add a floating button for easy navigation
Help visitors return to the header menu
Improve user experience on long pages
Enable or disable the button site-wide
Automatic appearance based on scroll position
Smooth animated scrolling effect

What Is a Scroll to Top Button?

When visitors scroll down long pages (blog posts, product listings, member directories), they may want to quickly return to the top to access navigation or header elements. The Scroll to Top button provides a one-click shortcut.

How It Works:

Page Top
┌────────────────────────────┐
│  [Header/Menu]             │
├────────────────────────────┤
│                            │
│  Content                   │
│                            │  User scrolls down ↓
│                            │
│  More content...           │
│                            │
│  Even more...              │
│                            │
│  [↑] ← Button appears      │
└────────────────────────────┘

Click button → Smooth scroll back to top

Enabling Scroll to Top Button

Go to Appearance > Customize
Click on General > Scroll Top
Switch Scroll Top to Yes
Click Publish

Now scroll down any page and watch for the button to appear.

Button Behavior

When It Appears

Scroll Distance	Button State
0 - 300px	Hidden (not needed yet)
300px+	Fades in smoothly

The button only shows after you've scrolled 300 pixels down the page. This prevents it from cluttering the view when you're still near the top.

Note: The 300px trigger distance is hardcoded in the theme's JavaScript - it is not a Customizer option. Changing it requires overriding the scroll script from a child theme.

Visual States

Hidden (at top of page):

┌────────────────────────┐
│  [Header]              │
│                        │
│  Content starts here   │
│                        │  (No button visible)
│                        │
└────────────────────────┘

Visible (after scrolling):

┌────────────────────────┐
│                        │
│  Content (scrolled)    │
│                        │
│  More content...       │
│                   [↑]  │ ← Button appears
└────────────────────────┘

Click Behavior

When clicked, the button:

Smoothly animates scroll back to top (300ms duration)
Uses easing for natural feel (not instant jump)
Remains visible during scroll
Fades out once at the top

Animation:

User at bottom → Click [↑] → Smooth scroll animation → Arrive at top
     ↓                ↓                    ↓                ↓
  Visible         Scrolling            Scrolling         Hidden

Button Design

Default Appearance

The BuddyX Pro scroll to top button has a clean, modern design:

Property	Style
Shape	Circular
Icon	Font Awesome up arrow, in the theme primary color
Size	50px × 50px
Background	Translucent fill with a border ring and a circular scroll-progress indicator
Position	Bottom-right corner
Distance from edge	20px from bottom, 20px from right

Visual:

                Screen Edge
                    ↓
        ┌───────────────────┐
        │                   │
        │   Your Content    │
        │                   │
        │                   │
        │              [↑]  │ ← 20px from right
        └───────────────────┘
                         ↑
                    20px from bottom

Mobile Appearance

On mobile devices, the button keeps the same 50px circular size and bottom-right position, which stays comfortably tap-friendly. If it overlaps another fixed element (a cart bar, chat widget, etc.), reposition it with the CSS shown below.

Device	Behavior
Phone	50px button, bottom-right, touch-friendly
Tablet	Same 50px button and position
Landscape	Same button; move it with CSS if it overlaps other controls

When to Use Scroll to Top

Highly Recommended For:

Page Type	Why
Blog posts	Long articles need easy navigation back to menu
Product archives	Shoppers browsing many products
Member directories	Long lists of community members
Activity feeds	Social feeds with infinite scroll
Course listings	Educational sites with many courses
Forum topics	Long discussion threads

Less Critical For:

Page Type	Why
Homepage	Often short, above-the-fold focused
Contact page	Usually single-screen
Login/Register	Short forms, no scrolling
Landing pages	Designed to scroll through linearly
Single-product pages	Return to top less needed

Customization Options

While BuddyX Pro includes a styled button by default, you can customize it with CSS.

Change Button Color

Add to Appearance > Customize > Additional CSS:

/* Custom button background */
#scrollUp {
    background-color: #007bff !important; /* Blue */
}

/* Hover effect */
#scrollUp:hover {
    background-color: #0056b3 !important; /* Darker blue */
}

Change Button Size

/* Larger button (default is 50px) */
#scrollUp {
    width: 60px !important;
    height: 60px !important;
    font-size: 20px !important;
}

Change Button Position

/* Move to left side */
#scrollUp {
    right: auto !important;
    left: 20px !important;
}

/* Move higher from bottom */
#scrollUp {
    bottom: 40px !important;
}

Change Button Shape

/* Square button */
#scrollUp {
    border-radius: 4px !important; /* Less rounded */
}

/* Pill shape */
#scrollUp {
    border-radius: 25px !important;
    width: 50px !important;
    height: 50px !important;
}

Custom Icon

The arrow glyph is drawn by the button's ::after pseudo-element (a Font Awesome up arrow), so override that:

/* Use a different arrow glyph */
#scrollUp::after {
    content: "⬆" !important; /* Different arrow */
    font-size: 24px;
}

Recommended Setups by Site Type

Only Scroll Top (on/off) is a Customizer setting. The trigger distance (300px) is hardcoded in JavaScript and the position is set in CSS, so the "trigger distance" and "position" values below are design targets you reach with the child-theme CSS/JS shown in the Customization section - not Customizer fields.

Blog / Magazine

Scroll Top: Yes
Trigger Distance: 300px (default)
Position: Bottom-right

Why: Long articles benefit greatly from quick return to navigation.

E-Commerce Store

Scroll Top: Yes
Trigger Distance: 300px
Position: Bottom-right (avoid cart button)

Why: Shoppers browse many products and need easy access to header cart/menu.

Community Platform

Scroll Top: Yes
Trigger Distance: 200px (earlier)
Position: Bottom-right

Why: Activity feeds are infinitely scrolling; members need quick navigation.

Corporate Website

Scroll Top: Yes
Trigger Distance: 400px (later)
Position: Bottom-right

Why: Professional sites with longer content pages benefit from the feature.

Landing Page

Scroll Top: No
Trigger Distance: N/A

Why: Landing pages are designed for linear, downward scrolling to CTA.

Portfolio Site

Scroll Top: Optional
Trigger Distance: 500px
Position: Bottom-left (avoid contact button)

Why: Gallery-style portfolios may not need it; depends on layout.

Educational Platform

Scroll Top: Yes
Trigger Distance: 300px
Position: Bottom-right

Why: Course listings and lesson content often require scrolling.

User Experience Best Practices

Practice	Why
Don't show immediately	Appearing too early feels intrusive
Smooth animation	Instant jumps are jarring
Visible but subtle	Should help, not distract
Consistent position	Users learn where to look
Responsive size	Work on all devices

Accessibility Features

BuddyX Pro's scroll to top button includes accessibility considerations:

Feature	Benefit
Keyboard accessible	Can be triggered with Enter/Space
ARIA label	Screen readers announce "Scroll to top"
Focus indicator	Visible outline when focused
Touch-friendly	Large enough for finger taps
High contrast	Visible to users with vision impairments

For Users with Motion Sensitivity:

The smooth scroll respects the prefers-reduced-motion CSS media query. Users who've set this preference get instant scroll (no animation).

Performance Considerations

Aspect	Impact
File size	~2KB JavaScript (minimal)
Scroll performance	Uses optimized scroll detection
Animation	CSS-based (hardware accelerated)
Load time	No impact on page load speed

Best Practices:

Button loads asynchronously
Scroll detection is throttled
No impact on Core Web Vitals
Works with lazy loading plugins

Common Questions

Can I disable scroll to top on specific pages? Yes, with custom code or page meta boxes. By default, it applies site-wide when enabled.

Does the button work on mobile? Yes! The button is fully responsive and touch-friendly on all mobile devices.

Why doesn't the button appear immediately? It only shows after scrolling 300px to avoid cluttering the view when you're near the top.

Can I change the button icon? Yes, with custom CSS. You can use different arrows, text, or custom icons.

Does it work with infinite scroll? Yes! The button works perfectly with infinite scroll features on activity feeds and archives.

Will it slow down my site? No. The scroll to top button is extremely lightweight and has no measurable performance impact.

Can I have multiple scroll buttons? Not recommended. One scroll to top button is standard practice and avoids confusion.

Does it work with sticky headers? Yes! The button scrolls to the absolute top, which includes sticky headers.

Why would I disable this feature? Some minimalist designs or short-page sites don't need it. Landing pages often disable it to encourage downward scrolling.

Troubleshooting

Button Not Appearing

Solutions:

Verify setting is enabled in Customizer > General > Scroll Top
Scroll down at least 300px on the page
Clear browser cache and theme caches
Check browser console for JavaScript errors
Disable other plugins temporarily to check for conflicts

Button Not Scrolling

Solutions:

Check for JavaScript errors in browser console
Verify jQuery is loading properly
Test in a different browser
Disable conflicting smooth scroll plugins

Button Appears in Wrong Position

Solutions:

Check for conflicting CSS from other plugins
Inspect element to see what's overriding position
Add !important to your custom CSS positioning
Check for fixed/sticky elements blocking the button

Button Looks Different Than Expected

Solutions:

Clear all caches (browser, plugin, CDN)
Check if custom CSS is being applied
Inspect element to see inherited styles
Verify theme is updated to latest version

Alternative Solutions

If you need more control over scroll behavior:

Plugin	Features
WPFront Scroll Top	Multiple icon options, custom images
Scroll to Top	Extensive position and style controls
Dynamic Scroll to Top	Progress indicator, custom triggers

Note: BuddyX Pro's built-in button is optimized and sufficient for most sites.

Sticky Header - Works with scroll to top button
Site Layout - Overall page layout settings
Mobile Header - Mobile navigation options
Footer Settings - Bottom of page elements

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Site Layout Options

The site layout controls how your website content is displayed across the screen. BuddyX Pro offers flexible layout options to match your design preferences and content strategy.

The General panel in the WordPress Customizer showing site layout and container width options

General Site Layout Settings Detailed site layout customization options including container width and spacing

What You Can Do

With BuddyX Pro's layout settings, you can:

Choose between full-width or boxed layouts
Set custom container widths for your content
Control sidebar dimensions
Adjust border radius for design consistency
Optimize layouts for different screen sizes
Create unique layouts for blogs, shops, and community pages

Site Layout Types

Site Layout Options Site layout settings showing wide and boxed layout options

Wide Layout (Default)

Content stretches to fill the browser window width:

┌───────────────────────────────────────────────────┐
│                  Header (full width)              │
├───────────────────────────────────────────────────┤
│                                                   │
│       Content stretches to window edges          │
│                                                   │
└───────────────────────────────────────────────────┘

Best for:

Modern, spacious designs
Image-heavy websites
Community platforms with activity feeds
E-commerce stores with product galleries

Boxed Layout

Boxed/container layout with content centered in a fixed-width box

Content is contained within a fixed-width box with visible margins:

┌─────────────────────────────────────────────────┐
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │          Header (boxed)                 │   │
│  ├─────────────────────────────────────────┤   │
│  │                                         │   │
│  │     Content within fixed container      │   │
│  │                                         │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘

Best for:

Traditional, focused designs
Text-heavy blogs
Corporate websites
Portfolio sites

Choosing Your Layout

Go to Appearance > Customize
Click on General > Site Layout
Select your preferred layout:
- Click Wide for full-width layout
- Click Boxed for contained layout
Click Publish

Container Width Settings

Max Content Layout Width

This controls the maximum width of your content area.

Location: Appearance > Customize > General > Site Layout

Setting	Default	Typical Range
Max Width	1300px	1140px - 1920px

How to Set:

Find Max Content Layout Width
Enter your desired width (in pixels)
Preview changes in real-time
Click Publish

Common Width Values:

Width	Use Case
1140px	Traditional blogs, narrow content focus
1200px	Balanced for most websites
1300px	BuddyX Pro default, great for communities
1400px	Wide layouts for e-commerce
1600px+	Portfolio sites, image galleries

Visual Comparison

1140px (Narrow):

┌─────────────────────────────────────────────┐
│    ┌───────────────────────────────┐       │
│    │      Content Area             │       │
│    │      (comfortable reading)    │       │
│    └───────────────────────────────┘       │
└─────────────────────────────────────────────┘

1300px (Default):

┌─────────────────────────────────────────────┐
│  ┌─────────────────────────────────────┐   │
│  │        Content Area                 │   │
│  │        (balanced layout)            │   │
│  └─────────────────────────────────────┘   │
└─────────────────────────────────────────────┘

1600px (Wide):

┌─────────────────────────────────────────────┐
│┌───────────────────────────────────────────┐│
││          Content Area                     ││
││          (spacious, modern)               ││
│└───────────────────────────────────────────┘│
└─────────────────────────────────────────────┘

Control the width of your sidebar areas.

Location: Appearance > Customize > General > Site Layout

Setting	Default	Range
Global Sidebar Width	260px	200px - 400px

Popular Configurations:

Width	Layout Effect
220px	Compact sidebar, more content space
260px	Balanced sidebar (default)
300px	Wide sidebar, featured widgets
350px	Very prominent sidebar

Example with Sidebar:

┌──────────────────────────────────────────┐
│  Main Content        │    Sidebar        │
│  (wider area)        │    (260px)        │
│                      │                   │
│  Blog posts,         │  - Widget 1       │
│  product listings,   │  - Widget 2       │
│  or page content     │  - Widget 3       │
└──────────────────────────────────────────┘

Border Radius Settings

Create consistent rounded corners throughout your site.

Location: Appearance > Customize > General > Site Layout

Global Border Radius

Controls roundness of content boxes, cards, and containers.

Setting	Default	Effect
Global Border Radius	8px	Subtle rounded corners

Visual Guide:

Value	Appearance	Best For
0px	Sharp corners	Modern, geometric designs
4px	Slightly rounded	Minimalist, clean look
8px	Noticeable rounds (default)	Friendly, approachable
12px	Very rounded	Playful, modern designs
20px+	Heavily rounded	Bold, distinctive style

Button Border Radius

Separate control for all button styles.

Setting	Default
Buttons Border Radius	6px

Examples:

0px:  [  Click Me  ]  ← Sharp edges
6px:  (  Click Me  )  ← Default, balanced
12px: (   Click Me   ) ← Very rounded
30px: (    Click Me    ) ← Pill-shaped

Form Border Radius

Controls input fields, dropdowns, and textboxes.

Setting	Default
Form Border Radius	6px

Note: Textareas are excluded to maintain distinction between single-line and multi-line inputs.

Recommended Setups by Site Type

Blog / Magazine

Layout: Wide
Container Width: 1200px
Sidebar Width: 280px
Global Border Radius: 8px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Comfortable reading width with prominent sidebar for featured content and ads.

E-Commerce Store

Layout: Wide
Container Width: 1400px
Sidebar Width: 260px
Global Border Radius: 8px
Buttons Border Radius: 4px
Form Border Radius: 4px

Why: Wider layout showcases more products; subtle borders keep focus on products.

Community Platform

Layout: Wide
Container Width: 1300px
Sidebar Width: 240px
Global Border Radius: 10px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Default BuddyX Pro setup optimized for social interaction and activity feeds.

Corporate Website

Layout: Boxed
Container Width: 1140px
Sidebar Width: 300px
Global Border Radius: 4px
Buttons Border Radius: 3px
Form Border Radius: 3px

Why: Traditional, professional appearance with strong content focus.

Portfolio / Creative

Layout: Wide
Container Width: 1600px
Sidebar Width: 220px (minimal)
Global Border Radius: 12px
Buttons Border Radius: 20px
Form Border Radius: 8px

Why: Maximum space for showcasing creative work; bold, modern styling.

Educational / LMS

Layout: Wide
Container Width: 1300px
Sidebar Width: 280px
Global Border Radius: 8px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Balanced layout for course listings and lesson content with sidebar for progress tracking.

Responsive Behavior

Your layout automatically adapts to different screen sizes:

Screen Size	Behavior
Desktop (1200px+)	Full settings applied
Tablet (768px - 1199px)	Content width adjusts proportionally
Mobile (< 768px)	Single column, no sidebar

Mobile Layout:

┌─────────────────┐
│     Header      │
├─────────────────┤
│                 │
│  Main Content   │
│  (full width)   │
│                 │
├─────────────────┤
│                 │
│  Sidebar Below  │
│                 │
└─────────────────┘

Advanced Customization

Custom Width for Specific Pages

You can override the global width for individual pages using WordPress page settings or custom CSS.

Using Custom CSS:

/* Make specific page wider */
.page-id-123 .container {
    max-width: 1600px;
}

/* Make blog archive narrower */
.blog .container {
    max-width: 1000px;
}

Different Widths by Plugin

Some plugins automatically adjust container width:

Plugin	Behavior
WooCommerce	Shop pages follow WooCommerce settings
LearnDash	Course pages can have custom widths
BuddyPress	Profile pages use optimized widths

Performance Tips

Tip	Benefit
Use standard widths	Easier for browsers to render consistently
Avoid extreme values	Very wide layouts (2000px+) can look broken on some screens
Test on real devices	Check layout on actual phones and tablets
Consider reading comfort	Text lines shouldn't exceed 80-90 characters for readability

Common Questions

What's the difference between Wide and Boxed layouts? Wide layouts stretch content edge-to-edge within the container width. Boxed layouts add visible spacing around the entire site, creating a "card" effect.

Can I use different layouts on different pages? Yes! You can set individual page layouts through page meta boxes or use child theme code to customize specific pages.

Does container width affect mobile view? On mobile devices, content automatically adjusts to fit the screen width regardless of your desktop container setting.

What if my content looks too narrow or too wide? Adjust the Max Content Layout Width. Most sites work well between 1200px - 1400px. Test with your actual content.

Can I have a wide header but boxed content? Yes! The header can span full-width while content remains boxed. This is controlled in Header settings.

Why do my images look smaller after changing width? Images display relative to container width. You may need to regenerate thumbnails or adjust image sizes after major width changes.

Should I match border radius everywhere? Not necessarily! Using 8px for content boxes, 6px for buttons, and 6px for forms creates subtle visual hierarchy while maintaining consistency.

Site Loader - Loading animation settings
Sidebar Layouts - Sidebar positioning options
Header Layouts - Header width and style
Blog Layout - Blog-specific layouts
Border Radius & Styling - Advanced border styling

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Site Loader

A site loader (also called preloader) displays an animation while your website loads. It provides visual feedback to visitors, showing that your site is loading rather than broken or frozen.

Site loader configuration options in the Customizer

What You Can Do

With BuddyX Pro's site loader feature, you can:

Show an animated loading screen while your site loads
Add custom loading text
Improve perceived load times
Create a professional first impression
Maintain brand consistency during page loads

What Is a Site Loader?

When visitors first arrive at your site, the browser downloads HTML, CSS, JavaScript, images, and other assets. A site loader:

Appears immediately while content loads
Shows an animation to indicate progress
Disappears automatically when the page is ready
Prevents visitors from seeing a partially-loaded page

Visual Flow:

Visitor clicks link
      ↓
┌──────────────────┐
│                  │
│    [Loading]     │  ← Loader appears instantly
│     • • • •      │
│                  │
└──────────────────┘
      ↓
Page fully loads
      ↓
┌──────────────────┐
│                  │
│   Your Website   │  ← Content revealed
│   (fully loaded) │
│                  │
└──────────────────┘

Enabling Site Loader

Go to Appearance > Customize
Click on General > Site Loader
Switch Site Loader to Yes
Click Publish

Now refresh your site to see the loader in action.

Customizing Loader Text

Add a custom message that appears with your loading animation.

Steps:

In General > Site Loader settings
Find Site Loader Text
Enter your custom text (default: "Loading")
Click Publish

Text Ideas by Site Type

Site Type	Suggested Text
E-Commerce	"Loading Shop...", "Preparing Products..."
Community	"Loading Community...", "Getting Ready..."
Blog	"Loading Stories...", "Preparing Content..."
Corporate	"Loading...", "Please Wait..."
Education	"Loading Courses...", "Preparing Lessons..."
Portfolio	"Loading Portfolio...", "Preparing Gallery..."

Tips:

Keep it short (1-3 words)
Use action words ("Loading", "Preparing", "Getting")
Match your brand voice (casual vs. professional)
Avoid unnecessary punctuation

Note: The loader text doubles as the screen-reader announcement (aria-label). It is only shown on screen when you pick the Logo animation below; for the other animations it stays visually hidden but is still read by assistive technology.

Loader Animation Style

BuddyX Pro 5.1.0+ ships five loader animations. Pick one under General > Site Loader.

Setting: Loader animation (site_loader_type) Default: Dots

Option	Appearance	Best For
Dots (default)	Pulsing dot sequence	General use, subtle feedback
Spinner	Rotating ring	Classic, universally understood
Pulse	Expanding/fading circle	Calm, minimal designs
Bars	Rising equalizer bars	Media, music, energetic sites
Logo	Your logo (or the site logo) with the loader text below it	Brand-forward first impression

The Logo animation reveals two extra controls (custom logo image, described below) and shows the loader text on screen.

Loader Colors

Two color controls style the loader independent of the rest of the skin.

Background color (site_loader_bg)

The full-screen overlay behind the animation.
Default: #ee4036
Supports alpha (transparency).

Element color (site_loader_color)

The color of the spinner, dots, or bars glyphs (and the loader text).
Default: #ffffff
Ignored when you use the Logo animation (the logo supplies its own colors).

Dark mode: The loader background has a Background color (Dark Mode) counterpart (dark_site_loader_bg, default #E94560) that applies when a visitor views the site in dark mode. Set both so the loader matches each mode. This mirrors the theme-wide pattern where every color control has a Dark Mode twin.

Custom Logo Loader

When Loader animation is set to Logo, upload the image you want shown while the page loads.

Setting: Custom logo image (site_loader_logo) Default: empty Fallback: When left empty, the loader uses your site logo (from Appearance > Customize > Site Identity).

Use a small, optimized PNG or SVG so the loader image itself does not delay the reveal.

Animation Speed

Control how fast the loader animation cycles.

Setting: Animation speed (seconds) (site_loader_speed) Default: 1.5s Range: 0.5s - 3.0s (0.1s steps)

Faster (0.5 - 1s): Energetic, snappy feel.
Balanced (1.5s): Default, comfortable for most sites.
Slower (2 - 3s): Calm, deliberate motion.

Loader Animation

BuddyX Pro uses an elegant animated dot pattern:

   Loading
    • • • •

The dots pulse and animate in sequence:
• • • •  →  • • • •  →  • • • •  →  • • • •
↑           ↑           ↑           ↑

Animation Features:

Smooth dot pulsing effect
Sequential animation pattern
Synchronized with loading text
Lightweight CSS animation (no impact on load time)

Visual Appearance

Default Loader

┌─────────────────────────────────────┐
│                                     │
│                                     │
│              Loading                │
│             • • • •                 │
│        (animated dots)              │
│                                     │
│                                     │
└─────────────────────────────────────┘

Styling:

Center-aligned on screen
White/light background overlay
Smooth fade-in/fade-out transitions
Responsive (works on all screen sizes)

When to Use Site Loader

Recommended For:

Scenario	Reason
Heavy imagery sites	Prevents flash of unstyled content
E-commerce stores	Ensures product images load properly
Community platforms	Smooth transition to activity feeds
Custom fonts/icons	Prevents font loading flash
Complex layouts	Better than seeing layout shifts

Consider Disabling For:

Scenario	Reason
Fast-loading blogs	Adds unnecessary delay to quick pages
Minimal sites	Simple pages don't need a loader
SEO landing pages	Faster initial content display preferred
Already optimized sites	May feel redundant

Performance Considerations

Load Time Impact

Aspect	Impact
Added File Size	Minimal (~2KB CSS)
JavaScript Overhead	Negligible
Perceived Speed	Actually improves (hides loading jerks)
Actual Speed	No negative impact

Best Practices

Do:

Optimize images and assets (loader can't fix slow content)
Use caching plugins
Enable lazy loading for images
Minimize CSS/JS files
Use a CDN for static assets

Don't:

Rely on loader to mask slow servers
Add custom loader images that take time to load
Keep loader visible longer than necessary
Use heavy animations or GIFs

Customization Ideas

While BuddyX Pro includes a built-in loader, you can customize it further with CSS or child themes.

Change Loader Colors

Add this to Appearance > Customize > Additional CSS:

/* Change background color */
.site-loader {
    background-color: #f5f5f5; /* Light gray */
}

/* Change text color */
.site-loader .loader-text {
    color: #333; /* Dark gray text */
}

/* Change dot colors */
.site-loader .dot {
    background-color: #007bff; /* Blue dots */
}

Match Your Brand Colors

/* Use brand primary color */
.site-loader .dot {
    background-color: var(--color-theme-primary);
}

.site-loader .loader-text {
    color: var(--color-theme-primary);
}

Recommended Setups by Site Type

E-Commerce Store

Site Loader: Yes
Loader Text: "Loading Shop..."

Why: Customers expect smooth transitions. Loader prevents seeing partial product grids or unloaded images.

Community Platform

Site Loader: Yes
Loader Text: "Loading Community..."

Why: Activity feeds and member grids benefit from unified loading experience.

Blog / Magazine

Site Loader: Optional
Loader Text: "Loading Stories..."

Why: Text-heavy blogs load quickly and may not need a loader, but it adds polish.

Corporate Website

Site Loader: Yes
Loader Text: "Loading..."

Why: Professional appearance; hides any layout shifts or font loading.

Landing Page

Site Loader: No
Loader Text: N/A

Why: Landing pages prioritize instant content visibility for conversions.

Portfolio Site

Site Loader: Yes
Loader Text: "Preparing Gallery..."

Why: Image-heavy portfolios benefit from unified reveal of all images.

Troubleshooting

Loader Stays Visible Too Long

Cause: JavaScript not firing page ready event.

Solutions:

Check browser console for JavaScript errors
Disable conflicting plugins temporarily
Clear all caches (browser, plugin, CDN)
Check if jQuery is loading properly

Loader Doesn't Appear

Cause: Caching plugin serving cached page without loader.

Solutions:

Clear all caches
Check if setting is enabled in Customizer
Refresh page while Customizer is open
Test in incognito/private browsing

Loader Blocks Content

Cause: JavaScript error preventing loader from hiding.

Solutions:

Check browser console for errors
Disable other plugins to identify conflicts
Update theme to latest version
Contact support with error details

Loader Looks Different on Mobile

Expected Behavior: Loader is responsive and adapts to screen size. Text and dots scale appropriately.

Accessibility Considerations

The BuddyX Pro loader is built with accessibility in mind:

Feature	Benefit
ARIA attributes	Screen readers understand loading state
Reduced motion support	Respects user's motion preferences
Semantic markup	Proper HTML structure
Keyboard accessible	Doesn't block keyboard navigation

For Users with Motion Sensitivity:

The loader respects the prefers-reduced-motion CSS media query. Users who've set this preference see a simplified, static loader.

Common Questions

Does a site loader slow down my website? No. The loader itself is lightweight. It only displays while your page loads normally in the background. It improves perceived performance by providing visual feedback.

Can I use my own loader animation? The built-in loader is optimized for performance. Custom loaders require child theme development or custom CSS.

Should I always use a site loader? Not necessarily. Fast-loading, text-based sites may not benefit. Test with and without to see what works for your audience.

Does the loader affect SEO? No. Search engines don't see the loader. It's only visible to human visitors and doesn't affect crawling or indexing.

Can I show the loader only on specific pages? With custom code, yes. The default setting applies site-wide for consistency.

Why does my loader text not change? Make sure to click Publish in the Customizer after entering new text. Clear caches if changes don't appear.

Is the loader mobile-friendly? Yes! The loader is fully responsive and works on all devices and screen sizes.

Site Layout - Layout options that load behind the loader
Header Settings - Header elements included in loading
Color Scheme - Customize loader colors
Performance - Speed optimization tips

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Per-Page Settings

Some pages on your site need to break the rules. A landing page might need a full-width hero with no sidebar. A long-form article might benefit from a narrower reading column. A pricing page might look better without the header. A members-only welcome page might need dark mode always-on regardless of the visitor's preference.

BuddyX Pro 5.1.0+ ships a Page Settings meta box that lets you override the site's global settings just for this one page or post. Open any page in the WordPress editor and look for the Page Settings panel in the right-side column.

This is a 5.1.0 feature. If you don't see Page Settings in the editor sidebar, make sure you're on BuddyX Pro 5.1.0 or later, and that you're editing a page, post, or supported custom post type.

What you can override per page

Setting	Key	What it controls
Sidebar	`_buddyxpro_page_sidebar`	Pick the sidebar layout (Left / Right / Both / None / Default) for this entry. Overrides the page-template or global default.
Hide site header	`_buddyxpro_page_disable_header`	Hides the site header on this entry. Useful for full-screen landing pages, sign-up flows, or "distraction-free" content.
Hide site footer	`_buddyxpro_page_disable_footer`	Hides the site footer on this entry. Pairs with "Hide site header" for full-bleed landing pages.
Content width	`_buddyxpro_page_content_width`	Override the content container width - Narrow (comfortable reading), Default (theme global), or Full (edge-to-edge).
Header style	`_buddyxpro_page_header_style`	Override the header style - useful when you want a transparent header over a hero image on this one landing page.
Color mode	`_buddyxpro_page_color_mode`	Force Light, Dark, or Use Site Default. The site default + visitor toggle are honored unless you set Force Light or Force Dark here - those win regardless of visitor preference.
Site loader	`_buddyxpro_page_loader`	Show, Hide, or Use Site Default for the site loader overlay (the loading animation that briefly covers the screen on page load).

Each setting defaults to "Use site default" - meaning until you explicitly pick a value, the page falls through to the global Customizer setting. That makes per-page overrides safe: existing pages don't change behavior on upgrade.

Where the meta box appears

Page Settings appears on these content types out of the box:

Pages (the most common surface)
Posts (less common, but useful for special long-form articles)
Products (when WooCommerce is active)
Courses, Lessons, Topics (when LearnDash or another LMS is active)
Most other public, editable custom post types

If you want Page Settings on a custom post type your plugin registers, use the buddyxpro_page_settings_post_types filter:

add_filter( 'buddyxpro_page_settings_post_types', function ( $supported ) {
    $supported[] = 'event';      // your custom post type slug
    $supported[] = 'portfolio';  // and another
    return $supported;
} );

Common workflows

Build a full-screen landing page

You want a page with no header, no footer, edge-to-edge content - typical for a marketing landing page or a launch teaser.

Create or open the page (Pages → Add New)
Build the page content with blocks / patterns (use the Hero pattern category as a starting point)
In the right-side editor panel, scroll to Page Settings
Set:
- Hide site header: Yes
- Hide site footer: Yes
- Sidebar: None
- Content width: Full
Click Publish (or Update)
View the page - it should now render as a single full-bleed surface

Force dark mode on one page

You want a specific page (e.g. a "Night Mode Resources" page, a tech-themed launch page) to always display in dark colors regardless of the visitor's preference.

Open the page in the editor
Page Settings → Color mode → Force dark
Publish

The page will render dark for every visitor. The Color Mode toggle still appears (if you have it enabled globally) but clicking it on this page has no effect - the page-level force wins.

Use a different sidebar on one post

You want most of your blog posts to have a right sidebar with recent-posts widgets, but one specific post needs a left sidebar with a custom widget area instead.

Open the post
Page Settings → Sidebar → Left
Publish

This post now uses the left sidebar layout; all other posts continue to use the global default.

Hide the site loader on one specific page

You have the site loader enabled globally for the polished first impression, but a specific page (e.g. an embedded form, a fast-loading utility page) doesn't need it.

Open the page
Page Settings → Site loader → Hide on this entry
Publish

How priority works

When a setting can come from multiple places, the resolution order is:

Per-page override (Page Settings on this specific entry) - highest priority
Per-template setting (e.g. WooCommerce single-product sidebar override) - next
Customizer global setting (the site-wide default in Appearance → Customize) - fallback

This means you can set a sensible global default in the Customizer (e.g. "right sidebar on all blog posts") and override per-entry only when you need to.

What's NOT per-page (and why)

Some settings don't have a per-page override on purpose:

Colors - the global color palette applies everywhere. Overriding colors per-page would require custom CSS, not a meta-box switch.
Fonts - same as colors. Site-wide typography is a coherence decision, not a per-page choice.
Header layout - the layout itself (which header design ships) is site-wide; you can hide the header per-page (above) but not swap to a different header layout per-page.
Menus - menu assignment is by menu location, not per-page.

If you need any of these per-page, talk to us - we may consider it for a future release.

Site Loader settings - the global setting that Page Settings can override
Dark Mode - the global Color Mode setting that Page Settings can override
Sidebar Layouts - the global sidebar setting that Page Settings can override

Got a question? We're happy to help - drop us a line at support@wbcomdesigns.com.

Header Settings

Topbar, header layouts, sticky header, sub-header, breadcrumbs, mobile header.

Header Elements & Icons

Add functional elements to your header to improve navigation and access to key features. These toggles live in the Site Header section of the Customizer and let you show or hide search, cart, community icons, and the login/register links.

Header Icons Settings Header element toggles in the Site Header section showing search, cart, community, and login options

What You Can Add

BuddyX Pro lets you enable these header elements from the Site Header section:

A More Menu overflow toggle for extra menu items
A Site Search icon, with a Default or Fullwidth search style
A Site Cart icon (when WooCommerce is active)
Friends, Messages, and Notifications icons (when BuddyPress is active)
Login and Register links for logged-out visitors, with a button style picker

Enabling Header Elements

Go to Appearance > Customize
Open the Site Header section
Toggle on the elements you want
Click Publish

Available Header Elements

Every control below is a Yes / No switch unless noted otherwise.

Collapses overflow navigation items into a "more" dropdown so the header stays tidy when the menu is long.

Setting	Setting ID	Options	Default
More Menu ?	`site_more_menu`	Yes / No	Yes

Site Search

Shows a search icon in the header. When enabled, a second control chooses how the search field expands.

Setting	Setting ID	Options	Default
Site Search ?	`site_search`	Yes / No	Yes
Site Search Style	`side_search_style`	Default, Fullwidth	Default

The Site Search Style control only appears when Site Search is set to Yes. Choosing Fullwidth adds a search-fullwidth body class so the search field spans the full header width.

Site Cart (WooCommerce)

Displays a cart icon in the header. This control appears only when WooCommerce is active.

Setting	Setting ID	Options	Default
Site Cart ?	`site_cart`	Yes / No	Yes

Community Icons (BuddyPress)

When BuddyPress is active, three switches control the community icons for logged-in members.

Setting	Setting ID	Options	Default
Friends Component ?	`site_friend`	Yes / No	No
Messages Component ?	`site_message`	Yes / No	Yes
Notifications Component ?	`site_notification`	Yes / No	Yes

These controls appear only when BuddyPress is active.

For logged-out visitors, the header can show links to sign in and register.

Setting	Setting ID	Options	Default
Site Login Link ?	`site_login_link`	Yes / No	Yes
Site Register Link ?	`site_register_link`	Yes / No	Yes

Login/Register Button Style

Sets how the login/register links are presented. This control appears only when Site Login Link is set to Yes.

Setting	Setting ID	Options	Default
Login/Register Button Style	`site_header_button_style`	Icon+Text, Only Icon, Only Text, Icon+Text Button, Icon Button, Text Button	Icon+Text

What Visitors See

Logged Out: Login and Register links (styled per the button-style control)
Logged In: the community icons you enabled (Friends, Messages, Notifications) plus the account menu

Recommended Setups by Site Type

Online Store

Enable: Site Search + Site Cart
Search Style: Default
Buttons: Icon+Text login/register

Why this works: shoppers can search products and reach the cart, while login and register stay clear for new customers.

Community Platform

Enable: Site Search + Friends + Messages + Notifications
Search Style: Fullwidth
Buttons: Icon+Text Button login/register

Why this works: members can search and stay on top of friend requests, messages, and notifications from the header.

Blog / Magazine

Enable: Site Search + More Menu
Search Style: Default
Buttons: Only Text login/register

Why this works: readers can search and browse a long menu without clutter.

Common Questions

Which elements should I enable? Only enable what your visitors will use. A store needs the cart; a blog may only need search.

Why don't I see the cart or community toggles? The Site Cart toggle appears only with WooCommerce active. The Friends, Messages, and Notifications toggles appear only with BuddyPress active.

Where is the dark mode toggle? The dark/light mode toggle is not a Site Header control. It lives under Appearance > Customize > Site Skin (see the Dark Mode documentation).

Can I change the search style after enabling it? Yes. Set Site Search to Yes, then pick Default or Fullwidth under Site Search Style.

Header Layout Styles - Menu layout, header style, and menu effects
Sticky Header - Keep the header fixed while scrolling
Dark Mode - Dark mode toggle settings (Site Skin)
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

BuddyX Pro gives you two independent header controls that work together: a Header Style preset (the header's visual personality) and a Menu Layout (how the logo and navigation are arranged). All header controls live in the flat, top-level Site Header section of the Customizer - there is no separate "Header" panel.

Site Header Panel The Site Header section in the WordPress Customizer showing style and layout options

Accessing Header Settings

Go to Appearance > Customize
Open the Site Header section

Header Style (Visual Presets)

Header Style (site_header_style) sets the header's visual personality. It is a layer above the Menu Layout choice, so you can pair any menu layout with any style. There are five presets.

Style	What It Does	Default
Default	The standard Pro header (solid background, soft shadow on scroll)	Yes
Solid	A flat colored bar with a 1px bottom border, no shadow	-
Transparent	Sits over a hero image or page cover with no background fill	-
Minimal	Thin, compact bar with a 1px divider	-
Glass	Frosted-glass effect: backdrop blur with a semi-transparent fill	-

How to change:

Go to Appearance > Customize and open the Site Header section
Pick a swatch under Header Style
Click Publish

Default keeps existing sites rendering exactly as before, so switching styles is always safe to preview and revert.

Menu Layout (site_header_layout) chooses one of four arrangements for the logo and navigation. In the Customizer this control is labelled Menu Layout and shown as four image swatches.

Swatch	Value	Arrangement
Layout 1	`default`	Logo left, menu right (or repositioned via Header Menu Position)
Layout 2	`style_2`	Logo left, menu on a full-width row below
Layout 3	`style_3`	Logo centered, menu centered below
Layout 4	`style_4`	Logo left, menu centered in the header

The classic header layout with logo on the left and navigation aligned to the right.

Structure:

[Logo] .......................... [Primary Menu] [Icons]

Best For:

Traditional business websites
Corporate sites
Most common layout expectation
Sites with extensive navigation menus

Features:

Logo positioned at far left
Primary navigation aligned right
Header icons (search, cart, notifications) after menu
Clean, professional appearance

A two-row header with the logo on top left and navigation row below it.

Structure:

[Logo] ...................... [Header Icons/Search]
---------------------------------------------------
[Primary Menu - Full Width]

Best For:

Large navigation menus (10+ items)
Sites with prominent search functionality
E-commerce sites with cart prominence
Community sites with many navigation options

Features:

Larger logo display area
Full-width navigation bar below logo
More space for header elements
Clear visual hierarchy

A stacked layout with centered logo above centered navigation.

Header Layout 3 - Centered Logo Layout 3 with centered logo and navigation menu below

Structure:

              [Logo]
---------------------------------------------------
         [Primary Menu - Centered]

Best For:

Magazine-style sites
Portfolio websites
Blogs with strong branding
Sites wanting maximum logo visibility

Features:

Maximum logo prominence
Centered visual balance
Elegant, editorial feel
Works well with horizontal logos

A single-row layout with logo on the left and navigation menu centered in the header.

Header Layout 4 - Centered Menu Layout 4 with logo on left and centered navigation menu

Close-up showing the centered menu alignment with logo and icons

Structure:

[Logo] ....... [Primary Menu - Centered] ....... [Icons]

Best For:

Brand-focused websites
Creative portfolios
Sites wanting balanced visual appearance
Modern, clean designs

Features:

Logo positioned at left
Menu items centered in available space
Header icons on right
Balanced, symmetrical look

Header Elements Configuration

Each layout supports configurable header elements:

Logo Settings

Logo image, size, and dark-mode logo are set in the WordPress Site Identity section, not in Site Header.

Setting	Setting ID	Description	Location
Logo	`custom_logo`	Primary logo upload	Site Identity
Logo Size	`logo_size`	Desktop logo width (150-300px, default 150px)	Site Identity
Dark Mode Logo	`dark_mode_logo`	Alternate logo for dark mode	Site Identity

Setting	Setting ID	Description	Default
Primary Menu	(Menus)	Main navigation menu, assigned to the "Primary - Logged in users" location	Assigned in Menus
Header Menu Effects	`site_header_menu_effect`	Hover effect for menu items	No Effect

When you use Layout 1 (Logo Left, Menu Right), the Header Menu Position control (site_header_menu_position) decides where the primary menu sits within the header bar.

Option	Result	Default
Right	Menu aligned to the right of the header	Yes
Left	Menu aligned next to the logo on the left	-
Center	Menu centered in the available space	-

This control only appears when Menu Layout is set to Layout 1 (default). The other layouts fix the menu position as part of their design.

Add a hover effect to your navigation menu items via Header Menu Effects (site_header_menu_effect). Choose from four options:

Effect 1: Dot indicator appears above the hovered menu item

Effect	Description	Best For
No Effect	Standard hover (color change only)	Minimal, clean designs
Effect 1	Dot indicator above menu item	Modern, subtle indication
Effect 2	Underline animation	Professional, corporate sites
Effect 3	Brackets around menu item	Creative, unique styling

Effect 3: Brackets appear around the hovered menu item [Members]

How to Change:

Go to Appearance > Customize and open the Site Header section
Find the Header Menu Effects dropdown
Select your preferred effect
Preview by hovering over menu items
Click Publish

Header Elements

Configure which elements appear in the header area. Every toggle is a Yes / No switch and lives in the Site Header section. See Header Elements & Icons for full detail.

Header Icons Settings Header element toggles showing in the header preview

Setting	Setting ID	Options	Default
More Menu ?	`site_more_menu`	Yes / No	Yes
Site Search ?	`site_search`	Yes / No	Yes
Site Search Style	`side_search_style`	Default, Fullwidth	Default
Site Cart ?	`site_cart`	Yes / No (requires WooCommerce)	Yes
Friends Component ?	`site_friend`	Yes / No (requires BuddyPress)	No
Messages Component ?	`site_message`	Yes / No (requires BuddyPress)	Yes
Notifications Component ?	`site_notification`	Yes / No (requires BuddyPress)	Yes
Site Login Link ?	`site_login_link`	Yes / No	Yes
Site Register Link ?	`site_register_link`	Yes / No	Yes
Login/Register Button Style	`site_header_button_style`	Icon+Text, Only Icon, Only Text, Icon+Text Button, Icon Button, Text Button	Icon+Text

Enable a fixed header that stays visible while scrolling. BuddyX Pro ships a single on/off control for this.

Sticky header enabled - header remains fixed at top while page content scrolls

Setting	Setting ID	Description	Default
Enable Sticky Header ?	`site_sticky_header`	Fix the header to the top of the screen on scroll	Yes

When enabled, the theme adds a sticky-header body class and the header stays pinned as the page scrolls. See Sticky Header for details.

The header switches from the full desktop menu to a hamburger menu based on the Hamburger Menu Breakpoint control.

Setting	Setting ID	Range	Default
Hamburger Menu Breakpoint	`site_hamburger_menu_breakpoint`	768px to 1600px	768px

Below the breakpoint width, the navigation collapses into the hamburger menu. See Mobile Header for details.

Layout Comparison

Feature	Layout 1	Layout 2	Layout 3	Layout 4
Logo Position	Left	Left	Center	Left
Menu Position	Right	Below	Below Center	Centered
Rows	1	2	2	1
Logo Prominence	Medium	Medium	High	Medium
Menu Capacity	Medium	High	Medium	Medium
Best For	Business	Large Menus	Editorial	Modern/Balanced

Configuration Examples

Example 1: Corporate Website

Layout: Layout 1 (Logo Left, Menu Right)
Sticky Header: Enabled
Header Icons: Search only
Mobile: Hamburger menu

Example 2: Community Platform

Layout: Layout 2 (Logo Left, Menu Below)
Sticky Header: Enabled
Header Elements: Search, Notifications, Messages, Cart
Mobile: Side panel navigation

Example 3: Portfolio Site

Layout: Layout 3 (Logo Center, Menu Below)
Sticky Header: Disabled
Header Icons: None
Menu Items: Work, About, Contact
Mobile: Minimal hamburger

Troubleshooting

Problem: Navigation doesn't align as expected in chosen layout.

Solutions:

Check menu is assigned to Primary Menu location
Verify no CSS conflicts from plugins
Clear caching plugins
Try a different layout temporarily to compare

Problem: Content jumps when sticky header activates.

Solutions:

This is normal - space is reserved for the header
Check for conflicting sticky-header plugins
Adjust body padding in custom CSS if needed

Header Elements Overlapping

Problem: Icons or menu items overlap on certain screen sizes.

Solutions:

Reduce number of visible header icons
Shorten menu item text
Use mobile breakpoints appropriately
Consider Layout 3 for more horizontal space

Header Elements & Icons - Configure header icons
Sticky Header - Fixed header settings
Mobile Header - Mobile-specific options
Topbar Configuration - Above-header bar

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Your mobile header is what visitors see on smartphones and tablets. BuddyX Pro switches from the full desktop menu to a hamburger menu automatically, and gives you one control over exactly when that switch happens: the Hamburger Menu Breakpoint.

Header Settings Header configuration options in the Site Header section of the Customizer

Over 60% of web traffic comes from mobile devices
First impression on mobile affects engagement
Easy navigation reduces bounce rates
Mobile-friendly design impacts SEO rankings

What You Can Customize

BuddyX Pro's mobile header behaviour is intentionally simple. The one dedicated mobile control is the Hamburger Menu Breakpoint slider in the Site Header section. The mobile menu itself is populated by dedicated Mobile Menu navigation locations you assign under Appearance > Menus.

The Hamburger Menu Breakpoint slider sets the screen width, in pixels, where the header switches from the full desktop menu to the hamburger menu.

Setting	Setting ID	Range	Default
Hamburger Menu Breakpoint	`site_hamburger_menu_breakpoint`	768px to 1600px	768px

How to set it:

Go to Appearance > Customize and open the Site Header section
Drag the Hamburger Menu Breakpoint slider to your preferred width
Click Publish

Raise the breakpoint if your menu has many items and starts to wrap on tablets - the hamburger will then kick in earlier (on wider screens) and keep the header tidy. Below the chosen width the desktop menu collapses into the hamburger; at or above it, the full menu shows.

When the viewport is narrower than the breakpoint, a hamburger icon (three horizontal lines) appears. Tapping it opens the mobile navigation. The icon, panel, and animation are handled by the theme automatically - there are no separate style, size, or panel controls in the Customizer.

The mobile menu is driven by dedicated navigation menu locations, so you can show a different menu on mobile than on desktop. Assign menus under Appearance > Menus > Manage Locations:

Location	Shown To
Mobile Menu - Logged in users	Logged-in visitors on mobile
Mobile Menu - Logged out users	Logged-out visitors on mobile

If no mobile menu is assigned, the theme falls back to your Primary menu.

To create a mobile-specific menu:

Go to Appearance > Menus
Create a new menu (for example, "Mobile Navigation")
Add the links you want mobile visitors to see
Assign it to Mobile Menu - Logged in users and/or Mobile Menu - Logged out users
Save

Preview Methods

Customizer Preview: use the responsive device icons at the bottom of the Customizer
Browser DevTools: press F12 and toggle device mode
Real Devices: test on actual phones and tablets

What to Check

Check	Why It Matters
Breakpoint feel	Does the hamburger appear at the right width for your menu length?
Logo visibility	Can visitors identify your brand at mobile sizes?
Touch targets	Are the hamburger and menu links easy to tap?
Menu navigation	Can visitors reach all pages, including submenus?
Load speed	Does the header appear quickly?

Common Questions

Can I change the width where the hamburger appears? Yes. That is exactly what the Hamburger Menu Breakpoint slider does (768px to 1600px, default 768px).

Can I show different menu items on mobile? Yes. Create a separate menu in Appearance > Menus and assign it to a Mobile Menu location.

Can I change the hamburger icon style or the panel animation? These are handled by the theme and are not exposed as Customizer controls. Custom CSS in a child theme can adjust them.

Why isn't my desktop menu collapsing on tablet? Your breakpoint may be set lower than the tablet width. Raise the Hamburger Menu Breakpoint so the hamburger kicks in on wider screens.

Header Layout Styles - Desktop header options
Header Elements - Elements in the header
Sticky Header - Keep the header fixed while scrolling
Topbar Settings - The bar above the main header

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

A sticky header stays visible at the top of the screen as visitors scroll down your page. This keeps your navigation accessible at all times, making it easier for people to explore your site.

Sticky Header Settings Sticky header toggle in the Site Header section of the Customizer

What You Can Do

BuddyX Pro ships a single on/off control for the sticky header. When it is on, the main header stays pinned to the top of the screen while the page scrolls beneath it.

The Control

Setting	Setting ID	Options	Default
Enable Sticky Header ?	`site_sticky_header`	Yes / No	Yes

There are no separate mode, logo, background, opacity, shadow, or animation controls - the sticky behaviour is a single switch.

Go to Appearance > Customize
Open the Site Header section
Set Enable Sticky Header ? to Yes
Click Publish

Now scroll down any page to see the header stick to the top. When enabled, the theme adds a sticky-header class to the page <body>, and the header styling keys off that class.

How It Behaves

The page loads and the header displays normally
As the visitor scrolls down, the header stays fixed at the top
Page content scrolls beneath the fixed header
The same header (same logo, same menu, same elements) stays visible - it is the standard header pinned in place

Because the sticky header reuses your normal header, everything you configure elsewhere (Menu Layout, Header Style, Header Elements) carries over automatically.

The sticky header applies across screen sizes when enabled. The header collapses to the hamburger menu below your Hamburger Menu Breakpoint (#mobile-header-bxpro)), and that collapsed header is what stays pinned on mobile.

Recommended Use by Site Type

Site Type	Suggestion
E-commerce / Community	Enable - keeps navigation and account access one tap away while browsing
Blog / Magazine	Enable - readers can navigate without scrolling back to the top
Landing pages	Optional - disable if you want the header to scroll away and keep focus on the content

Performance Notes

The sticky header is CSS-driven and lightweight. To keep scrolling smooth:

Tip	Benefit
Use an optimized logo	SVG or a compressed PNG keeps the header light
Keep the menu reasonable	Very long menus render more markup in the pinned header
Test on mobile	Confirm smooth scrolling on real devices

Common Questions

Will the sticky header affect my SEO? No. Sticky headers do not impact search rankings. They improve user experience, which can indirectly help.

Does the sticky header use a different logo or menu? No. It reuses your standard header - same logo, same menu, same elements. Showing a different logo or menu when pinned requires custom development.

Can I disable it on certain pages? The Customizer control is site-wide. Per-page control requires custom code that removes the sticky-header body class conditionally.

Why is the toggle on by default? BuddyX Pro enables the sticky header by default so navigation stays accessible out of the box. Set it to No if you prefer the header to scroll away.

Header Layout Styles - Main header configuration
Header Elements - Elements in your header
Mobile Header - Hamburger menu breakpoint
Topbar Settings - The bar above the main header

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Sub-Header & Breadcrumbs

The sub-header area appears below your main header and typically displays the page title and breadcrumb navigation. This helps visitors understand where they are on your site and how to navigate back.

Sub-Header Settings Sub-header and breadcrumb configuration in the Site Sub Header section

What You Can Do

With BuddyX Pro's sub-header settings, you can:

Show or hide the sub-header area
Show or hide the page/archive title inside it
Give the sub-header its own background image
Set the sub-header text typography
Show or hide the breadcrumb trail

Understanding the Sub-Header

The sub-header is the horizontal bar between your main navigation and your page content:

┌─────────────────────────────────────────────────┐
│ [Logo]          Main Navigation Menu            │  ← Header
├─────────────────────────────────────────────────┤
│        Home > About Us > Our Team               │  ← Breadcrumbs
│              Our Team                           │  ← Page Title
│    (optional background image)                  │
├─────────────────────────────────────────────────┤
│                  Page Content                   │

Enabling the Sub-Header

Go to Appearance > Customize
Open the Site Sub Header section
Set Display Sub Header? to Yes
Configure the controls below
Click Publish

Sub-Header Controls at a Glance

BuddyX Pro ships these exact controls in the Site Sub Header section:

Control	Setting ID	What It Does	Default
Display Sub Header?	`site_sub_header_visibility`	Shows or hides the whole sub-header area	On
Display Sub Header Title?	`site_sub_header_title_visibility`	Shows or hides the page/archive title inside the sub-header	On
Customize Background ?	`site_sub_header_bg`	Toggles the background editor below on	No
Background Control	`sub_header_background_setting`	Sets the sub-header background image, repeat, position, size, and attachment (appears only when Customize Background is Yes)	No image
Content Typography	`site_sub_header_typography`	Font family, size, line height, letter spacing, transform, and decoration for the sub-header text and title	Theme default
Site Breadcrumbs?	`site_breadcrumbs`	Shows or hides the breadcrumb trail	On

The Background Control stays hidden until you switch Customize Background to Yes, so the sub-header uses your theme colors by default.

Page Title

Use Display Sub Header Title? (site_sub_header_title_visibility) to show or hide the page or archive title inside the sub-header. There is no separate position or size control - the title inherits its placement from the sub-header layout and its font from the Content Typography control below.

Content Typography

Content Typography (site_sub_header_typography) styles the sub-header text and title together. It exposes the standard typography fields:

Field	Purpose
Font Family	Google Font or system font for the sub-header text
Variant / Weight	Thickness of the text
Font Size	Size of the text (px recommended)
Line Height	Space between lines
Letter Spacing	Space between characters
Text Transform	none, uppercase, lowercase, capitalize
Text Decoration	none, underline

Tip: set the font size in pixels (px) for predictable results.

Breadcrumbs

Breadcrumbs show the path from the homepage to the current page. Use Site Breadcrumbs? (site_breadcrumbs) to show or hide the trail.

Example: Home > Products > Electronics > Smartphones

What Breadcrumbs Show

Page Type	Breadcrumb Example
Blog Post	Home > Blog > Category > Post Title
Product Page	Home > Shop > Category > Product Name
Archive Page	Home > Category Name
Custom Page	Home > Parent Page > Current Page

Background

Switch Customize Background ? (site_sub_header_bg) to Yes to reveal the Background Control (sub_header_background_setting). It applies to the .site-sub-header element and exposes these fields:

Field	Description	Default
Background Image	Upload the sub-header background image	None
Repeat	How the image tiles	repeat
Position	Image anchor point	center center
Size	cover, contain, or auto	cover
Attachment	scroll or fixed	scroll

Tip: if you place light text over a busy image, choose an image with enough contrast, or keep the sub-header text dark against a light image.

Sub-Header Colors

The sub-header background color and title color are not in the Sub Header section - they live under Appearance > Customize > Site Skin, where each has a light and a dark-mode variant (for example site_subheader_bg_color / dark_site_subheader_bg_color and subheader_title_color / dark_subheader_title_color). Use the Customize Background control here for an image; use Site Skin for solid colors.

Recommended Setups by Site Type

Corporate Website

Display Sub Header: Yes
Display Sub Header Title: Yes
Customize Background: Yes (solid brand image or Site Skin color)
Breadcrumbs: Yes

Why: professional appearance with clear navigation and consistent branding across pages.

Blog / Magazine

Display Sub Header: Yes
Display Sub Header Title: Yes
Customize Background: Yes (feature image)
Breadcrumbs: Optional

Why: the title becomes a hero element for each post.

Community Platform

Display Sub Header: Yes
Display Sub Header Title: Yes
Customize Background: No (use Site Skin color)
Breadcrumbs: Yes

Why: quick orientation for members moving between profiles, groups, and activity.

Portfolio Site

Display Sub Header: Yes
Display Sub Header Title: Yes
Customize Background: No
Breadcrumbs: No

Why: a clean, minimal sub-header lets portfolio work take center stage.

Mobile Display

On mobile devices the sub-header scales down: the title uses a smaller font and may wrap, and long breadcrumb trails may be truncated. Keep page titles concise for the best mobile display.

Common Questions

Should I show breadcrumbs? Yes, if your site has multiple levels of navigation. They help visitors and can help SEO.

Can I hide the whole sub-header? Yes. Set Display Sub Header? to No.

Can I hide just the title but keep breadcrumbs? Yes. Set Display Sub Header Title? to No and leave Site Breadcrumbs? on.

How do I set a background color instead of an image? Use the sub-header color controls under Appearance > Customize > Site Skin. The Customize Background control here is for images.

Header Layout Styles - Main header above the sub-header
Topbar Settings - Bar above the main header
Blog Settings - Post title display
Site Layout - Overall layout options

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

The topbar is an optional horizontal bar that appears above your main header. It's perfect for displaying contact information, social links, announcements, or secondary navigation.

Site Top Bar Settings Topbar settings showing contact information on the left and social media icons on the right

What You Can Do

With BuddyX Pro's topbar, you can:

Display important contact details (phone, email) in the left text/HTML area
Show social media icons on the right via the Social Links repeater
Display a short announcement or promotional line in the left area
Customize colors to match your brand (via Site Skin)

Go to Appearance > Customize
Open the Site Top Bar section
Switch Enable Top Bar ? to Yes
Click Publish

You'll see a new bar appear above your main header.

Once the topbar is on, BuddyX Pro gives you these exact controls in the Site Top Bar section:

Control	Setting ID	What It Does	Default
Enable Top Bar ?	`site_topbar_enable`	Turns the topbar on or off	No
Edit Left Content ?	`site_topbar_left_edit`	Reveals the left content editor so you can replace the default contact line (appears only when the topbar is on)	No
Left Content Area	`site_topbar_left_area`	A text/HTML field for the left side (phone, email, short message); appears only when Edit Left Content is Yes	Phone + email sample
Social Links	`topbar_social_links`	A repeater for the social icons shown on the right side (appears only when the topbar is on)	Preset sample links

That is the complete set of topbar controls. The left side is a single free-form text/HTML field and the right side is the social-links repeater - there is no left/right content-type selector, and no topbar menu location.

Left Content Area

Switch Edit Left Content to Yes to unlock the Left Content Area field. It accepts text and HTML, including FontAwesome icon markup and links. The default value is a phone-and-email line you can edit or clear:

<i class="fas fa-phone-alt"></i> 011 322 44 56 | <i class="fas fa-envelope"></i> <a href="mailto:mail@example.com">mail@example.com</a>

Tips:

Keep it to one short line - topbar height is limited.
Use the pipe character (|) to separate items.

The Social Links repeater controls the icons on the right side of the topbar. Click Add to create a row, and fill in three fields per link:

Field	Purpose	Example
Title	Label used for the row and the link's accessible name	Facebook
Icon	FontAwesome markup for the icon	`<i class="fab fa-facebook-f"></i>`
Link	The full profile URL	`https://facebook.com/yourpage`

Add as many rows as you need, and drag rows to reorder them. Icon markup uses FontAwesome classes - browse there to find the exact class for any network.

How the Two Sides Work

The topbar has two fixed sides:

Left side: the Left Content Area free-form text/HTML field (phone, email, a short message). Enable Edit Left Content to edit it.
Right side: the Social Links repeater (icons that link to your profiles).

There is no per-side "content type" picker - the left side is always the text field and the right side is always the social-links repeater.

Adding Contact Information

To display your phone number or email on the left:

With the topbar on, set Edit Left Content ? to Yes

Enter your information in the Left Content Area field. It accepts text, HTML, links, and FontAwesome icon markup:

<i class="fas fa-phone-alt"></i> (555) 123-4567 | <i class="fas fa-envelope"></i> <a href="mailto:hello@yoursite.com">hello@yoursite.com</a>

Click Publish

Tips:

Keep it short - topbar space is limited
Include only essential contact methods
Use the pipe character (|) to separate items

To display social media links on the right:

With the topbar on, find the Social Links repeater
Click Add to create a row, then fill in Title, Icon (FontAwesome markup), and Link (profile URL)
Repeat for each network, and drag rows to reorder
Click Publish

Only the rows you add will appear.

The topbar color controls are not in the Site Top Bar section - they live under Appearance > Customize > Site Skin, each with a light and a dark-mode variant.

Setting	Setting ID (light / dark)	What It Controls
Background Color	`topbar_background_color` / `dark_topbar_background_color`	The topbar background
Text Color	`topbar_content_color` / `dark_topbar_content_color`	Regular text and icons
Link Color	`topbar_links_color` / `dark_topbar_links_color`	Clickable links
Link Hover Color	`topbar_links_hover_color` / `dark_topbar_links_hover_color`	Links when hovered

Recommended Color Combinations

Professional/Corporate:

Background: Dark gray (#333333)
Text: White (#ffffff)
Creates a strong contrast with a light header below

Friendly/Approachable:

Background: Your primary brand color
Text: White (#ffffff)
Adds a pop of color to the top

Subtle/Minimal:

Background: Light gray (#f5f5f5)
Text: Dark gray (#666666)
Blends gently with the page

Announcement/Sale:

Background: Bright color (red, orange)
Text: White
Draws attention to promotions

Recommended Setups by Site Type

Remember: the left side is the text/HTML field and the right side is the social-links repeater. Colors are set in Site Skin.

Business/Corporate Site

Left Content Area: "(555) 123-4567 | Mon-Fri 9am-5pm"
Social Links: LinkedIn, Twitter
Colors (Site Skin): dark background, white text

Community Platform

Left Content Area: "Need help? support@yoursite.com"
Social Links: all your community platforms
Colors (Site Skin): primary brand background, white text

E-Commerce Store

Left Content Area: "Free shipping on orders over $50!"
Social Links: Facebook, Instagram
Colors (Site Skin): attention red or brand background, white text

Blog/Magazine

Left Content Area: "New posts every week - follow along"
Social Links: Twitter, Instagram, RSS
Colors (Site Skin): light gray background, dark gray text

Online Course Platform

Left Content Area: "10,000+ students enrolled"
Social Links: YouTube, LinkedIn
Colors (Site Skin): green background, white text

Mobile Display

When enabled, the topbar shows across screen sizes, including mobile, and its content reflows to fit. There is no dedicated "hide on mobile" toggle - if you want to hide it on small screens, add a Custom CSS rule such as:

@media (max-width: 768px) {
    .top-bar { display: none; }
}

Tip: keep the left content line short so it does not wrap awkwardly on narrow screens.

What It Looks Like

┌─────────────────────────────────────────────────┐
│ 📞 (555) 123-4567     [Facebook] [Twitter] [IG] │  ← Topbar
├─────────────────────────────────────────────────┤
│ [Logo]              Home  About  Services  Blog │  ← Main Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │

┌─────────────────────────────────────────────────┐
│ [Logo]              Home  About  Services  Blog │  ← Main Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │

Common Questions

Should I use a topbar? Use it if you have important secondary information. Skip it for cleaner, minimal designs.

Can I show different content on mobile? The topbar shows the same content on all screen sizes. You can hide it on mobile with a Custom CSS media query (see Mobile Display above).

Can I add HTML to the text fields? Yes, you can add links and basic HTML formatting.

Will the topbar affect my sticky header? The sticky header scrolls independently; the topbar stays at the top or scrolls away.

Header Layout Styles - Main header options
Header Elements - Icons and search in header
Site Identity - Logo settings

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Header Presets

BuddyX Pro ships five ready-made header presets so you can set your header's visual personality with a single click. A preset is a style choice - it decides how the header looks (solid bar, transparent overlay, frosted glass, and so on), while your menu arrangement and header icons stay exactly where you put them. Pick a preset first to set the overall feel, then fine-tune the individual controls underneath.

Site Header Panel The Site Header section in the WordPress Customizer, where the Header Style presets live at the top.

Where Presets Fit

BuddyX Pro splits the header into two independent choices so they stop overlapping:

Choice	Control	What it does
Header Style	Header presets (this page)	The header's visual personality - background, shadow, blur, height
Menu Layout	Header Layouts	Where the logo and menu sit inside the header

You set them separately. A Glass style with a Logo Center, Menu Below layout is a perfectly valid combination, and so is any other pairing. The preset never moves your menu, and the layout never changes your background.

Applying a Preset

Go to Appearance > Customize
Navigate to Header > Site Header
Find Header Style at the top of the section
Click the preset card you want - the live preview updates so you can compare
Click Publish

That is the whole flow. One click sets the header style site-wide, and the preview shows the result before you commit.

The Five Presets

Each card carries a short description in the Customizer so you can pick without guessing. Here is what each one does.

Default

The standard Pro header. Solid background with a soft shadow that appears on scroll. This is the baseline every existing site already uses, so choosing it (or leaving it) keeps your header rendering exactly as before.

Best for: most community, business, and membership sites that want the familiar BuddyX Pro look.

Solid

A flat colored bar with a 1px bottom border and no shadow. Cleaner and more grounded than Default, with a brand-color underline instead of a drop shadow.

Best for: sites that prefer a crisp, flat header without depth effects.

Transparent

The header sits over the hero or page cover with no background fill, letting the image or color behind it show through.

Best for: landing pages and any page that opens with a cover image. Pair this with a per-page override (below) so the transparent header applies only where you have a hero to sit over.

Minimal

A thin, compact bar with a 1px divider and no shadow. Trims the header height so more of the page shows above the fold.

Best for: editorial, blog, and magazine-style sites where the content should lead and the header should stay quiet.

Glass

A frosted-glass effect - a backdrop blur behind a semi-transparent fill. Content scrolling underneath is softly visible through the header.

Best for: modern, image-rich sites that want a contemporary, layered feel.

Preset Comparison

Preset	Background	Shadow / Border	Height	Best For
Default	Solid	Soft shadow on scroll	Standard	General / community
Solid	Solid flat	1px bottom border	Standard	Flat, crisp designs
Transparent	None (overlay)	None	Standard	Hero / cover pages
Minimal	Solid	1px divider	Thin	Editorial / blogs
Glass	Semi-transparent + blur	None	Standard	Modern, image-rich

Customizing After You Pick

A preset is a starting point, not a lock-in. Once a style is applied, every other Site Header control still works normally on top of it:

Menu Layout - reposition the logo and menu. See Header Layouts.
Header icons and elements - toggle search, cart, notifications, messages, login, and register. See Header Elements.
Sticky Header - keep the header fixed on scroll. See Sticky Header.
Colors and dark mode - the preset respects your theme colors and switches cleanly between light and dark, so a Glass or Solid header recolors automatically when a visitor flips the dark-mode toggle.

Change the preset any time - your menu, icons, and other header settings are untouched when you switch styles.

Overriding the Preset on a Single Page

The Header Style you choose in the Customizer is the site-wide default, but you can override it for one specific entry - handy when you want a Transparent header only on a landing page that has a hero image.

Edit the page or post
Open the Page Settings panel
Go to the Header & Footer tab
Set Header style to the preset you want for this entry (leave it on Default to inherit the site-wide choice)
Update the page

The per-entry choice wins on that page only. Everywhere else keeps the Customizer setting.

Tip: Transparent headers look best over a full-width cover image. Set the page-level Header style to Transparent, add your hero, and leave the rest of the site on your standard preset.

Notes for Upgraders

If you are upgrading an existing BuddyX Pro site, the Default preset is already selected, so your header renders exactly as it did before. Presets are additive - nothing about your current header changes until you choose a different card.

Header Layouts - Position the logo and menu
Header Elements & Icons - Configure header icons and buttons
Sticky Header - Fixed header on scroll
Mobile Header - Mobile-specific header behavior
Topbar Settings - The bar above the header

Need a hand? Our team is happy to help - email us at support@wbcomdesigns.com.

Footer Settings

Footer widgets, copyright, credits, and footer layout.

Copyright & Credits Settings Guide

Complete guide to customizing your website's copyright text, credits, and bottom footer bar in BuddyX Pro theme.

Footer Copyright Settings Copyright and credits configuration in the Customizer

What You Can Do

The copyright section appears below your footer widgets and typically displays:

Copyright notice with automatic year
Website name or company name
Theme or developer credits
Privacy policy link (optional, on by default)
Additional legal text or disclaimers

┌────────────────────────────────────────┐
│  [Footer Widgets - See Footer Guide]  │
├────────────────────────────────────────┤
│ Copyright © 2026 YourSite.com          │ ← Copyright Bar
│ Powered by Wbcom Designs               │   (This Guide)
│ Privacy Policy                         │
└────────────────────────────────────────┘

Accessing Copyright Settings

Log into your WordPress dashboard
Go to Appearance → Customize
Open the Site Footer panel, then click the Copyright Section
Edit the copyright text in the content field

Copyright Text Editor

Default Copyright Text

The default format is:

Copyright © [current_year]. All rights reserved by [site_title] | Powered by [theme_author]

This automatically displays as:

Copyright © 2026. All rights reserved by Your Site Name | Powered by Wbcom Designs

Available Shortcodes

Use these special codes in your copyright text. They automatically update with your site information:

Shortcode	What It Does	Example Output
`[current_year]`	Current year (updates automatically)	2026
`[site_title]`	Your website name (from Settings → General)	"My Awesome Site"
`[theme_author]`	Theme developer credit	"Wbcom Designs"

Shortcode Example:

© [current_year] [site_title]. All rights reserved.

Displays as:

© 2026 My Awesome Site. All rights reserved.

Customizing Copyright Text

Example 1: Simple Copyright

Input:

Copyright © [current_year] [site_title]

Output:

Copyright © 2026 My Business Name

Example 2: With Ownership Statement

Input:

© [current_year] [site_title]. All Rights Reserved. | Powered by [theme_author]

Output:

© 2026 My Site. All Rights Reserved. | Powered by Wbcom Designs

Example 3: Multiple Rights Holders

Input:

Copyright © [current_year] [site_title] and Contributors. Some rights reserved.

Output:

Copyright © 2026 Community Site and Contributors. Some rights reserved.

Example 4: Business with Legal Entity

Input:

© [current_year] YourCompany LLC. All rights reserved. Company Reg. #12345678

Output:

© 2026 YourCompany LLC. All rights reserved. Company Reg. #12345678

Example 5: Creative Commons License

Input:

© [current_year] [site_title]. Content licensed under CC BY-SA 4.0

Output:

© 2026 My Blog. Content licensed under CC BY-SA 4.0

Example 6: No Theme Credit

Input:

© [current_year] [site_title]. All rights reserved.

Output:

© 2026 My Site. All rights reserved.

Example 7: Multilingual Copyright

Input:

© [current_year] [site_title] | Tous droits réservés

Output:

© 2026 Mon Site | Tous droits réservés

Adding Custom Links

You can add HTML links to your copyright text for:

Terms of Service
About page
Contact page
Social media profiles

Link Examples

Add a link to Terms:

© [current_year] [site_title]. <a href="/terms">Terms of Service</a>

Multiple links:

© [current_year] [site_title] | <a href="/about">About</a> | <a href="/contact">Contact</a>

External link (opens in new tab):

© [current_year] [site_title] | Design by <a href="https://example.com" target="_blank">DesignCo</a>

Privacy Policy Link

WordPress adds a privacy policy link below your copyright text if you've set one in: Settings → Privacy → Privacy Policy Page

The link only appears when that page exists and is published. A page left in draft shows nothing.

To show or hide the link (BuddyX Pro 5.1.6 and later):

Go to Appearance → Customize → Site Footer → Copyright Section
Toggle Show Privacy Policy Link
Click Publish

The toggle is on by default, so sites upgrading from an earlier version keep the link they already had.

Don't unset your privacy page just to hide the link. Before 5.1.6 that was the only way, but the page selected under Settings → Privacy also powers WordPress's data export and erasure requests. Clearing it to change your footer disables those tools too. Use the toggle instead.

Recommended Copyright Text by Site Type

Corporate / Business Site

Copyright © [current_year] [site_title]. All rights reserved. | <a href="/terms">Terms</a> | <a href="/privacy">Privacy</a>

Why: Professional, includes legal links, establishes ownership.

E-commerce Store

© [current_year] [site_title]. All product names and trademarks are property of their respective owners.

Why: Protects against trademark issues, covers product listings.

Blog / Personal Website

© [current_year] [site_title]. Content licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>

Why: Encourages content sharing while maintaining attribution.

Community Site (BuddyPress)

© [current_year] [site_title] Community. User-generated content belongs to respective authors.

Why: Clarifies ownership of user posts and community content.

Educational / Course Site

© [current_year] [site_title]. Course materials and content are protected by copyright law.

Why: Protects educational materials from unauthorized distribution.

Nonprofit Organization

© [current_year] [site_title]. Registered 501(c)(3) nonprofit organization.

Why: Shows legal status and builds credibility.

Portfolio / Creative Work

© [current_year] [site_title]. All creative work and imagery are protected by copyright.

Why: Protects artwork and photography from unauthorized use.

News / Magazine Site

© [current_year] [site_title]. All articles and content are copyright protected.

Why: Protects journalistic content and published articles.

Styling the Copyright Bar

The copyright text appearance is controlled through color settings:

Accessing Color Settings

Go to Appearance → Customize → Skin Settings
Scroll to Site Footer section
Adjust these color options:

Setting	What It Controls	Light Mode Default	Dark Mode Default
Footer Background Color	Copyright bar background	#ffffff (white)	#16213E (dark blue)
Footer Content Color	Main copyright text color	#505050 (gray)	#bfc2c9 (light gray)
Footer Links Color	Link text color	#003049 (blue)	#fcfcfc (white)
Footer Links Hover Color	Link color on mouseover	#ee4036 (red)	#E94560 (pink)

Color Customization Tips

High Contrast:

Dark background (#1a1a1a) with light text (#ffffff)
Light background (#f5f5f5) with dark text (#333333)

Brand Colors:

Match your header or primary brand color
Use 80% opacity for subtle effect

Accessibility:

Maintain 4.5:1 contrast ratio minimum
Test with a contrast checker tool
Ensure links are distinguishable from regular text

Advanced Customization with HTML

You can use basic HTML in your copyright text:

Formatting Options

Bold text:

<strong>Important Notice:</strong> © [current_year] [site_title]

Italic text:

© [current_year] [site_title]. <em>All rights reserved.</em>

Line breaks:

© [current_year] [site_title]<br>123 Business St, City, State 12345

Span with class (for custom CSS):

© [current_year] <span class="company-name">[site_title]</span>

Complex Example

<strong>© [current_year] [site_title]</strong><br>
All rights reserved. | <a href="/terms">Terms</a> | <a href="/privacy">Privacy</a><br>
Design by <a href="https://example.com" target="_blank">YourAgency</a>

Mobile Display

The copyright section automatically adapts for mobile:

Text scales for readability
Links remain tap-friendly (44px minimum)
Line breaks stack naturally
Colors remain consistent

Mobile Testing Checklist:

Copyright text doesn't overflow
Links are easily tappable
Text is readable at small sizes
Background color is appropriate
Privacy policy link is accessible

Common Questions

Q: How do I remove "Powered by Wbcom Designs"?

A: Edit your copyright text and remove the [theme_author] shortcode. Replace the entire text with your custom message.

Example:

© [current_year] [site_title]. All rights reserved.

Q: The year isn't updating automatically.

A: Make sure you're using the [current_year] shortcode, not typing the year manually. The shortcode updates automatically each January.

Q: Can I use an image/logo in the copyright section?

A: Yes! Use an HTML image tag:

<img src="https://yoursite.com/logo.webp" alt="Company Logo" style="height:30px;"> © [current_year] [site_title]

Q: How do I add special characters like ©, ™, or ®?

A: Use HTML entities or copy/paste the symbols:

Copyright: © or ©
Trademark: ™ or ™
Registered: ® or ®

Example:

[site_title]® is a registered trademark. © [current_year]

Q: My custom HTML isn't displaying correctly.

A: WordPress may strip certain HTML tags for security. Stick to these safe tags:

<a> - Links
<strong> / <b> - Bold
<em> / <i> - Italic
<span> - Inline styling
<br> - Line breaks

Q: Can I have different copyright text for different languages?

A: Yes! Use a multilingual plugin like:

WPML
Polylang
TranslatePress

The copyright text will translate along with your site content.

Q: How do I center-align the copyright text?

A: Add custom CSS in Appearance → Customize → Additional CSS:

.site-info {
    text-align: center;
}

Q: The copyright bar is too tall/short.

A: Adjust padding with custom CSS:

.site-info {
    padding: 20px 0; /* Adjust values */
}

A: Yes! Use Font Awesome icons or image links:

© [current_year] [site_title] | Follow us:
<a href="https://facebook.com/yourpage"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/yourhandle"><i class="fab fa-twitter"></i></a>

Legal Considerations

Important: This guide provides technical instructions only. Consult a legal professional for copyright law advice.

Standard Copyright Notice Elements

A basic copyright notice typically includes:

© symbol - Or the word "Copyright"
Year - Year of first publication (use [current_year])
Owner - Copyright owner name (use [site_title])
Rights statement - "All rights reserved" or similar

Example:

© 2026 YourCompany Inc. All rights reserved.

Additional Legal Elements to Consider

Trademark notices - For branded terms (™, ®)
License information - For open or Creative Commons content
Disclaimer - Limiting liability when appropriate
Terms link - Link to Terms of Service
Privacy link - WordPress adds this automatically

Content Types Needing Special Copyright Language

User-Generated Content (Forums, Communities):

© [current_year] [site_title]. User-contributed content belongs to the respective authors.

Licensed Content:

© [current_year] [site_title]. Content licensed under CC BY-NC-SA 4.0 unless otherwise noted.

Mixed Ownership:

© [current_year] [site_title]. Some content used with permission from third parties.

Accessibility Best Practices

Readable text size: Minimum 14px font size
Color contrast: At least 4.5:1 ratio for normal text
Link indication: Links should be visually distinct
Keyboard navigation: All links accessible via Tab key
Screen readers: Use semantic HTML and descriptive link text

Good link text:

<a href="/privacy">Privacy Policy</a>

Avoid:

<a href="/privacy">Click here</a> for our privacy policy

Performance Notes

The copyright section has minimal performance impact:

Text content is lightweight
Colors are CSS-based (no images needed)
Shortcodes process server-side (no JavaScript)
Cached along with page content

For best performance:

Keep copyright text under 500 characters
Minimize external links
Avoid embedding large images
Don't add tracking scripts

Connect your copyright customization with these theme areas:

Footer Widget Settings - Configure footer columns above copyright
Skin Settings → Site Footer Colors - Customize copyright bar colors
Typography → Footer Typography - Adjust copyright text fonts
Settings → Privacy - Set privacy policy page (displays below copyright)
Settings → General → Site Title - Updates [site_title] shortcode

Need Help?

Getting Started:

View copyright setup video tutorial (if available)
Read the BuddyX Pro documentation

Legal Questions:

Consult with a legal professional for copyright law advice
Check your country's copyright office website
Review Creative Commons licensing options at creativecommons.org

Technical Support:

Submit a support ticket: support@wbcomdesigns.com
Community forum: BuddyX Support Forum
Knowledge base: BuddyX Help Center

Before contacting support:

Clear browser cache and view in incognito/private mode
Verify you're editing the correct customizer field
Check if shortcodes are spelled correctly
Test with minimal HTML first
Take screenshots of your settings and output

Last Updated: January 2026 Theme Version: BuddyX Pro 5.1.4+ Applies To: Site Footer → Copyright Section in the theme Customizer Related Files: template-parts/footer-settings/info.php, inc/extra.php

Complete guide to configuring your website's footer widget areas and design in BuddyX Pro theme.

The Site Footer panel in the WordPress Customizer showing widget columns and background options

What You Can Do

Your footer is divided into widget columns where you can add useful content like:

Contact information and business hours
Navigation menus and quick links
Newsletter signup forms
Social media feeds
Recent posts or popular content
Business logo and description
Testimonials or awards

Log into your WordPress dashboard
Go to Appearance → Customize
Click Site Footer in the customizer panel
The footer preview will update as you make changes

BuddyX Pro provides 4 flexible footer columns (Footer 1, Footer 2, Footer 3, Footer 4). The layout automatically adapts based on how many columns contain widgets.

Layout Behavior

1 Column Active:          2 Columns Active:
┌─────────────────────┐   ┌──────────┬──────────┐
│     Footer 1        │   │ Footer 1 │ Footer 2 │
│   (Full Width)      │   │ (50% ea) │ (50% ea) │
└─────────────────────┘   └──────────┴──────────┘

3 Columns Active:         4 Columns Active:
┌──────┬──────┬──────┐   ┌─────┬─────┬─────┬─────┐
│Foot 1│Foot 2│Foot 3│   │Ft 1 │Ft 2 │Ft 3 │Ft 4 │
│(33%) │(33%) │(33%) │   │(25%)│(25%)│(25%)│(25%)│
└──────┴──────┴──────┘   └─────┴─────┴─────┴─────┘

In the customizer, click Widgets
Select one of the footer widget areas:
- Footer 1 - First column (left side)
- Footer 2 - Second column
- Footer 3 - Third column
- Footer 4 - Fourth column (right side)
Click Add a Widget and choose from available widgets
Configure the widget settings
Click Publish to save changes

To hide a footer column, simply remove all widgets from that footer area. Empty columns won't display on your site.

You can customize your footer's appearance with background colors, images, or gradients.

Enabling Background Customization

In Appearance → Customize → Site Footer
Find Customize Background? toggle
Switch to Yes to reveal background options

Background Options

Option	What It Does	Best For
Background Color	Solid color fill	Clean, professional look
Background Image	Custom image or pattern	Branded, textured appearance
Background Repeat	How image tiles	Patterns and textures
Background Position	Image placement	Large photos or graphics
Background Size	Image scaling	Full-width photos (use "Cover")
Background Attachment	Scroll or fixed	Parallax effects (use "Fixed")

Background Tips

For solid colors:

Use your brand colors for consistency
Dark backgrounds work well with light text
Light backgrounds need dark text for readability

For images:

Use subtle patterns or textures
Keep file size under 200KB for performance
Ensure text remains readable over the image
Test on mobile devices

For transparency:

Use RGBA colors for semi-transparent backgrounds
Example: rgba(0, 0, 0, 0.8) for 80% black

Recommended Setups by Site Type

Corporate / Business Site

Layout: 4 columns

Suggested Content:

Footer 1: Company logo + brief description
Footer 2: Quick links (About, Services, Contact)
Footer 3: Contact information (phone, email, address)
Footer 4: Newsletter signup form

Background: Solid dark color (e.g., navy, charcoal) with light text

E-commerce Store

Layout: 3 columns

Suggested Content:

Footer 1: Customer service links (Shipping, Returns, FAQ)
Footer 2: Product categories navigation
Footer 3: Contact info + payment methods accepted

Background: Light neutral color matching your brand

Blog / Magazine

Layout: 3 columns

Suggested Content:

Footer 1: Recent posts widget
Footer 2: Categories or tag cloud
Footer 3: Social media links + email subscription

Background: Subtle pattern or texture image

Community Site (BuddyPress)

Layout: 4 columns

Suggested Content:

Footer 1: About the community
Footer 2: Community guidelines link + rules
Footer 3: Recent activity or members
Footer 4: Social connections

Background: Brand color with slight transparency

Portfolio Site

Layout: 2 columns

Suggested Content:

Footer 1: Professional bio or tagline
Footer 2: Social media links + contact button

Background: Minimal - solid color or none

Educational / Course Site (LearnDash)

Layout: 3 columns

Suggested Content:

Footer 1: Course categories or featured courses
Footer 2: Student resources (Support, FAQ, Login)
Footer 3: Contact information + social proof

Background: Professional color matching course branding

The footer automatically adapts for mobile devices:

All columns stack vertically on small screens
Widgets reorder from top to bottom (Footer 1 → Footer 4)
Background images scale appropriately
Text remains readable on all devices

Mobile Testing:

Use the mobile preview in the customizer (bottom toolbar)
Check that widget content isn't too wide
Ensure buttons and links are tap-friendly
Verify background images don't obscure text

Common Questions

A: Use 3-4 columns for content-rich sites, 2 columns for simpler sites. More than 4 columns can look cluttered, especially on tablets.

A: Change the Background Size setting to Cover. This scales the image proportionally to fill the area without stretching.

A: The footer layout is site-wide. However, you can use conditional widget plugins to show/hide specific widgets on certain pages.

Q: The footer text is hard to read over my background image.

A: Try these solutions:

Use a darker/lighter image
Add a semi-transparent color overlay
Adjust text colors in the Copyright settings
Choose a simpler background pattern

A: Yes! Add a Custom HTML widget to any footer column and insert your HTML code.

A: Check these points:

Widgets are added to the correct footer area (Footer 1-4)
The footer section isn't disabled by another plugin
Your page template supports the footer
Cache is cleared if using a caching plugin

A: Use the Navigation Menu widget:

Add widget to desired footer column
Select your footer menu
Configure display options
Save changes

A: Yes! BuddyX Pro supports Elementor's footer builder:

Create a footer template in Elementor
Set it as the footer location
The widget areas will be replaced by your Elementor footer

A: Column widths are responsive:

1 column: 100% width
2 columns: 50% each
3 columns: 33.33% each
4 columns: 25% each
Mobile: All columns are 100% width (stacked)

Performance Tips

Limit widgets: 8-12 widgets total across all columns is optimal
Optimize images: Compress footer background images before uploading
Minimize scripts: Some widgets add JavaScript - use sparingly
Cache-friendly: Static content performs better than dynamic feeds
Mobile-first: Test footer on mobile devices for speed

Accessibility Considerations

Ensure sufficient color contrast for text readability
Use descriptive widget titles for screen readers
Make sure all links are keyboard accessible
Avoid auto-playing media in footer widgets
Test footer navigation with keyboard only (Tab key)

Visual Hierarchy:

Most important content in Footer 1 (left side)
Contact info typically in Footer 3 or Footer 4 (right side)
Keep related content grouped together

Content Guidelines:

Keep widget titles short and descriptive
Use bullet lists for easy scanning
Include only essential information
Update copyright year annually (see Copyright Settings)

Branding:

Match footer colors to your overall site design
Use consistent fonts and spacing
Include your logo or brand mark
Maintain visual balance across columns

After configuring your footer layout, customize these related areas:

Copyright & Credits Settings - Customize the copyright text and bottom bar
Skin Settings → Site Footer Colors - Adjust footer text and link colors
Typography → Footer Typography - Change footer font sizes and styles
Widgets - Add and configure individual footer widgets
Site Layout → Container Width - Adjust footer content width

Need Help?

Getting Started:

View our video tutorial (if available)
Check the BuddyX Pro documentation

Support Resources:

Submit a support ticket: support@wbcomdesigns.com
Community forum: BuddyX Support Forum
Knowledge base: BuddyX Help Center

Before contacting support:

Clear your browser cache and site cache
Test with all plugins disabled
Check if the issue appears with default WordPress widgets
Take screenshots showing the problem

Last Updated: January 2026 Theme Version: BuddyX Pro 4.8.9+ Applies To: Footer widget configuration and background settings

Sidebar Settings

Sidebar layouts, areas, and the side panel.

Learn how to add and manage widgets in your BuddyX Pro theme's sidebar areas. Widget areas let you display additional content like search boxes, recent posts, custom menus, and more alongside your main content.

Widget Areas Settings Widget area management in WordPress

Widget areas (also called sidebars) are designated spaces where you can add widgets to display extra content. BuddyX Pro provides multiple widget areas to give you complete control over where content appears on your site.

What You Can Do

Add unlimited widgets to any widget area
Drag and drop to reorder widgets
Customize widget settings individually
Show different widgets for different plugins
Create custom content areas for specific page types
Display community-specific widgets in BuddyPress areas
Add e-commerce widgets to shop sidebars

BuddyX Pro automatically creates widget areas based on your active plugins. Here's what's available:

Available on all sites:

Widget Area	Where It Appears	Best For
Right Sidebar	Blog posts, pages, archives	Navigation, recent posts, search
Left Sidebar	Blog posts, pages, archives	Categories, tags, author info
Footer 1-4	Bottom of every page	Contact info, social links, menus

Only appears when BuddyPress is active:

Widget Area	Where It Appears	Best For
Community Left Sidebar	BuddyPress activity pages	Activity filters, shortcuts
Activity Directory Right Sidebar	Activity stream page	Online members, recent activity
Members Directory Right Sidebar	Members listing page	Member search, filters, groups
Groups Directory Right Sidebar	Groups listing page	Group categories, search
Members Single Profile Sidebar	Individual member profiles	Member stats, badges, actions
Members Single User Activity	Member activity tab	Activity filters, share buttons
Groups Single Group Sidebar	Individual group pages	Group info, member list
Groups Single Group Activity	Group activity tab	Group filters, notifications

Only appears when bbPress is active:

Widget Area	Where It Appears	Best For
bbPress Left Sidebar	Forum pages	Forum navigation, search
bbPress Right Sidebar	Forum pages	Recent topics, active users

Only appears when WooCommerce is active:

Widget Area	Where It Appears	Best For
WooCommerce Left Sidebar	Shop and product pages	Product filters, categories
WooCommerce Right Sidebar	Shop and product pages	Cart, featured products, deals
Off Canvas Sidebar	Slide-out panel (optional)	Mobile filters, quick cart

LearnDash (when active):

Widget Area	Where It Appears	Best For
LearnDash Left Sidebar	Course archives	Course filters, categories
LearnDash Right Sidebar	Course archives	Featured courses, instructors
LearnDash Course Sidebar	Individual course pages	Course navigation, progress
LearnDash Group Sidebar	Course group pages	Group info, enrollment

LearnPress (when active):

Widget Area	Where It Appears	Best For
LearnPress Left Sidebar	Course pages	Course categories, search
LearnPress Right Sidebar	Course pages	Course info, instructor bio

LifterLMS (when active):

Widget Area	Where It Appears	Best For
Course Archive Lift Sidebar	Course archive left side	Course filters, categories
Course Archive Right Sidebar	Course archive right side	Featured courses, testimonials

Only appears when FluentCart is active:

Widget Area	Where It Appears	Best For
Single Product Left Sidebar	Product pages	Related products, categories
Single Product Right Sidebar	Product pages	Cart widget, featured items

How to Add Widgets

Log in to your WordPress dashboard
Go to Appearance → Widgets
You'll see all available widget areas in the right column

Find the widget you want to add in the left column
Click on the widget name to expand it
Select the widget area from the dropdown
Click Add Widget

Alternatively:

Drag the widget from the left column
Drop it into the desired widget area on the right

Click the widget to expand its settings
Add a title (optional)
Configure widget-specific options
Click Save

Step 4: Reorder Widgets

Click and drag widgets within a widget area
Drop them in your preferred order
Widgets display from top to bottom

Community Site (BuddyPress)

Activity Directory Right Sidebar:

Who's Online widget
Recent Activity widget
Member search widget

Members Directory Right Sidebar:

Members Filter widget
Popular Groups widget
Site Statistics widget

Groups Directory Right Sidebar:

Group Categories widget
Group Search widget
Featured Groups widget

E-Commerce Site (WooCommerce)

WooCommerce Right Sidebar:

Product Categories widget
Recent Products widget
Cart widget
Featured Products widget

Off Canvas Sidebar (mobile):

Product Filters widget
Price Filter widget
Mini Cart widget

Online Course Site (LearnDash/LearnPress)

Course Sidebar:

Course Categories widget
Recent Courses widget
Instructors widget

Individual Course Pages:

Course Progress widget
Course Materials widget
Related Courses widget

Membership Site

Right Sidebar:

Login/Registration widget
Member Benefits widget
Recent Members widget
Membership Levels widget

Blog/Magazine

Right Sidebar:

Search widget
Categories widget
Recent Posts widget
Tag Cloud widget
Popular Posts widget

Forum Community (bbPress)

bbPress Right Sidebar:

Recent Topics widget
Forum Search widget
Topic Tags widget
Most Active Users widget

Working with Widgets

BuddyX Pro is compatible with all standard WordPress widgets:

Content Widgets:

Text/HTML
Image
Video
Audio
Gallery

Navigation Widgets:

Custom Menu
Pages
Categories
Archives

Interactive Widgets:

Search
Recent Comments
Tag Cloud

Plugin Widgets:

BuddyPress widgets (when BuddyPress is active)
WooCommerce widgets (when WooCommerce is active)
Contact Form 7 (when installed)
Social media widgets (when plugins installed)

You can add custom content to widget areas using:

Text Widget - HTML, text, shortcodes
HTML Widget - Custom code, embed scripts
Shortcode Widget - Plugin shortcodes
Custom Widgets - Created by plugins

If a widget area is empty:

It won't display on your site
The layout adjusts automatically
Content expands to fill available space

See the Sidebar Layouts guide for layout behavior.

Plugin-Specific Widgets

BuddyPress Widgets

When BuddyPress is active, you get:

Who's Online
Members
Groups
Recently Active Members
Friends (if Friends component is active)

WooCommerce Widgets

When WooCommerce is active, you get:

Product Categories
Product Search
Product Tags
Recent Products
Featured Products
On Sale Products
Top Rated Products
Recently Viewed Products
Cart
Filter Products by Price
Filter Products by Attribute

LearnDash Widgets

When LearnDash is active, you get:

Course Info
Course Navigation
Course Progress
Lesson Navigation

Hide Specific Widgets on Pages

You can control which widgets appear on specific pages:

Install a widget control plugin like "Widget Options" or "Jetpack"
These plugins add visibility controls to each widget
Set rules like:
- Show only on specific pages
- Hide on mobile devices
- Display for logged-in users only
- Show only on certain post types

See Sidebar Layouts for controlling which sidebars appear on specific pages and posts.

Mobile Considerations

Widgets automatically adjust for mobile:

Sidebars stack below main content on small screens
Widget width expands to full screen width
Some complex widgets may hide on mobile

Off Canvas Widgets (WooCommerce)

Enable the Off Canvas Sidebar for mobile-friendly filters:

Go to Appearance → Customize
Navigate to WooCommerce → Shop Layout
Enable Off Canvas Filter
Add widgets to the Off Canvas Sidebar widget area

The sidebar will slide out from the left when users tap a filter button.

Mobile-Specific Widgets

Some plugins offer mobile-specific widgets:

Sticky add-to-cart buttons
Mobile menu widgets
Mobile-only call buttons

Sticky Behavior

See the Sticky Sidebar guide for making widgets stay visible while scrolling.

Common Questions

How many widgets can I add to one area?

You can add unlimited widgets to any widget area. However, too many widgets may slow page load times. We recommend 3-5 widgets per sidebar for best performance.

Widget areas only appear when their associated plugin is active. For example:

BuddyPress widget areas require BuddyPress
WooCommerce widget areas require WooCommerce
LearnDash widget areas require LearnDash

Activate the plugin to see its widget areas.

Yes, but it requires code. You can:

Create a child theme
Add custom widget registration code
Use a plugin like "Custom Sidebars"

For code-free solutions, consider the Custom Sidebars plugin.

Why are my widgets not showing?

Check these common issues:

Widget area is empty - Add at least one widget
Sidebar layout is set to "None" - Change in Customizer → Sidebar Layout
Page template override - Some page templates hide sidebars
Plugin conflicts - Deactivate plugins one-by-one to test
Cache issues - Clear cache if using a caching plugin

Yes! You can add the same widget type to multiple widget areas. Configure each instance separately with different settings.

Do widgets affect site speed?

Some widgets can impact performance:

Light widgets:

Text/HTML widgets
Image widgets
Custom menu widgets

Heavy widgets:

Recent posts with thumbnails
Social media feeds
Complex query widgets

Use caching plugins to improve widget performance.

Can I hide widgets from logged-out users?

Yes, with a widget control plugin:

Install "Widget Options" or similar
Each widget gets a visibility tab
Set conditions like:
- Show only to logged-in users
- Hide from specific user roles
- Display on certain pages only

How do I remove all widgets?

To hide sidebars completely:

Go to Appearance → Customize
Navigate to Sidebar Layout
Select the layout setting for your page type
Choose No Sidebar layout

This is better than leaving widget areas empty.

Sidebar Layouts - Choose left, right, both, or no sidebar
Sticky Sidebar - Make sidebars follow scroll
Side Panel Settings - Off-canvas menu configuration

Need Help?

If you need assistance with widget areas:

Documentation:

BuddyX Pro theme documentation
Plugin-specific widget documentation
WordPress widget codex

Support:

Email us at support@wbcomdesigns.com
Support forum: https://wbcomdesigns.com/support/
Knowledge base: https://docs.wbcomdesigns.com/docs/buddyx-theme/

Useful Plugins:

Widget Options - Advanced widget control
Custom Sidebars - Create unlimited widget areas
Jetpack - Additional widgets and visibility control

BuddyX Pro lets you set a default sidebar position for the whole site and override it per content type (BuddyPress, WooCommerce, bbPress, LearnDash, LearnPress, LifterLMS). Every sidebar control offers the same four positions and a single global sticky toggle keeps sidebars in view while visitors scroll.

Sidebar Layout Settings Sidebar layout configuration in the WordPress Customizer

Go to Appearance > Customize
Open the Site Sidebar section

The Default Sidebar Layout control (sidebar_option) sets the sidebar position for your entire site. Its default is Right.

Available Layouts

Every sidebar control in BuddyX Pro offers exactly these four positions - there is no fifth "Default" choice on the site-wide or integration controls:

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

Layout Selection

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

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

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

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

The sidebar width is a single global control - there is no per-context width and no minimum/maximum slider.

Setting	Key	Customizer location	Default
Global Sidebar Width	`site_sidebar_width`	Appearance > Customize > General > Site Layout	260px

Enter the width as a pixel value (for example 260px). On tablet and mobile the sidebar reflows below content automatically.

Content-Specific Sidebar Settings

The Site Sidebar section registers one sidebar control per content type. Each integration control appears only when the matching plugin is active, and each offers the same four positions (None, Left, Right, Both) - there is no per-context "Default" choice on these controls.

Control label	Key	Default	Shows when
Default Sidebar Layout	`sidebar_option`	Right	Always
Activity Directory Sidebar Layout	`buddypress_sidebar_option`	Both	BuddyPress active (and Youzify not active)
Members Directory Sidebar Layout	`buddypress_members_sidebar_option`	Right	BuddyPress active (and Youzify not active)
Groups Directory Sidebar Layout	`buddypress_groups_sidebar_option`	Right	BuddyPress active (and Youzify not active)
bbPress Sidebar Layout	`bbpress_sidebar_option`	Right	bbPress active
WooCommerce Sidebar Layout	`woocommerce_sidebar_option`	Right	WooCommerce active
LearnDash Sidebar Layout	`ld_sidebar_option`	Right	LearnDash (SFWD_LMS) active
LearnPress Sidebar Layout	`lp_sidebar_option`	Right	LearnPress active
LifterLMS Archive Sidebar	`lifterlms_course_archive_sidebar`	None (full width)	LifterLMS active

Note: Each integration exposes a single sidebar control that governs that plugin's pages - there is no separate archive-vs-single split for WooCommerce, bbPress, or LearnDash inside the Site Sidebar section. LifterLMS defaults to None (full-width course archive); the rest default to Right (BuddyPress activity defaults to Both).

Blog sidebars live in the Blog panel

Two blog sidebar controls sit outside the Site Sidebar section, in the Blog customizer sections:

Control label	Key	Customizer location	Choices	Applies on
Sidebar	`blog_archive_sidebar`	Blog Archive section	Default, None, Left, Right, Both	The blog feed - `is_home()` (latest-posts homepage), category / tag / author / date archives for the `post` type. New in 5.1.0.
Sidebar layout	`single_post_sidebar_option`	Single Post section	None, Left, Right, Both	Individual blog posts (`is_singular('post')`). Moved here from Site Sidebar in 5.1.0.

Migration note (5.1.0): blog_archive_sidebar defaults to Default (empty string), which means "inherit the global sidebar_option". single_post_sidebar_option keeps its setting key, default, and value shape from before 5.1.0 - only its customizer location changed (from Site Sidebar to the new Single Post section). Existing customer sites render byte-identical on upgrade; only a customer who explicitly picks a non-inherit value sees the override apply.

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

Keep sidebars visible while scrolling through long content. This is a single on/off toggle - there is no offset or distance setting.

Setting	Key	Description	Default
Sticky Sidebar ?	`sticky_sidebar_option`	Fix sidebars on scroll (desktop)	On (Yes)

How It Works:

User scrolls page
When sidebar top reaches viewport top
Sidebar becomes fixed position
Sidebar scrolls internally if taller than viewport
Returns to normal at content end

See the Sticky Sidebar guide for the full walkthrough.

Best Practices:

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

Adding Widgets

Go to Appearance > Widgets
Find the widget area you want to configure
Click the + button or drag widgets
Configure widget settings
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

Override sidebar settings on individual pages, posts, and public custom post types via the unified Page Settings meta box (5.1.0+):

Edit any page / post / CPT (works in both the block and classic editors)
Scroll below the post content area to the Page Settings panel
Open the Layout section and pick a Sidebar option
Save / Update the entry

Available Per-Page Sidebar Options:

Option	Behavior
Default	Use the Customizer sidebar setting (no override)
Left	Force left sidebar on this entry
Right	Force right sidebar on this entry
None	Hide the sidebar entirely on this entry

The same panel exposes 9 other per-entry overrides (sub-header, sub-header title, content width, site header, site footer, header style, side panel, color mode, site loader). See the Page Settings reference under Branding > Page Settings for the full control list.

Backward compatibility: customers who saved sidebar / sub-header / side-panel overrides under the pre-5.1.0 meta boxes (buddyx_side_panel_settings, buddyx_sub_header_settings) keep their data intact - the new unified panel reads and writes the same legacy meta keys.

Layout Hierarchy

Sidebar settings follow this priority:

Per-page setting (highest priority)
Content-type setting (e.g., Blog Archive Sidebar)
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

Problem: Sidebar doesn't appear even when enabled.

Solutions:

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

Wrong Widgets Appearing

Problem: Widgets from another sidebar appear.

Solutions:

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

Sidebar Overlapping Content

Problem: Sidebar overlaps or pushes content incorrectly.

Solutions:

Reduce sidebar width
Check for CSS conflicts
Disable conflicting plugins
Verify responsive breakpoints

Problem: Sticky sidebar jumps or behaves erratically.

Solutions:

Ensure sidebar isn't taller than viewport
Check for JavaScript conflicts
Disable other sticky plugins
Confirm the Sticky Sidebar ? toggle is set to Yes

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

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

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Side Panel Settings Guide

Configure the slide-out navigation panel that appears on the left side of your site. The Side Panel provides quick access to navigation menus and is perfect for mobile users and sites with extensive navigation.

Side Panel Settings Side panel configuration in the Customizer

What Is the Side Panel?

The Side Panel is a slide-out menu that appears from the left side of your screen. Think of it as a navigation drawer similar to mobile apps. It can contain custom menus, widgets, or any navigation items you want quick access to.

What You Can Do

Show or hide the side panel
Set it to open or closed by default
Display different menus for logged-in and logged-out users
Enable or disable on mobile devices
Add custom navigation with icons
Control visibility on specific pages
Toggle the panel with a button click

Visual Overview

CLOSED STATE:                     OPEN STATE:

┌──┐                             ┌──────────┬──────────┐
│  │                             │          │          │
│ ☰│  Header                     │  Menu    │  Header  │
│  │                             │  Item 1  │          │
├──┤                             │  Item 2  │──────────┤
│  │                             │  Item 3  │          │
│  │  Main Content               │  Item 4  │  Main    │
│  │                             │  Item 5  │  Content │
│  │                             │          │          │
│  │                             │          │          │
└──┘                             └──────────┴──────────┘
 ↑                                    ↑
Toggle button                    Panel slides in from left
(3 horizontal lines)             Click outside to close

Side Panel Settings

Access these settings in Appearance → Customize → Site Side Panel.

Available Options

Setting	Default	Description
Default State	Closed	Panel starts open or closed on page load
Toggle Button	Enabled	Show/hide the button that opens the panel
Logout Mode	Enabled	Show panel to logged-out users
Mobile View	Enabled	Show panel on mobile devices

Setting Details

Default State

Controls how the panel appears when a page loads.

Options:

Closed (recommended) - Panel hidden, users click to open
Open - Panel visible immediately

When to use "Open":

Sites with primary navigation in panel
Dashboard-style layouts
Wide screens where panel doesn't cover content

When to use "Closed":

Content-focused sites
Mobile-responsive layouts
Sites where content is primary

Toggle Button

The button that opens and closes the panel.

Enabled:

Three-line "hamburger" icon appears
Usually in header area
Click to open/close panel

Disabled:

No toggle button shown
Users can't open panel
Useful if you have custom triggers

Logout Mode

Controls panel visibility for logged-out users.

Enabled (default):

Logged-out users see the panel
Displays "Logged-Out Menu" if set
Falls back to main menu

Disabled:

Panel hidden for logged-out users
Only logged-in users see it
Good for member-only navigation

Mobile View

Controls panel on small screens (under 768px).

Enabled (default):

Panel works on mobile devices
Great for mobile navigation
Touch-friendly interface

Disabled:

Panel hidden on mobile
Mobile users see standard menu
Use if you have separate mobile menu

How to Configure Side Panel

Step 1: Enable the Side Panel

Log in to WordPress dashboard
Go to Appearance → Customize
Navigate to Site Side Panel
Ensure Toggle Button is enabled
Click Publish

Step 2: Set Default State

Choose how the panel appears on load:

In Site Side Panel settings
Find Default State option
Select Open or Closed
Click Publish

Most sites work best with "Closed" as default.

Step 3: Configure User Visibility

Control who sees the panel:

For all users (default):

Keep Logout Mode enabled
Panel shows to everyone

For logged-in users only:

Disable Logout Mode
Panel hidden for guests

Step 4: Set Mobile Behavior

Choose mobile visibility:

Mobile-friendly (recommended):

Keep Mobile View enabled
Panel works on phones/tablets

Desktop-only:

Disable Mobile View
Mobile users see different menu

Side Panel Menus

The Side Panel displays custom navigation menus. You can set different menus for logged-in and logged-out users.

BuddyX Pro provides dedicated menu locations:

Menu Location	Who Sees It	Best For
BuddyX Panel - Logged in users	Logged-in members	Dashboard, profile, settings
BuddyX Panel - Logged out users	Guests/visitors	Login, register, about

Go to Appearance → Menus
Click Create a new menu
Name it (e.g., "Side Panel Menu")
Click Create Menu

Add pages, posts, or custom links:

Select items from left column
Click Add to Menu
Drag to reorder items
Create submenus by dragging items right

Step 3: Assign to Location

Check BuddyX Panel - Logged in users box
Or check BuddyX Panel - Logged out users
Click Save Menu

Add icons to side panel menu items for better visual navigation:

Install "Menu Icons" plugin
Go to Appearance → Menus
Open your side panel menu
Click triangle to expand menu item
Choose icon from icon picker
Save menu

Icon Libraries Supported

Font Awesome
Dashicons
Genericons
Custom SVG icons

Customize Panel Content

Default Content

By default, the panel shows:

Navigation menu items
Submenu items (expandable)
Icon + text labels

Custom Content with Hooks

Developers can add custom content:

// Add content before menu
add_action( 'buddyx_before_inner_panel', 'custom_panel_content' );

// Add content after menu
add_action( 'buddyx_after_inner_panel', 'custom_panel_footer' );

Per-Page Panel Control

Hide the side panel on specific pages, posts, or any public CPT via the unified Page Settings meta box (5.1.0+):

Edit the entry (works in the block and classic editors)
Scroll below the post content area to the Page Settings panel
Open the Display section and set Side panel to Hide
Update the entry

Customers who already saved the legacy "Side Panel Settings -> Hide Side Panel" checkbox keep their preference - the unified panel reads / writes the same _hide_show_side_panel meta key, so no migration is needed.

This is useful for:

Landing pages
Checkout pages
Full-screen presentations
Login/registration pages

Community Site (BuddyPress)

Logged-in Menu:

Dashboard
My Profile
Messages
Notifications
Friends
Groups
Activity
Members
Settings

Logged-out Menu:

Home
About
Login
Register
Features
Contact

E-Commerce Site (WooCommerce)

Logged-in Menu:

Shop
My Account
Orders
Wishlist
Cart
Checkout

Logged-out Menu:

Shop
Categories
Sale
New Arrivals
Login/Register
About

Learning Site (LearnDash/LearnPress)

Logged-in Menu:

My Courses
All Courses
My Progress
Certificates
Assignments
Profile
Support

Logged-out Menu:

Browse Courses
Course Categories
Instructors
Pricing
Login
Enroll Now

Membership Site

Logged-in Menu:

Dashboard
My Account
Members Area
Downloads
Support
Community
Settings
Logout

Logged-out Menu:

Home
Membership Levels
Benefits
Testimonials
FAQ
Login
Join Now

Corporate/Business Site

Main Menu:

Home
About Us
Services
Products
Resources
Blog
Careers
Contact

User Experience Best Practices

Do's

Keep menu items concise
Use clear, descriptive labels
Organize items logically
Add icons for visual clarity
Limit to 8-10 main items
Use submenus for organization
Test on mobile devices

Don'ts

Don't overcrowd with items
Don't use long menu labels
Don't nest menus too deeply (max 2 levels)
Don't forget mobile testing
Don't hide critical navigation
Don't use unclear terminology

Mobile Optimization

Mobile Behavior

On mobile devices (when enabled):

Touch-Friendly:
- Large touch targets
- Easy-to-tap menu items
- Swipe to close
Full-Screen:
- Panel covers full height
- Overlay dims background
- Tap outside to close
Scrollable:
- Long menus scroll independently
- Maintains position when reopened
- Smooth scrolling animation

Mobile Best Practices

For mobile panels:

Use shorter menu labels
Add recognizable icons
Limit menu depth (1-2 levels)
Place important items at top
Test on actual devices
Consider thumb reach

Desktop vs. Mobile

Feature	Desktop	Mobile
Width	280-320px	80-90% screen width
Overlay	Semi-transparent	Darker overlay
Close Method	Click outside or button	Swipe or tap outside
Scrolling	Independent scroll	Independent scroll
Animation	Slide in/out	Slide in/out

Styling and Appearance

Panel Styling

The side panel inherits your theme colors:

Background: Site background color
Text: Site text color
Links: Theme link color
Hover: Theme hover color

Side Panel Colors (Customizer)

BuddyX Pro gives the side panel its own color controls, so you do not need custom CSS to restyle it. Find them under Appearance → Customize → Site Skin → Side Panel.

The panel exposes this color group:

Control	What it colors
Side Panel Toggle Color	The hamburger toggle icon that opens the panel
Side Panel Background Color	The panel drawer background
Side Panel Menu Color	Menu item text in its default state
Side Panel Menu Hover Color	Menu item text on hover
Side Panel Menu Active Color	Menu item text for the current/active page
Side Panel Menu BG Hover Color	Menu item background on hover
Side Panel Menu BG Active Color	Menu item background for the current/active page

Every one of these colors has a matching (Dark Mode) counterpart in the same section (for example, Side Panel Background Color (Dark Mode)). The Pro theme applies the light value when the site is in light mode and the dark value when a visitor switches the header dark-mode toggle - so the panel stays legible in both modes without extra CSS.

Most panel colors update live in the Customizer preview as you pick them. A few (the active/hover background swatches) refresh on save, so publish to see the final result.

Custom Styling

To customize appearance with CSS:

Create a child theme
Add custom CSS to child theme stylesheet
Target .buddyx-menu-panel class

Example CSS:

/* Change panel background */
.buddyx-menu-panel {
    background-color: #f5f5f5;
}

/* Style menu items */
.buddyx-menu-panel .menu-item a {
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}

/* Icon styling */
.buddyx-menu-panel .menu-item-icon {
    margin-right: 10px;
}

Width Adjustment

Default panel width is 320px on desktop. To change:

.buddyx-menu-panel {
    width: 400px;
}

Troubleshooting

Panel Doesn't Open

Check these items:

Toggle enabled
- Go to Customize → Site Side Panel
- Verify Toggle Button is enabled
Menu assigned
- Go to Appearance → Menus
- Check menu is assigned to panel location
JavaScript errors
- Open browser console (F12)
- Look for JavaScript errors
- Disable plugins to find conflicts
Logout mode
- If logged out, check Logout Mode is enabled
- Or log in to test

Toggle Button Not Visible

Possible causes:

Toggle disabled - Enable in customizer
CSS conflict - Another plugin may hide it
Custom header - May override button placement
Cache issue - Clear all caches

Solutions:

Check customizer settings
Disable conflicting plugins
Clear cache
Update theme

Panel Appears Behind Content

This indicates a CSS z-index conflict:

Open browser developer tools (F12)
Inspect the panel element
Note the z-index value
Add custom CSS to increase it

Example fix:

.buddyx-menu-panel {
    z-index: 9999 !important;
}

Verify:

Menu created - Menu exists in Appearance → Menus
Location set - Menu assigned to panel location
Items added - Menu has items
Not hidden - Menu visibility settings
Cache cleared - Clear all caches

Panel Won't Close

Possible causes:

JavaScript error
Theme conflict
Plugin conflict
Browser issue

Try:

Check browser console for errors
Disable plugins one-by-one
Test in different browser
Update theme and plugins

The panel shows different menus based on:

Login state - Logged in vs. logged out
Menu location - Check menu assignments
Fallback - Primary menu shows if panel menu not set

Solution:

Verify correct menu is assigned
Check for both logged-in and logged-out locations
Assign menus to specific locations

Advanced Configuration

Hide Panel on Specific Pages

Use the per-page setting:

Edit page in WordPress
Find Side Panel Settings meta box
Check Hide Side Panel
Update page

Or use custom CSS with page IDs:

/* Hide on specific page */
.page-id-123 .buddyx-menu-panel {
    display: none !important;
}

/* Hide toggle on specific page */
.page-id-123 .buddyx-panel-toggle {
    display: none !important;
}

Change Panel Position

By default, panel slides in from left. To change to right:

This requires custom CSS and JavaScript. Consider using a child theme or consulting a developer.

Add Custom Widgets to Panel

While the panel is primarily for menus, developers can add widgets:

// Register widget area for panel
register_sidebar( array(
    'name'          => 'Side Panel Widgets',
    'id'            => 'buddyx-panel-widgets',
    'before_widget' => '<div class="panel-widget">',
    'after_widget'  => '</div>',
) );

// Display in panel
add_action( 'buddyx_after_inner_panel', function() {
    dynamic_sidebar( 'buddyx-panel-widgets' );
} );

Common Questions

Side Panel:

Slides in from left
Can show on desktop and mobile
Custom menu location
Always accessible

Mobile Menu:

Appears in header on mobile
Different menu location
Only on small screens
Collapses on desktop

You can use both simultaneously.

Can I have different panels for different user roles?

Not by default, but you can:

Use a plugin like "Nav Menu Roles"
Show/hide menu items by role
Create role-specific menus

Does the panel work with page builders?

Yes! The panel is independent of page content. It works with:

WordPress Block Editor
Elementor
Beaver Builder
Divi Builder
Other page builders

Can I disable the panel completely?

Yes, three ways:

Disable toggle - In customizer, turn off Toggle Button
Don't assign menu - Leave menu locations empty
Use CSS - Hide with display: none

There's no hard limit, but best practices:

Recommended:

8-10 main items
1-2 submenu levels
Total items: 15-20

Not recommended:

20+ main items
3+ submenu levels
Very long labels

Will the panel slow down my site?

No, the side panel is lightweight and optimized:

Minimal CSS/JavaScript
Only loads when enabled
No external dependencies
No impact on page speed scores

Can visitors see the panel?

Yes, if Logout Mode is enabled. This lets you show navigation to non-logged-in visitors. You can:

Show same menu to everyone
Show different menu to logged-out users
Hide panel from logged-out users completely

Sidebar Layouts - Configure content sidebars
Widget Areas - Manage widget areas
Sticky Sidebar - Make sidebars follow scroll

Need Help?

If you need assistance with the side panel:

Documentation:

BuddyX Pro theme documentation
WordPress menu guide
Navigation best practices

Support:

Email us at support@wbcomdesigns.com
Support forum: https://wbcomdesigns.com/support/
Knowledge base: https://docs.wbcomdesigns.com/docs/buddyx-theme/

Useful Plugins:

Menu Icons - Add icons to menus
Nav Menu Roles - Control menu by user role
Max Mega Menu - Advanced menu features

Make your sidebar widgets stay visible while users scroll down the page. This keeps important navigation, calls-to-action, and widgets always accessible without requiring users to scroll back to the top.

Sticky Sidebar Settings Sticky sidebar configuration in the Customizer

A sticky sidebar "follows" users as they scroll down the page. When enabled, your sidebar widgets remain visible in the viewport, making them accessible at all times. This is perfect for:

Navigation menus
Search boxes
Contact forms
Call-to-action buttons
Shopping carts
Course progress indicators

What You Can Do

Enable or disable sticky behavior globally
Sidebar automatically stops at footer
Works with left, right, or both sidebars
Adjusts automatically for different screen sizes
Disabled on mobile devices for better usability

Visual Example

WITHOUT STICKY SIDEBAR:          WITH STICKY SIDEBAR:

┌─────────────┬──────────┐      ┌─────────────┬──────────┐
│             │          │      │             │          │
│   Content   │ Sidebar  │      │   Content   │ Sidebar  │
│             │          │      │             │ (Fixed)  │
├─────────────┤          │      ├─────────────┤          │
│             │          │      │             │          │
│   Content   │  (gone   │      │   Content   │ Sidebar  │
│             │   above  │      │             │ (Still   │
│             │   fold)  │      │             │ visible) │
├─────────────┤          │      ├─────────────┤          │
│             │          │      │             │          │
│   Content   │          │      │   Content   │ Sidebar  │
│             │          │      │             │ (Follows)│
└─────────────┴──────────┘      └─────────────┴──────────┘
     ↑ User scrolled                  ↑ Sidebar follows
       Sidebar is gone                  Sidebar stays visible

Desktop Behavior

When you scroll down:

Sidebar follows your scroll position
Stays visible within the browser viewport
Stops when it reaches the footer
Scrolls with the page when footer is visible

Mobile Behavior

On mobile devices (under 768px width):

Sticky behavior is automatically disabled
Sidebar appears below content (normal flow)
Prevents sidebar from covering content
Improves mobile usability

Method 1: WordPress Customizer

Log in to your WordPress dashboard
Go to Appearance → Customize
Navigate to the Site Sidebar section
Find the Sticky Sidebar ? option
Toggle the switch to Yes
Click Publish

Method 2: Quick Settings

While logged in, visit your site
Click Customize in the admin bar
Go to the Site Sidebar section
Enable Sticky Sidebar ?
Click Publish

Settings Reference

Sticky sidebar is a single on/off toggle - there is no offset, distance, or per-page setting.

Option	Key	Default	Description
Sticky Sidebar ?	`sticky_sidebar_option`	On (Yes)	Makes sidebars follow scroll on desktop

Where Sticky Works

Sticky sidebar works on all pages with sidebars:

Supported Page Types

Blog posts
Pages
Archives
Category pages
Tag pages
Search results
Custom post types

Plugin-Specific Pages

BuddyPress: Activity, members, groups directories
WooCommerce: Shop, product pages
bbPress: Forum pages
LearnDash: Course archives
LearnPress: Course pages
LifterLMS: Course archives
FluentCart: Product pages

Where Sticky Doesn't Work

Sticky sidebar is disabled on:

Mobile devices (under 768px)
Full-width page templates
Pages with "No Sidebar" layout
404 error pages
Some custom page templates

Browser Compatibility

Sticky sidebar works in all modern browsers:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
Opera 76+

Older browsers will show the sidebar in normal (non-sticky) mode.

Performance Considerations

Impact on Site Speed

Sticky sidebar has minimal performance impact:

Good:

Uses native CSS when possible
JavaScript only for advanced positioning
No external library dependencies
Optimized scroll events

Best Practices:

Keep sidebar widgets lightweight
Avoid heavy images in sticky sidebars
Limit number of widgets (3-5 recommended)
Use caching plugins

Long Sidebars

If your sidebar is longer than the screen height:

Scrollable Sidebar: Sidebar scrolls independently
Smart Positioning: Shows top of sidebar initially
Footer Stop: Sidebar stops at footer regardless of height

Customization Tips

For best results, keep sticky sidebar height reasonable:

Recommended:

3-5 widgets maximum
Total height: 600-1000px
Leave room for footer

Not Recommended:

10+ widgets in sticky sidebar
Very tall widgets (over 1500px)
Infinite scrolling widgets

Great for sticky sidebars:

Search box
Navigation menu
Contact form
Social media links
Call-to-action button
Newsletter signup
Shopping cart (e-commerce)

Not ideal for sticky sidebars:

Very long lists
Large images
Video widgets
Infinite scroll feeds
Heavy widgets with many queries

Troubleshooting

Check these settings:

Sticky Sidebar is enabled
- Go to Customize → Site Sidebar
- Verify Sticky Sidebar ? is set to "Yes"
Sidebar layout is not "None"
- Check Sidebar Layout setting
- Must be "Left", "Right", or "Both"
Page has widgets
- Go to Appearance → Widgets
- Add at least one widget to the sidebar
Not on mobile device
- Sticky is disabled under 768px width
- Test on desktop or tablet
Browser console errors
- Press F12 to open developer tools
- Check for JavaScript errors
- Disable conflicting plugins

If sidebar extends over footer content:

Theme Update: Update to latest theme version
Cache Clear: Clear all caches (site, browser, CDN)
Plugin Conflict: Disable other sticky plugins
Footer Height: Ensure footer has content

Possible causes:

CSS Conflicts: Another plugin may have conflicting styles
JavaScript Errors: Check browser console for errors
Heavy Widgets: Reduce number of widgets
Slow Server: Improve hosting performance

Solutions:

Clear all caches
Deactivate plugins one-by-one to find conflict
Reduce sidebar widgets
Update theme and plugins

Some page templates override sidebar behavior:

Full-Width Template: Choose different page template
Custom Page Builder: Page builders may disable sidebars
Plugin Override: Some plugins hide sidebars
Theme Settings: Check per-page sidebar settings

Mobile Optimization

Why Sticky Is Disabled on Mobile

Mobile devices need different behavior:

Reasons:

Limited screen height
Sidebars stack below content
Touch scrolling is different
Prevents content blocking
Better mobile UX

On mobile devices:

Sidebar appears below main content
Full width layout for better readability
Widgets stack vertically
Normal scroll behavior

Mobile-Friendly Alternatives

Instead of sticky sidebar on mobile:

Sticky Header: Keep navigation in header
Floating Button: Add floating call-to-action
Off-Canvas Menu: Use slide-out panel (#sidepanel-settings-bxpro))
Bottom Bar: Sticky footer bar for important actions

Advanced Use Cases

E-Commerce Sites

Product Pages:

Sticky cart widget
Product filters
Category navigation
Featured products

Shop Archive:

Price filters
Category filters
Sort options
Special offers

Community Sites

BuddyPress Pages:

Online members widget
Activity shortcuts
Group filters
Member search

Forum Pages:

Forum navigation
Recent topics
Active users
Quick post button

Learning Sites

Course Pages:

Course navigation
Progress tracker
Course materials
Related courses

Course Archive:

Course filters
Category navigation
Instructor list
Featured courses

Membership Sites

Member Areas:

Member navigation
Account shortcuts
Support links
Upgrade prompt

Protected Content:

Access information
Download links
Membership status
Renewal reminder

Best Practices

Do's

Keep sticky sidebar shorter than screen height
Use 3-5 widgets for best performance
Test on multiple screen sizes
Place most important widgets at top
Clear cache after making changes
Test with real content

Don'ts

Don't add too many widgets
Don't use very large images
Don't add infinite scrolling widgets
Don't forget to test on mobile
Don't stack multiple sticky elements
Don't ignore footer overlap

Common Questions

Yes! If you have both sidebars enabled, both will become sticky when the feature is turned on.

Not through the theme settings. The sticky option applies to all sidebars. To customize this, you would need custom CSS or a child theme.

No, the sticky sidebar feature is optimized for performance and has minimal impact on load times. However, heavy widgets in the sidebar can affect performance regardless of sticky behavior.

Currently, sticky sidebar is a global setting. To disable it on specific pages, you would need:

Custom CSS to hide it on specific page IDs
A plugin that controls sticky behavior per page
A child theme with custom code

This is intentional! The sidebar stops when it reaches the footer to prevent overlapping footer content. This ensures footer information remains visible.

Can logged-out users see sticky sidebars?

Yes, sticky sidebar behavior is the same for all users (logged in and logged out). The sidebar content may differ based on widgets you've added for different user states.

Compatibility depends on the page builder:

Compatible:

WordPress Block Editor (Gutenberg)
Elementor (with theme locations)
Beaver Builder (with theme layouts)

May Need Adjustment:

Page builders with custom layouts
Builders that override theme sidebars

Test sticky sidebar with your page builder. If issues occur, use the page builder's own sticky features.

Yes, with a plugin like "Q2W3 Fixed Widget" or "Sticky Sidebar Widgets". These plugins add sticky options to individual widgets, independent of theme sticky settings.

Sidebar Layouts - Choose sidebar position and layout
Widget Areas - Manage sidebar widgets
Side Panel Settings - Configure off-canvas menu

Need Help?

If you need assistance with sticky sidebar:

Documentation:

BuddyX Pro documentation
WordPress sidebar guide
Browser developer tools guide

Support:

Email us at support@wbcomdesigns.com
Support forum: https://wbcomdesigns.com/support/
Knowledge base: https://docs.wbcomdesigns.com/docs/buddyx-theme/

Useful Plugins:

Q2W3 Fixed Widget - Make individual widgets sticky
Widget Options - Advanced widget control
WP Sticky - Additional sticky options

Typography

Body, heading, caption typography and Google Fonts integration.

Body Typography

Configure the typography settings for body text throughout your BuddyX Pro website. These settings control the primary reading experience for your visitors.

Body Typography Settings Body typography configuration in the WordPress Customizer

Accessing Typography Settings

Go to Appearance > Customize
Navigate to Typography > Body Typography

Body Font Settings

The Body typography control (typography_option) is a single picker with nine inputs. There is no separate "font source" switch and no per-breakpoint size fields - the family dropdown already groups every available font, and the size field takes one value. (#typography-presets-bxpro).)

Font Family

Choose the body font from a single grouped dropdown. There is no Google-vs-system toggle; every source appears in the same list:

Group	Where it comes from
Theme fonts	Fonts registered in the theme's `theme.json` (self-hosted, including the system-ui baseline)
Google Fonts	The bundled Google Fonts catalog
Custom Fonts	Fonts you uploaded via Appearance > Fonts (WordPress Font Library) - shown only when present

The dropdown has a searchable Default (theme) entry at the top; leaving it selected uses the theme baseline. Default: Default (theme).

Font Weight

Setting	Options	Default
Weight	300, 400, 500, 600, 700	400 (Regular)

The control exposes the weights 300-700. The weights that actually render also depend on the chosen font - a font that ships only 400/700 will approximate the others.

Font Style

Setting	Options	Default
Style	Normal, Italic	Normal

Line Height

Setting	Description	Default
Line height	Space between lines (range 0.8-3, step 0.05)	1.6

Recommendations:

Body text: 1.5 - 1.8
Dense content: 1.4 - 1.5
Spacious layout: 1.8 - 2.0

Letter Spacing

Setting	Description	Default
Letter	Space between characters, in em (range -0.1 to 0.5)	0

Usage:

Normal text: 0 to 0.02em
Uppercase text: 0.05em+ improves readability
Negative values: tighten text for headings

Additional Text Options

The body control also exposes three styling options beyond family, weight, style, size, line height, and letter spacing:

Setting	Options	Default
Transform	none, uppercase, lowercase, capitalize	none
Align	Inherit, left, center, right, justify	left
Decoration	none, underline, line-through, overline	none

The chosen body font family is also published as the global --global-font-family CSS variable, so plugins and custom CSS can inherit the same base font.

BuddyX Pro styles your navigation separately from body and heading text, with dedicated controls for top-level menu items and their dropdown sub-menus.

Go to Appearance > Customize
Click on Typography
Select Menu Typography

Controls the typography of top-level navigation links (the main menu and the mobile menu toggle).

Option	Description	Default
Font Family	Google Font or system font	Theme baseline
Font Weight	Thickness of menu text	500 (Medium)
Font Size	Size of menu links	16px
Line Height	Space between lines	1.6
Letter Spacing	Space between characters	0.02em
Text Transform	Case style (none, uppercase, lowercase, capitalize)	none
Text Decoration	Additional styling (none, underline)	none

Controls the typography of dropdown sub-menu links that appear under a parent menu item.

Option	Description	Default
Font Family	Google Font or system font	Theme baseline
Font Weight	Thickness of sub-menu text	500 (Medium)
Font Size	Size of sub-menu links	16px
Line Height	Space between lines	1.6
Letter Spacing	Space between characters	0.02em
Text Transform	Case style	none
Text Align	Horizontal alignment (left, center, right)	left
Text Decoration	Additional styling (none, underline)	none

Tip: Keep the menu and sub-menu font family the same for a cohesive navigation, and reserve weight or letter-spacing changes to distinguish the two levels. Menu link colors are set separately under Skin settings - see Color Scheme Settings.

Text Colors

Body Text Color

Setting	Description	Default
Text Color	Primary body text color	#333333
Link Color	Hyperlink text color	Primary Color
Link Hover	Link hover state	Primary Hover

See Color Scheme Settings for complete color configuration.

Font Loading Optimization

BuddyX Pro optimizes Google Fonts loading for performance:

Preconnect

Automatically adds DNS preconnect for faster font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Font Display

Option	Behavior
Swap	Show fallback font, swap when loaded (default)
Block	Hide text until font loads
Fallback	Brief block, then fallback if slow
Optional	Use if cached, otherwise fallback

Recommendation: Use swap for best user experience and Core Web Vitals.

Subsetting

BuddyX Pro requests only necessary character subsets:

Latin (default)
Latin Extended (European languages)
Cyrillic (Russian, etc.)
Greek
Vietnamese

System Font Stack

When using system fonts, BuddyX Pro uses this optimized stack:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Benefits:

Zero external requests
Fastest possible loading
Native look and feel per OS
Excellent readability

Configuration Examples

Example 1: Modern Blog

Font Family: Inter
Font Size: 17px
Font Weight: 400
Line Height: 1.75
Letter Spacing: 0

Example 2: Corporate Site

Font Family: Source Sans Pro
Font Size: 16px
Font Weight: 400
Line Height: 1.6
Letter Spacing: 0.2px

Example 3: Community Platform

Font Family: Nunito
Font Size: 15px
Font Weight: 400
Line Height: 1.7
Letter Spacing: 0

Accessibility Considerations

Minimum Font Size

Body text: Minimum 16px recommended
Never below 14px for readability
Consider users with visual impairments

Contrast Ratio

Ensure text meets WCAG 2.1 requirements:

Normal text: 4.5:1 minimum contrast
Large text (18px+): 3:1 minimum contrast

Line Length

Optimal reading experience:

45-75 characters per line
Controlled by container width, not font settings

Troubleshooting

Font Not Loading

Problem: Selected Google Font doesn't appear.

Solutions:

Check internet connectivity
Verify font name is spelled correctly
Clear browser cache
Check for ad blockers blocking Google Fonts
Try a different font to test

Font Appears Different Than Preview

Problem: Font looks different on live site.

Solutions:

Different operating systems render fonts differently
Check font weight is available for chosen font
Verify font-smoothing CSS isn't conflicting
Some fonts have limited weight options

Performance Impact

Problem: Fonts slowing down page load.

Solutions:

Limit to 2-3 font families maximum
Use font-display: swap
Consider system fonts for body text
Preload critical fonts
Use variable fonts when available

Font Not Matching Design

Problem: Font looks too light or heavy.

Solutions:

Adjust font weight setting
Some fonts have different weight distributions
Check if font supports the weight you need
Consider a different font with better weight options

Heading Typography - H1-H6 font settings
Google Fonts Integration - Font loading details
Color Scheme Settings - Text colors

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Google Fonts Integration

BuddyX Pro seamlessly integrates with Google Fonts, giving you access to over 1,000 professional web fonts. This guide explains how fonts are loaded, optimized, and customized for your website.

Google Fonts selection in typography settings

What Are Google Fonts?

Google Fonts is a free library of open-source fonts optimized for the web. BuddyX Pro automatically handles:

Font file downloading and serving
Browser compatibility
Performance optimization
Automatic fallback fonts
Character subset selection

You simply choose fonts in the Customizer - the theme handles the technical details.

Accessing Google Fonts

Google Fonts are available in any typography setting:

Go to Appearance > Customize
Navigate to Typography section
Open any typography panel (Body, Headings, Menu, etc.)
Click the Font Family dropdown
Search or browse hundreds of Google Fonts

The font picker shows:

Font name
Real-time preview
Available font weights
Search functionality

Using Your Own Fonts Instead (Font Library)

You are not limited to Google Fonts. WordPress ships a Font Library, and BuddyX Pro reads from it - so any font you upload becomes selectable in the same Family dropdown:

Go to Appearance > Fonts and upload your font files (.woff2, .ttf, etc.).
Go to Appearance > Customize > Typography and open any typography panel.
Pick your uploaded font from the Family dropdown.
Click Publish.

BuddyX Pro prints the @font-face rules for the families you actually use, and skips requesting that family from Google - so a self-hosted font stays self-hosted, with no call to Google's CDN.

Notes:

Uploading and managing fonts is WordPress's own Font Library UI. The theme only reads it; it never adds, edits, or deletes your uploaded fonts.
Requires WordPress 6.5+ (when the Font Library shipped).
Self-hosting is the usual answer for GDPR-sensitive sites - see Local Font Hosting below.
For fonts hosted somewhere else entirely (Adobe Fonts, a private CDN) there are no files to upload; declare those in child theme CSS.

How BuddyX Pro Loads Fonts

Automatic Loading System

When you select a Google Font, BuddyX Pro automatically:

Detects fonts used - Scans all typography settings
Builds font URL - Creates optimized Google Fonts API request
Adds preconnect hints - Speeds up DNS resolution
Loads font CSS - Includes only needed character sets
Applies fonts - Uses CSS to apply to correct elements

All of this happens automatically - you don't write any code.

Font Loading in Action

When you choose "Roboto" for body text:

Theme detects: Roboto font is selected
Generates URL: https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap
Adds to page: <link rel="stylesheet" href="[Google Fonts URL]">
Browser loads: Font files from Google's CDN
Text renders: Using Roboto instead of fallback font

Performance Optimization

BuddyX Pro includes several automatic optimizations for fast font loading:

1. Preconnect Resource Hints

The theme adds DNS preconnect headers:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Benefit: Reduces font loading time by 100-300ms by establishing connections before fonts are needed.

2. Font Display Swap

All Google Fonts use font-display: swap strategy:

font-display: swap;

What it does:

Shows fallback font immediately (prevents invisible text)
Swaps to Google Font when loaded
Prevents FOIT (Flash of Invisible Text)
Improves Core Web Vitals scores

User experience: Text appears instantly, then upgrades to your chosen font seamlessly.

3. Subset Optimization

BuddyX Pro requests only Latin character subsets by default:

family=Roboto:400,700&subset=latin

Why: A full font includes thousands of characters. Most English sites only need 256 Latin characters. This reduces file size by 50-80%.

Available subsets:

latin - English, basic European (default)
latin-ext - Extended European characters (ā, ē, ī, etc.)
cyrillic - Russian, Ukrainian, Bulgarian
greek - Greek alphabet
vietnamese - Vietnamese characters

If your site uses multiple languages, you may need additional subsets (requires custom code).

4. Font Weight Limiting

Only selected font weights are loaded:

Regular (400) body text + Bold (700) headings = 2 font files

vs.

Loading all weights (100, 200, 300, 400, 500, 600, 700, 800, 900) = 9 font files

Recommendation: Choose 2-3 weights maximum per font family for optimal performance.

5. CSS Preloading

BuddyX Pro preloads the Google Fonts CSS file:

<link rel="preload" as="style" href="[Google Fonts URL]" />

Benefit: Prioritizes font loading, improving Largest Contentful Paint (LCP) metric.

Font Performance Impact

Understanding the performance cost of web fonts:

Loading Times

Setup	File Size	Load Time*	Recommendation
System fonts only	0 KB	0ms	Fastest possible
1 Google Font, 2 weights	~40-60 KB	100-200ms	Excellent
2 Google Fonts, 4 weights total	~100-150 KB	200-400ms	Good
3+ fonts, 6+ weights	~200-300 KB	400-600ms+	Avoid

*Approximate on 3G connection

Core Web Vitals Impact

Google's page speed metrics affected by fonts:

Largest Contentful Paint (LCP) - Text using web fonts may delay this metric
Cumulative Layout Shift (CLS) - Font swapping can cause layout shifts
First Contentful Paint (FCP) - Delayed by font downloads

BuddyX Pro's optimizations minimize these impacts, but fewer fonts = better scores.

Font Selection Best Practices

Choose Wisely

One font family - Fastest and most cohesive
Two font families - Good balance (headings + body)
Three+ families - Usually unnecessary, impacts performance

Weight Management

Select only the weights you'll actually use:

Good setup:

Body: Roboto - Regular (400), Bold (700)
Headings: Roboto - Semi Bold (600), Bold (700)
Total: 3 weights (shared font family)

Excessive setup:

Body: Open Sans - Light (300), Regular (400), Medium (500), Bold (700)
Headings: Montserrat - Regular (400), Semi Bold (600), Bold (700), Extra Bold (800)
Menu: Lato - Medium (500), Bold (700)
Total: 9 weights across 3 families

Fallback Font Considerations

Every Google Font includes fallback fonts in case the primary font doesn't load:

font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

Fallback stack:

Roboto - Your chosen Google Font
-apple-system - macOS/iOS system font
BlinkMacSystemFont - Chrome on macOS
sans-serif - Generic sans-serif font

The fallback font displays first, then swaps to Google Font. Choose Google Fonts that match common fallback fonts to minimize layout shift.

Popular Google Fonts by Category

Sans-Serif Fonts (Modern, Clean)

Font Name	Character	Best For
Roboto	Neutral, friendly	Corporate sites, apps
Open Sans	Readable, versatile	Blogs, general sites
Lato	Warm, professional	Business, services
Montserrat	Geometric, bold	Headlines, modern sites
Nunito Sans	Rounded, approachable	Communities, social sites
Inter	Technical, precise	SaaS, tech platforms
Poppins	Geometric, contemporary	Creative, marketing
Source Sans Pro	Readable, neutral	Documentation, content

Serif Fonts (Traditional, Elegant)

Font Name	Character	Best For
Merriweather	Readable, traditional	Blogs, editorial
Playfair Display	Elegant, high-contrast	Luxury, fashion
Lora	Balanced, calligraphic	Long-form content
PT Serif	Traditional, neutral	Professional content
Crimson Text	Book-like, classic	Literature, reading

Display Fonts (Decorative, Impact)

Font Name	Character	Best For
Bebas Neue	Tall, condensed	Headers only
Righteous	Bold, retro	Creative projects
Archivo Black	Heavy, impactful	Marketing, landing pages

Warning: Display fonts should only be used for large headings, never body text. They're designed for impact, not extended reading.

Font Pairing Strategies

Combine fonts effectively for professional results:

Strategy 1: Same Family (Safest)

Use one font for everything:

All text: Nunito Sans (varying weights)
- Body: Regular (400)
- Subheadings: Medium (500)
- Headings: Semi Bold (600)
- Strong headings: Bold (700)

Pros: Fastest loading, most cohesive, easiest to manage Cons: Less visual variety

Strategy 2: Serif + Sans-Serif (Classic)

Pair a serif with a sans-serif:

Option A: Serif headings, sans-serif body

Headings: Merriweather (serif)
Body: Open Sans (sans-serif)

Effect: Traditional, authoritative, editorial

Option B: Sans-serif headings, serif body

Headings: Montserrat (sans-serif)
Body: Lora (serif)

Effect: Modern headings, comfortable reading

Strategy 3: Geometric + Humanist

Combine structured and organic sans-serifs:

Headings: Montserrat (geometric, structured)
Body: Open Sans (humanist, friendly)

Effect: Modern but approachable

Strategy 4: Display + Neutral

Bold headings with safe body text:

H1-H2: Bebas Neue (display font)
H3-H6 & Body: Roboto (neutral sans-serif)

Effect: Attention-grabbing titles, readable content

Pairing Guidelines

When combining two fonts:

✅ Do:

Choose fonts with similar proportions (x-height)
Pair fonts from different classifications (serif + sans-serif)
Use one font for 80% of text, accent font for 20%
Test readability at actual site sizes
Consider historical period (don't mix Renaissance serif with Futuristic sans)

❌ Don't:

Pair two decorative/display fonts
Use fonts that are too similar (creates confusion, not contrast)
Mix more than 2-3 font families site-wide
Pair fonts from same classification unless intentional

Advanced Font Techniques

Using Variable Fonts

Some Google Fonts support variable font technology:

Benefits:

One file contains all weights
Smoother weight transitions
Better performance than loading multiple weight files

Supported variable fonts:

Inter
Roboto Flex
Crimson Pro
Recursive

BuddyX Pro will automatically use variable font versions when available.

Font Subset Customization

To load additional character subsets (advanced users):

// Add to child theme functions.php
add_filter( 'buddyxpro_google_fonts', function( $fonts ) {
    // Add subset parameter to font array
    return $fonts;
});

Contact support for implementation help.

Local Font Hosting

For maximum control and privacy compliance (GDPR):

The simplest route is WordPress's Font Library: download the font family you want, upload it at Appearance > Fonts, then pick it in Customize > Typography > Family. BuddyX Pro prints the @font-face rules and stops requesting that family from Google - no external request, no code, no support ticket. See Using Your Own Fonts Instead above.

BuddyX Pro also includes functionality to download and self-host Google Fonts. This:

Eliminates external requests (privacy-friendly)
Slightly faster in some regions
Works offline/behind firewalls
Requires technical implementation

Contact support for local font hosting setup.

System Fonts Alternative

For the absolute fastest loading, use system fonts instead of Google Fonts:

What Are System Fonts?

Fonts already installed on users' devices:

macOS/iOS: San Francisco
Windows: Segoe UI
Android: Roboto
Linux: Ubuntu, Oxygen, Cantarell

System Font Stack

BuddyX Pro uses this optimized stack when you select system fonts:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

Benefits of System Fonts

Zero network requests - Instantly available
Native look - Matches user's OS
Perfect rendering - Optimized by OS makers
Privacy-friendly - No external connections
Best Core Web Vitals - No font loading delays

When to Use System Fonts

Choose system fonts when:

Performance is critical priority
Building a web app or dashboard (native feel)
GDPR privacy is a concern (no Google requests)
Your brand doesn't require specific typography

Choose Google Fonts when:

Brand identity requires specific typeface
Design needs more personality
Willing to accept small performance cost for visual impact

Font Loading Strategies Compared

BuddyX Pro uses the swap strategy by default. Understanding all options:

Strategy	Behavior	User Experience	Use Case
swap	Show fallback immediately, swap when loaded	Brief style change when font loads	Best for most sites (default)
block	Hide text up to 3 seconds until font loads	Invisible text briefly	Avoid (poor UX)
fallback	Brief block (100ms), then fallback if slow	Compromise	Slow networks
optional	Use font if cached, otherwise fallback	Consistent render, font may not load	Extreme performance priority

BuddyX Pro recommendation: Stick with swap (the default). It provides the best balance of brand consistency and user experience.

Measuring Font Performance

Test Your Font Loading

Use these tools to measure impact:

Google PageSpeed Insights - pagespeed.web.dev
- Check LCP score
- Review font loading recommendations
- Test mobile and desktop
WebPageTest - webpagetest.org
- Detailed font loading waterfall
- Shows preconnect effectiveness
- Tests from multiple locations
Chrome DevTools
- Open DevTools (F12)
- Network tab > Filter: Font
- See when fonts load
- Check file sizes

Target Metrics

Aim for these benchmarks:

Font file total: Under 100 KB
Number of font requests: 1-3 requests
Font load time: Under 500ms on 3G
LCP impact: Fonts loaded before LCP element

Troubleshooting Font Issues

Issue: Fonts not loading at all

Symptoms: Text shows in fallback font only

Causes:

Browser ad blocker blocking Google Fonts
Corporate firewall blocking Google domains
Privacy extensions (Privacy Badger, etc.)
DNS issues

Solutions:

Test in incognito mode without extensions
Check browser console for errors (F12)
Whitelist fonts.googleapis.com and fonts.gstatic.com
Try a different network
Consider local font hosting

Issue: Fonts load slowly

Symptoms: Long delay before custom font appears

Causes:

Too many font weights loaded
Multiple font families
Slow internet connection
No preconnect optimization

Solutions:

Reduce to 2-3 font weights maximum
Use only 1-2 font families
Verify preconnect hints are present (view page source)
Consider system fonts for body text
Test on real devices, not just desktop

Issue: Flash of unstyled text (FOUT)

Symptoms: Brief moment of fallback font before Google Font appears

Explanation: This is intentional behavior with font-display: swap. Text appears immediately (good for users), then upgrades to custom font.

Solutions if problematic:

Choose Google Fonts similar to fallback fonts (reduces visual shift)
Accept it - better than invisible text
Use system fonts if consistency critical

Not a bug - it's a performance feature protecting user experience.

Issue: Font looks different than Google Fonts preview

Causes:

Font rendering varies by OS and browser
Antialiasing differences
Screen resolution affects appearance
Color and background affect perception

Solutions:

Test on target audience's primary devices
Adjust font weight if too light/heavy
Check contrast against background color
Some fonts look better on certain OS (Mac vs. Windows)

Issue: Some font weights don't work

Cause: Not all Google Fonts include all weights (100-900).

Check available weights:

Visit fonts.google.com
Search for your font
Check "Styles" tab for available weights

Solution: Only select weights that font actually supports, or choose a different font with needed weights.

Issue: Fonts making site slow

Symptoms: Poor PageSpeed scores, high LCP time

Solutions:

Audit font usage: How many families? How many weights?
Reduce fonts: Aim for 1 family with 2-3 weights
Critical fonts only: Use system fonts for less important text
Preload critical fonts: Add preload link for above-fold fonts
Measure impact: Use PageSpeed Insights before and after changes

Font Loading Performance Checklist

Use this checklist to optimize font performance:

Using 2 or fewer Google Font families
Loading 3 or fewer font weights total
Preconnect hints present in page source
font-display: swap active (BuddyX Pro default)
Latin subset only (unless multilingual site)
PageSpeed Insights LCP under 2.5 seconds
No console errors related to fonts
Fonts load within 500ms on 3G throttling
CLS (layout shift) score under 0.1
Tested on target audience devices

Common Questions

Q: Are Google Fonts really free?

A: Yes, completely free for personal and commercial use. Google Fonts are open-source and licensed freely. No attribution required, no usage limits.

Q: Do Google Fonts work offline?

A: Once loaded and cached, yes. The browser caches font files, so repeat visits load fonts instantly from cache. But initial load requires internet connection. For true offline support, you'd need local font hosting.

Q: Can I use premium fonts with BuddyX Pro?

A: Yes, but requires custom implementation:

Upload font files to theme
Add @font-face CSS declarations
Reference custom fonts in Additional CSS

This is an advanced technique. Contact support for guidance.

Q: Will fonts slow down my site?

A: Potentially, but BuddyX Pro's optimizations minimize impact:

1 font family, 2 weights: Minimal impact (~40KB, 100-200ms)
2 families, 4 weights: Moderate impact (~100KB, 200-400ms)
3+ families, 6+ weights: Significant impact (>200KB, 400ms+)

The key is moderation. System fonts are faster, but Google Fonts' branding value often justifies the small cost.

A: Contested. Some EU courts ruled that loading fonts from Google servers can violate GDPR by sharing user IP addresses without consent. Solutions:

Self-host fonts (local hosting) - Fully compliant
Cookie consent - Show fonts only after user consent
Legal assessment - Consult your legal advisor

The quickest path to option 1: upload the font at Appearance > Fonts and select it in Customize > Typography > Family. Once a family is self-hosted this way, BuddyX Pro no longer requests it from Google. See Using Your Own Fonts Instead.

Q: Why does my font look bold/light on Windows vs. Mac?

A: Operating systems render fonts differently:

Mac/iOS: Slightly heavier rendering, more antialiasing
Windows: Lighter rendering, less smoothing (ClearType)
Linux: Varies by distribution

Choose a middle-ground weight (500-600 for headings, 400 for body) that works across systems. Test on target platforms.

Q: Can I use custom fonts from other sources (Adobe Fonts, Font Squirrel)?

A: Yes, with custom setup:

Adobe Fonts (Typekit):

Get embed code from Adobe
Add to theme header
Reference fonts in Additional CSS

Self-hosted fonts (Font Squirrel, a purchased font, any font you have the files for):

Upload the files at Appearance > Fonts (WordPress's Font Library)
Pick the family in Customize > Typography > Family

No CSS required - the theme prints the @font-face rules for you. See Using Your Own Fonts Instead above.

Q: How often does BuddyX Pro update its Google Fonts list?

A: Google Fonts integration is dynamic - you have access to all fonts Google provides through their API. As Google adds new fonts, they become automatically available in BuddyX Pro's font picker. No theme update required.

Q: Do font settings apply to WordPress block editor?

A: Yes, BuddyX Pro synchronizes font settings with the block editor so what you see while editing matches the live site. Some editor features (font size picker) may show additional options beyond theme defaults.

Body Typography - Body text font configuration
Heading Typography - H1-H6 font settings
Site Title Typography - Logo font styling
Menu Typography - Navigation fonts
Performance Optimization - General speed tips

Additional Resources

Google Fonts Catalog - Browse all available fonts
FontPair - Google Fonts pairing suggestions
TypeScale - Font size calculator
Google Fonts Knowledge - Typography fundamentals
Web Font Loading Best Practices - Google's official guide

Got a question? We're a friendly team - happy to help.

Heading Typography

Control the appearance of all headings (H1-H6) on your BuddyX Pro website. These settings help you create a consistent visual hierarchy that guides your visitors through your content.

Heading Typography Settings Heading typography configuration in the WordPress Customizer

Accessing Heading Settings

Go to Appearance > Customize
Click on Typography
Select Headings Typography

You'll see individual controls for each heading level from H1 (largest) down to H6 (smallest).

What You Can Do

With heading typography settings, you can:

Choose unique fonts for each heading level or use one consistent font family
Set appropriate sizes to create clear visual hierarchy
Adjust font weights (light, regular, bold, etc.)
Control spacing between letters and lines
Transform text (uppercase, lowercase, capitalize)
Align headings (left, center, right)
Create distinct looks for different site sections

Heading Levels Explained

H1 - Main Page Title

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 30px
Line Height: 1.4
Letter Spacing: 0

Where It Appears:

Page titles at the top of content
Blog post titles
BuddyPress profile headers
Main entry titles

Best Practices:

Largest heading on any page
Only one H1 per page (WordPress handles this automatically)
Should be immediately attention-grabbing
Recommended size: 28px - 48px

H2 - Section Headings

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 24px
Line Height: 1.4
Letter Spacing: 0

Where It Appears:

Widget titles
Major section dividers
Subheadings under main content
Product category titles (FluentCart)

Best Practices:

Second most prominent heading
Use for major content sections
Recommended size: 22px - 36px
Consider slightly heavier weight than H1

H3 - Subsection Headings

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 22px
Line Height: 1.4
Letter Spacing: 0

Where It Appears:

BuddyPress group separators
Blog post subheadings
Card titles
Nested content sections

Best Practices:

Third level in hierarchy
Recommended size: 20px - 28px
Should be noticeably smaller than H2

H4 - Smaller Subheadings

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 20px
Line Height: 1.4
Letter Spacing: 0

Where It Appears:

Form section labels
Sidebar widget subheadings
Tab titles
Comment section headers

Best Practices:

Recommended size: 18px - 24px
Can use slightly lighter weight
Good for breaking up dense content

H5 - Minor Headings

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 18px
Line Height: 1.4
Letter Spacing: 0

Best Practices:

Recommended size: 16px - 20px
Often same size as body text but bold
Use sparingly for deep content structure

H6 - Smallest Heading

Default Settings:

Font Family: Default (theme baseline: system-ui)
Font Size: 16px
Line Height: 1.4
Letter Spacing: 0

Best Practices:

Recommended size: 14px - 18px
Rarely used in most sites
Can match body text size with different weight

Heading Typography Options

Each heading level has the same customization options:

Option	Description	Examples
Font Family	Choose from Google Fonts or system fonts	Nunito Sans, Roboto, Montserrat
Font Weight	Thickness of the font	300 (Light), 400 (Regular), 600 (Semi Bold), 700 (Bold)
Font Style	Normal or italic	Regular, Italic
Font Size	Height of the text	16px, 24px, 2rem
Line Height	Space between lines	1.2 (tight), 1.4 (normal), 1.6 (relaxed)
Letter Spacing	Space between characters	0 (default), 0.05em (loose), -0.02em (tight)
Text Transform	Case style	none, uppercase, lowercase, capitalize
Text Align	Horizontal alignment	left, center, right
Text Decoration	Additional styling	none, underline

Recommended Font Combinations by Site Type

Corporate Site

Goal: Professional, trustworthy, clean

H1-H3: Montserrat (Bold, 600-700 weight)
H4-H6: Montserrat (Semi Bold, 500-600 weight)
Body: Roboto (Regular, 400 weight)

Visual Effect: Modern corporate feel with excellent readability

Settings:

H1: 38px, Line Height 1.2, Letter Spacing -0.01em
H2: 30px, Line Height 1.3, Letter Spacing -0.01em
H3: 24px, Line Height 1.4
H4-H6: Decrease by 2px each

Creative Agency

Goal: Bold, unique, attention-grabbing

Headings: Poppins (Bold, 700 weight)
Body: Inter (Regular, 400 weight)

Visual Effect: Strong personality with geometric precision

Settings:

H1: 42px, Line Height 1.1, Letter Spacing -0.02em, Transform: uppercase
H2: 32px, Line Height 1.2, Letter Spacing 0.01em
H3: 26px, Line Height 1.3
Tight line height creates impact
Generous letter spacing for uppercase text

Blog or Magazine

Goal: Readable, comfortable, editorial

Headings: Playfair Display or Merriweather (Regular, 400 weight)
Body: Lora or Georgia (Regular, 400 weight)

Visual Effect: Classic editorial look, easy on the eyes for long reading

Settings:

H1: 36px, Line Height 1.3, Weight: 700
H2: 28px, Line Height 1.4, Weight: 600
H3: 24px, Line Height 1.5
Relaxed line heights for comfort
Serif fonts add elegance

E-commerce Store

Goal: Clear, modern, conversion-focused

Headings: Source Sans Pro (Semi Bold, 600 weight)
Body: Source Sans Pro (Regular, 400 weight)

Visual Effect: Unified, professional, optimized for scanning

Settings:

H1: 32px, Line Height 1.3 (product titles need to work in grids)
H2: 26px, Line Height 1.4 (category headers)
H3: 22px, Line Height 1.4 (product details)
Same font family for cohesion
Moderate sizes for dense product info

Community Platform

Goal: Friendly, welcoming, social

Headings: Nunito Sans (Semi Bold, 600 weight)
Body: Nunito Sans (Regular, 400 weight)

Visual Effect: Rounded, approachable, perfect for social interactions

Settings:

H1: 30px, Line Height 1.4
H2: 24px, Line Height 1.4
H3: 22px, Line Height 1.4
Consistent line heights create rhythm
Rounded fonts feel friendlier
Moderate sizes work well with avatars and user content

Creating Visual Hierarchy

The Size Ratio Method

A proven approach is to use consistent ratios between heading sizes:

Classic Scale (1.25 ratio):

H1: 30px
H2: 24px (30 ÷ 1.25)
H3: 19.2px (round to 20px)
H4: 16px
H5: 13px
H6: 10px

Modern Scale (1.33 ratio - "Perfect Fourth"):

H1: 38px
H2: 28px
H3: 21px
H4: 16px
H5: 12px
H6: 9px

Bold Scale (1.5 ratio):

H1: 48px
H2: 32px
H3: 21px
H4: 14px

Use the ratio that matches your site's personality: classic for traditional sites, modern for most current websites, bold for creative or marketing sites.

The Weight Contrast Method

Instead of large size differences, use weight variations:

All Headings: 18px - 24px range

H1: 24px, Weight 800
H2: 22px, Weight 700
H3: 20px, Weight 600
H4: 18px, Weight 500
H5: 18px, Weight 400
H6: 18px, Weight 300

This creates subtle hierarchy perfect for minimalist designs or dense informational content.

Font Weight Guidelines

Understanding font weights helps you make better choices:

Weight	Number	When to Use
Thin	100	Rarely used, decorative only
Extra Light	200	Hero text on light backgrounds
Light	300	Large headings, elegant feel
Regular	400	Body text standard
Medium	500	Subtle emphasis, H5-H6
Semi Bold	600	Most headings, H2-H4
Bold	700	Strong headings, H1-H2
Extra Bold	800	Impact headings, marketing
Black	900	Maximum impact, use sparingly

Important: Not all fonts support all weights. Google Fonts shows available weights in the Customizer font picker.

Line Height Best Practices

Line height affects readability and visual rhythm:

Line Height	Best For	Example Use
1.0 - 1.2	Large display headings	Hero H1, landing page titles
1.2 - 1.4	Standard headings	H1-H3, most heading use
1.4 - 1.6	Small headings	H4-H6, matches body text
1.6 - 1.8	Body text	Paragraph content

Rule of Thumb: Larger text = tighter line height. As font size increases, line height can decrease.

Letter Spacing Guidelines

Letter spacing (tracking) fine-tunes readability:

Spacing	Effect	When to Use
-0.02em to -0.01em	Tighter	Large headings, saves space
0	Default	Most general use
0.01em to 0.05em	Looser	Uppercase text, improves legibility
0.1em+	Very loose	All-caps subheadings, design effect

Golden Rule: When using uppercase text, always add positive letter spacing (0.05em minimum).

Responsive Considerations

Heading sizes that work on desktop may be too large on mobile. Consider:

Mobile-Friendly Sizes

H1: Max 30px on mobile (even if 48px on desktop)
H2: Max 24px on mobile
Reduce desktop sizes by 20-30% for mobile
Use CSS media queries or WordPress block editor responsive settings

Responsive Strategies

Proportional Scaling: Reduce all headings by same percentage on mobile
Flattened Hierarchy: Make H1-H3 closer in size on small screens
Viewport Units: Use vw units for headings that scale with screen width

BuddyX Pro automatically handles some responsive adjustments, but you can fine-tune via Additional CSS if needed.

Accessibility Guidelines

Make your headings accessible to all users:

Contrast Requirements

Regular text: 4.5:1 minimum contrast ratio
Large text (18px+): 3:1 minimum contrast ratio
Most headings qualify as "large text"
Test contrast at WebAIM Contrast Checker

Structure Requirements

Use heading levels in order (H1 → H2 → H3, never skip levels)
Don't choose heading levels based on size alone
Use semantic HTML structure (WordPress handles this)
Screen readers navigate by heading hierarchy

Font Choice for Accessibility

Avoid decorative fonts for long headings
Ensure adequate spacing (don't compress too tightly)
Test with larger browser text sizes (125%, 150%)
Sans-serif fonts generally more accessible than serif

Configuration Examples

Example 1: Modern SaaS Website

H1: Poppins, 42px, Weight 700, Line Height 1.2, Letter Spacing -0.01em
H2: Poppins, 32px, Weight 600, Line Height 1.3, Letter Spacing 0
H3: Poppins, 24px, Weight 600, Line Height 1.4, Letter Spacing 0
H4: Poppins, 20px, Weight 500, Line Height 1.4, Letter Spacing 0
Body: Inter, 16px, Weight 400, Line Height 1.6

Effect: Bold, contemporary, tech-focused

Example 2: Elegant Portfolio

H1: Playfair Display, 48px, Weight 400, Line Height 1.3, Letter Spacing 0
H2: Playfair Display, 36px, Weight 400, Line Height 1.4, Letter Spacing 0
H3: Lato, 22px, Weight 600, Line Height 1.4, Letter Spacing 0.02em, Transform: uppercase
H4: Lato, 18px, Weight 400, Line Height 1.5, Letter Spacing 0
Body: Lato, 17px, Weight 400, Line Height 1.7

Effect: Sophisticated serif headings with clean sans-serif subheadings

Example 3: Friendly Community

H1: Nunito Sans, 32px, Weight 700, Line Height 1.3, Letter Spacing 0
H2: Nunito Sans, 26px, Weight 600, Line Height 1.4, Letter Spacing 0
H3: Nunito Sans, 22px, Weight 600, Line Height 1.4, Letter Spacing 0
H4: Nunito Sans, 18px, Weight 500, Line Height 1.5, Letter Spacing 0
Body: Nunito Sans, 16px, Weight 400, Line Height 1.6

Effect: Unified, rounded, approachable (recommendation for community sites — not the theme default; the 5.1.0 default uses the system-ui baseline)

Example 4: Editorial Blog

H1: Merriweather, 36px, Weight 700, Line Height 1.3, Letter Spacing 0
H2: Merriweather, 28px, Weight 700, Line Height 1.4, Letter Spacing 0
H3: Open Sans, 20px, Weight 600, Line Height 1.5, Letter Spacing 0.01em
H4: Open Sans, 18px, Weight 600, Line Height 1.5, Letter Spacing 0
Body: Georgia, 18px, Weight 400, Line Height 1.7

Effect: Classic newspaper style optimized for reading

Common Questions

Q: Should all my headings use the same font?

A: Not necessarily. Many sites use:

One font for everything - Most unified, easiest to manage
Display font for H1-H2, body font for H3-H6 - Popular middle ground
Serif for headings, sans-serif for body (or vice versa) - Classic pairing

Start with one font family. Only add a second if you have a specific design reason.

Q: Why do my headings look different than in the Customizer preview?

A: Several possible reasons:

Other plugins might be adding conflicting CSS
Your content editor (Gutenberg) may override heading styles
Browser caching - hard refresh (Ctrl+F5 or Cmd+Shift+R)
Some fonts render differently across operating systems

Check "Additional CSS" for conflicting rules, and clear your cache.

Q: How do I make different heading sizes for mobile and desktop?

A: BuddyX Pro provides basic responsive handling. For advanced control, add custom CSS:

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: 36px; }
}

/* Mobile */
@media (max-width: 767px) {
  h1 { font-size: 28px; }
}

Add this in Appearance > Customize > Additional CSS.

Q: Some Google Fonts don't have all weights - what should I do?

A: Each font family supports different weights:

Roboto - All weights 100-900
Playfair Display - Limited to 400, 500, 600, 700, 800, 900
Pacifico - Only 400

Check the font's Google Fonts page. If your chosen weight isn't available, the browser will approximate it (not ideal). Choose a font with the weights you need, or adjust your design to use available weights.

Q: What's the difference between letter spacing and word spacing?

Letter spacing (tracking) - Space between individual characters. Use this for headings.
Word spacing - Space between whole words. Rarely adjusted in web design.

BuddyX Pro typography settings control letter spacing, which is what you'll adjust most often.

Q: My headings look too bold or too light - how do I fix this?

A: Font rendering varies across systems:

Mac/iOS - Tends to render fonts slightly heavier
Windows - Often renders fonts lighter
Linux - Varies by distribution

Choose a weight that looks good on your primary audience's platform. If unsure, weight 600 is usually safe across all systems for headings.

Q: Can I use different fonts for BuddyPress vs. regular pages?

A: Yes, but requires custom CSS:

/* Regular page headings */
.page h1 { font-family: 'Montserrat', sans-serif; }

/* BuddyPress headings */
.buddypress h1 { font-family: 'Nunito Sans', sans-serif; }

However, using consistent typography site-wide creates better user experience.

Q: How many heading levels should I actually use?

A: Most content needs only H1-H3:

Simple pages - H1 (title) + H2 (sections)
Blog posts - H1 (title) + H2 (major sections) + H3 (subsections)
Documentation - H1-H4 for deep content structure
Landing pages - Often just H1-H2

Don't force deeper hierarchy just because you have H4-H6 available. If you need more than four levels, consider reorganizing your content structure.

Troubleshooting

Issue: Headings don't match body font settings

Cause: Headings and body have separate typography controls.

Solution:

Check Typography > Headings Typography for heading settings
Check Typography > Body Typography for body text settings
If you want consistent fonts, set the same family in both places

Issue: Customizer shows changes but live site doesn't

Cause: Caching plugin or browser cache.

Solution:

Click "Publish" in Customizer (don't just preview)
Clear your caching plugin cache
Hard refresh browser (Ctrl+F5 or Cmd+Shift+R)
Check in incognito/private browsing mode
If using Cloudflare or CDN, purge cache there too

Issue: Heading hierarchy looks wrong in editor vs. frontend

Cause: Block editor uses different styles than theme.

Solution: BuddyX Pro synchronizes editor styles with theme styles. If they still differ:

Check if another plugin adds editor styles
Go to Gutenberg > Preferences > Appearance and enable "Show preview"
Update theme to latest version

Issue: Google Font loads slowly

Cause: External font files take time to download.

Solution:

Reduce number of font weights loaded (use 2-3 weights max)
Use font-display: swap (BuddyX Pro does this automatically)
Consider system fonts for fastest loading
Combine with Google Fonts optimization

Issue: Headings look squished or overlapping

Cause: Line height too tight.

Solution:

Increase line height to minimum 1.2 for large headings
Add bottom margin if headings touch following content
Check for negative letter spacing that's too aggressive

Issue: Uppercase headings hard to read

Cause: Insufficient letter spacing.

Solution:

Add 0.05em to 0.1em letter spacing for uppercase text
Consider using sentence case instead
Reduce font weight slightly (uppercase looks heavier)

Body Typography - Configure main text appearance
Google Fonts Integration - Font loading and performance
Site Title Typography - Logo/site name styling
Menu Typography - Navigation font settings
Color Scheme - Heading text colors

Performance Tips

Limit font families - Use 1-2 families maximum (one for headings, one for body)
Limit font weights - Each weight adds ~20-50KB to page load
Use system fonts for speed - Zero network requests for fastest possible loading
Combine with font optimization - See Google Fonts guide for advanced techniques

Got a question? We're a friendly team - happy to help.

Typography Presets

Pick a curated font pair sourced from a real product brand system in one click. Each preset fills every typography field on your site (Site Title, Site Tagline, H1-H6, Menu, Sub-menu, Body) with a coherent pairing - matching weight, size, line-height, and a scale ratio that keeps headings in tune. After picking, every individual typography field is still editable for fine-tuning.

New in BuddyX Pro 5.1.0.

Typography Preset Picker The Typography Presets section in the Customizer. Each card shows the heading + body font live, with a brand-credit caption underneath.

What You Can Do

Apply one of 7 hand-picked font pairs by clicking a single card
Adjust the global base font size (12-22 px)
Adjust the heading scale ratio (Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, Augmented Fourth 1.414)
Override any single field afterwards (Site Title, Site Tagline, H1-H6, Menu, Sub-menu, Body) without losing the preset elsewhere

Available Presets

Preset	Brand credit	Heading	Body	Vibe
Inter	Linear, Notion, Figma	Inter	Inter	Clean modern SaaS, dense interfaces
Geist	Vercel	Geist	Geist	Technical, developer-tooling polished
IBM Plex	IBM	IBM Plex Sans	IBM Plex Sans	Corporate, neutral, slab-adjacent
DM Sans	Google Design	DM Sans	DM Sans	Friendly, rounded, marketing sites
Editorial	NYT, Intercom	Source Serif 4	Source Sans 3	Long-form articles, serif headings + sans body
Magazine	Premium editorial	Playfair Display	Lora	High-contrast display headings, serif body
Humanist	Publishing	Newsreader	Crimson Pro	Warm serif, book-like reading

Font stacks fall back to system fonts (system-ui, Georgia/Times, sans-serif) so text stays readable while the web fonts load. Inter falls back to the system UI stack and loads no Google font; the other six load their Google families only while their card is previewed or their preset is active.

Accessing Presets

Go to Appearance > Customize
Click on Typography
Open the Font Preset section at the top
Click any preset card

The selected card gets a check badge. The customizer iframe refreshes once and every typography field underneath updates to match. A Default card sits first as an escape hatch - it leaves your per-control font choices untouched.

Size & Scale

Two sliders sit under the preset picker:

Base font size

The body / paragraph size in pixels. All other sizes (H1-H6, Menu, Site Title) are recomputed from this baseline.

12-14 px - Dense interfaces, dashboards
16 px (default) - Standard reading
17-20 px - Editorial, blog-first sites
21-22 px - Display, hero-heavy designs

Heading scale ratio

Controls how much larger each heading level is relative to the next one down. h6 = base, then each step multiplies by the ratio: h5 = base * ratio, h4 = base * ratio^2, ... h1 = base * ratio^4.

Ratio	Name	Use For
1.2	Minor Third	Subtle hierarchy, dense UIs
1.25	Major Third (default)	Clean sans, standard product sites
1.333	Perfect Fourth	Editorial, news, magazine sites
1.414	Augmented Fourth	Display headings, hero-led marketing

Each preset above ships its own recommended Base Size + Scale Ratio - picking a preset updates both sliders, so you do not need to set them manually.

Fine-tuning Individual Fields

Picking a preset does not lock anything. Below the preset section, every individual typography control is still editable:

Typography > Site Title - hero / branding text (gets the heading font)
Typography > Site Tagline - the tagline under the site title (gets the body font)
Typography > Headings > H1 through H6 (get the heading font)
Typography > Menu - primary nav (gets the body font)
Typography > Sub-menu - dropdown items (gets the body font)
Typography > Body - paragraphs + general text (gets the body font)

Site Title and H1-H6 receive the preset's heading font; Site Tagline, Menu, Sub-menu, and Body receive its body font. Use the preset for the 95% match, then tweak any single field for fine control. Re-picking the preset re-applies the full pair from scratch.

When to Use Presets vs Manual

Scenario	Recommendation
Brand-new site, no typography decisions yet	Pick a preset that matches your industry vibe
Want to match an existing brand book	Manual - set Site Title + H1 by hand, leave the rest to a preset that's close
Migrating from BuddyX 5.0.x with Kirki typography	Existing values persist. Pick a preset only if you want to start fresh
Switching to dark mode	No change - presets are colour-agnostic, dark mode only swaps the palette

Performance

Each preset's Google Fonts are loaded only when that preset is active. Switching presets re-enqueues the new pair on the next page load (no double-load on the same view). All fonts ship with font-display: swap for fast first paint.

Body Typography - Paragraph + general text controls
Heading Typography - H1-H6 fine-tuning
Google Fonts Integration - How fonts are loaded
Color Presets - Pre-built colour schemes (the colour-side cousin of this picker)

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Skin & Colors

6 color scheme presets, dark mode, border radius, and live customizer preview.

Border Radius

Control how rounded or sharp the corners of your buttons, form fields, cards, and containers appear. BuddyX Pro exposes three global border-radius controls so you can match your site's shape language to your brand - a modern, soft look or a clean, sharp aesthetic.

Site Layout Settings Border radius controls in the Site Layout section

What You Can Do

Set a single global corner radius for content, cards, and containers
Set a separate radius for buttons
Set a separate radius for form fields (inputs and selects)
Switch between modern (rounded) and traditional (sharp) designs instantly

What is Border Radius?

Border radius determines how rounded the corners of elements appear:

Style	Radius	Visual Effect
Sharp (0px)	No rounding	Square corners, traditional look
Subtle (3-5px)	Slight rounding	Softened edges, professional
Moderate (8-12px)	Noticeable rounding	Modern, friendly appearance
Rounded (15-25px)	Heavy rounding	Soft, contemporary design
Pill (50px+)	Fully rounded	Capsule-shaped buttons and badges

The three border-radius controls

BuddyX Pro ships exactly three border-radius controls. They all live in the same place - the Site Layout section, not a separate "Skin" panel.

Go to Appearance > Customize
Open General > Site Layout
Scroll to the border-radius controls

Each control is a dimension field: type a pixel value such as 8px.

Control	Key	Default	What it controls
Global Border Radius	`site_global_border_radius`	8px	Content, cards, containers, images, and most other elements site-wide.
Buttons Border Radius	`site_button_border_radius`	6px	All buttons across the site.
Form Border Radius	`site_form_border_radius`	6px	Form elements (inputs, selects) - textareas are excluded.

There is no separate control for images, avatars, cards, or badges. Those surfaces follow the Global Border Radius. Buttons and form fields are the only elements with their own dedicated control.

Global Border Radius

What it controls: content boxes, widget containers, post cards, images, and general elements.

Setting	Appearance	Best For
0px	Structured, grid-like	Minimal, editorial sites
5-8px	Polished, professional	Business sites
10-15px	Modern, clean	Contemporary designs
20-25px	Soft, friendly	Creative, casual sites

Examples affected:

Blog post cards
Widget containers
BuddyPress activity items
Member / group cards
Course cards (LearnDash)
Product cards (WooCommerce)
Featured images and thumbnails

Buttons Border Radius

What it controls: every button across your site.

Setting	Appearance	Best For
0px	Square, traditional	Corporate, formal sites
3-5px	Slightly softened	Professional businesses
8-12px	Modern, approachable	Most websites
20-30px	Pill-shaped	Creative, friendly brands

Examples affected:

Login / Register buttons
Submit buttons on forms
Call-to-action buttons
BuddyPress action buttons (Follow, Join Group)
WooCommerce Add to Cart buttons

Form Border Radius

What it controls: text inputs, select boxes, and search fields. (Textareas keep the theme default and are not affected by this control.)

Setting	Appearance	Best For
0px	Clean, sharp	Minimal designs
3-4px	Subtle rounding	Professional forms
6-8px	Friendly, modern	Most websites
10-15px	Soft, welcoming	Creative sites

Examples affected:

Contact form fields
Search boxes
Login fields
BuddyPress activity post box inputs
WooCommerce checkout fields

Design Styles by Industry

Corporate & Professional (Sharp to Subtle)

Global:  5px
Buttons: 3px
Forms:   3px

Effect: Professional, structured, trustworthy. Works well for finance, legal, consulting, B2B sites.

Modern & Tech (Moderate Rounding)

Global:  12px
Buttons: 8px
Forms:   6px

Effect: Contemporary, clean, approachable. Perfect for tech companies, SaaS platforms, startups.

Creative & Friendly (Heavy Rounding)

Global:  22px
Buttons: 26px
Forms:   12px

Effect: Soft, welcoming, creative. Ideal for creative agencies, social platforms, lifestyle brands.

Minimal & Editorial (Sharp Edges)

Global:  0px
Buttons: 0px
Forms:   0px

Effect: Clean, structured, traditional. Great for news sites, magazines, portfolios, editorial content.

Global:  12px
Buttons: 10px
Forms:   6px

Effect: Friendly, modern, engaging. Perfect for BuddyPress communities, forums, social networks.

Quick Style Presets

Preset 1: Sharp & Professional

All three controls set to 0px for a traditional, structured look.

Use when: You want a serious, corporate, or editorial aesthetic.

Pairs well with:

Trust color preset (deep navy)
Carbon color preset (near-black, premium)
Classic fonts (serif or traditional sans-serif)

Preset 2: Modern Standard (the theme default)

The values BuddyX Pro ships with:

Global: 8px
Buttons: 6px
Forms: 6px

Use when: You want a contemporary, professional look that's still approachable.

Pairs well with:

Sapphire or Cobalt color preset
Default Light preset
Sans-serif fonts

Preset 3: Soft & Friendly

Generous rounding for a welcoming feel:

Global: 20px
Buttons: 25px (pill)
Forms: 12px

Use when: You want a creative, friendly, or casual community vibe.

Pairs well with:

Coral preset
Commerce preset (forest green)
Rounded, friendly fonts

Consistency Tips

Match Your Brand Guidelines

If your logo or brand materials use:

Sharp corners -> Use 0-5px across all three controls
Rounded corners -> Use 8-15px
Very rounded -> Use 15-30px

Keep It Consistent

Do:

Keep buttons and forms within a few pixels of each other
Match the global radius to your overall style

Avoid:

Mixing sharp (0px) buttons with a heavily rounded (20px) global radius
Drastically different values across the three controls

Test Across Your Site

After setting border radius, check:

Homepage layout
Blog post pages
Form pages (contact, checkout)
BuddyPress profiles and activity
Shop pages (if using WooCommerce)

Impact on User Experience

Rounded Corners (8px+)

Benefits:

Appears more modern and approachable
Guides the eye naturally around elements
Creates a friendlier, less formal impression

Best for: Social platforms, creative sites, modern businesses, casual communities

Sharp Corners (0-3px)

Benefits:

Maximizes content space
Creates a structured, organized feel
Appears more traditional and serious

Best for: News sites, corporate platforms, editorial content, formal businesses

Combining Border Radius with Other Settings

With Color Presets

Rounded + Bright Colors = Friendly, energetic

Global / Buttons: 15-25px
Color Preset: Coral or Commerce

Sharp + Professional Colors = Corporate, trustworthy

Global / Buttons: 0-3px
Color Preset: Trust or Carbon

Moderate + Modern Colors = Contemporary, balanced

Global / Buttons: 8-12px
Color Preset: Sapphire or Indigo

With Typography

Rounded + Rounded Fonts = Very friendly (radius 15px+, fonts like Nunito or Quicksand).

Sharp + Geometric Fonts = Very structured (radius 0-3px, fonts like Montserrat or Roboto).

Mixed (Recommended) = Balanced (radius 8px, traditional sans-serif).

Mobile Considerations

Border radius can appear more pronounced on small screens:

Avoid very large radius values (30px+) if buttons span the full mobile width
Test tappable areas on touchscreens after changing values

Common Questions

Can I set a different radius for individual buttons?

The Buttons Border Radius control applies to all buttons. For specific buttons, use custom CSS or a child theme.

Is there a separate control for images, avatars, or badges?

No. Those follow the Global Border Radius. Only buttons and form fields have their own controls. (BuddyX Pro typically renders avatars as circles regardless.)

Are textareas affected by the Form Border Radius?

No. The Form Border Radius covers inputs and selects; textareas are intentionally excluded and keep the theme default.

Will changing border radius affect my site's speed?

No, border radius is a lightweight CSS property with no performance impact.

Can I use a different radius for light and dark mode?

No. Border radius applies to both modes; the shape stays consistent.

What if I don't see changes after adjusting?

Clear your browser cache (Ctrl+F5 or Cmd+Shift+R) and make sure you clicked Publish in the Customizer.

Troubleshooting

Changes Not Appearing

Problem: Adjusted border radius but elements look the same.

Solutions:

Click Publish in the Customizer
Clear browser cache (hard refresh)
Check if custom CSS is overriding theme styles
Disable caching plugins temporarily

Inconsistent Rounding

Problem: Some elements are rounded, others aren't.

Possible causes:

Plugin styles overriding theme styles
Custom CSS with higher specificity
The element type isn't governed by one of the three controls

Solution: Use your browser's inspect tool to check which styles are applied.

Color Presets - Complete your visual style
Color Scheme Settings - Customize site colors
Dark Mode - Color mode toggle and dark palette
Typography Settings - Choose matching fonts

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Color Presets

Apply one of 14 hand-tuned palettes with a single click. Each preset rewires the entire colour system - header, buttons, links, surfaces, body text, accent - and runs cleanly in both light and dark mode without any extra setup.

New in BuddyX Pro 5.1.0.

Default Light preset Default Light - the baseline preset BuddyX Pro ships with: neutral surfaces + the active accent colour.

What you can do

Apply one of 14 brand-tested palettes from a visual swatch picker
Switch between palettes without losing any other customizer setting (typography, layout, header style)
Use the same preset across light + dark mode - the preset ships both halves so the colour mode toggle just works
Override individual colours after picking a preset (the per-cluster Site Skin controls still take precedence over the preset)

Accessing color presets

Appearance > Customize
Open the Site Skin section
Find the Style preset card grid (it sits right under the Color Mode toggle)
Click any card. The preview updates immediately. Click Publish when you have the one you want.

Available presets (5.1.0)

Slug	Name	Accent	Vibe
`default-light`	Default Light	active accent	Neutral surface + bright accent. The starting point.
`default-dark`	Default Dark	active accent	Same accent, dark surface.
`neutral`	Neutral	`#18181b`	Greyscale interface, ideal for content-led products.
`sapphire`	Sapphire	`#0070F3`	Vercel-style bright blue. SaaS / developer tools.
`indigo`	Indigo	`#635BFF`	Stripe-style indigo. Fintech / dashboards.
`cobalt`	Cobalt	`#0C66E4`	Atlassian-style cobalt. Productivity / B2B.
`trust`	Trust	`#0530AD`	Deep navy. Banking / insurance / legal.
`commerce`	Commerce	`#2A6E3F`	Forest green. Marketplaces / sustainability.
`signal`	Signal	`#F22F46`	High-contrast red. Alerts / news / emergency.
`coral`	Coral	`#FF7A59`	HubSpot-style warm coral. Marketing / hospitality.
`aubergine`	Aubergine	`#4A154B`	Slack-style dark purple. Communities / collaboration.
`midnight`	Midnight	`#1E3A5F`	Deep blue-grey. Editorial / publishing.
`stone`	Stone	`#57534E`	Warm stone neutral. Wellness / lifestyle.
`carbon`	Carbon	`#09090B`	Near-black. Premium / luxury.

Preset previews

Default Light (neutral surface, light backgrounds):

Default Light frontend

Default Dark (dark surfaces, same accent, recommended for night-first communities):

Default Dark frontend

Sapphire (bright blue, SaaS-friendly):

Sapphire preset

Indigo (rich purple-blue, fintech-friendly):

Indigo preset

Coral (warm coral, marketing-friendly):

Coral preset

How presets interact with Color Mode

Each preset ships both a light variant and a dark variant. When the site default (site_color_mode) is Dark, or when a visitor toggles to dark mode, the matching variant kicks in - you do NOT need to pick a separate preset for dark mode.

If you want a different palette in dark mode (e.g. light = Coral, dark = Carbon), set the per-cluster Site Skin controls instead of a preset, since they accept independent light + dark values.

Customising after a preset

Picking a preset does NOT lock the colour controls. The per-cluster fields under Site Skin (Header BG, Body BG, Buttons, Side Panel, Footer, Copyright) take precedence over the preset's defaults. Workflow:

Pick the closest-matching preset for the 95% case
Open the per-cluster control for the colour you want different
Pick the exact hex / RGBA value
Save

The preset stays selected (the swatch card still has the check badge); the explicit overrides win on the frontend.

Resetting

The swatch grid's first card is Default (theme) - the empty preset. Pick it to clear your preset selection: it leaves your per-control Site Skin color settings untouched and lets the theme's built-in defaults paint. This is the built-in "reset to no preset" escape hatch.

To return fully to the theme baseline look, pick Default Light (or Default Dark) to re-apply the shipped palette, or pick Default (theme) and clear any per-cluster overrides you set.

Performance

Switching presets is a single theme_mod write. The Customizer Framework re-emits the CSS custom-property block on the next page render; no extra HTTP or DB hit per preset. Site Skin colours flow through the --bx-color-* token system documented in Theme Architecture.

Color Scheme - Per-cluster colour controls that override the preset
Dark Mode - Color mode toggle + the light/dark variant pairing
Typography Presets - The typography-side cousin of this picker

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Color Scheme Settings

BuddyX Pro provides comprehensive color customization options to match your brand identity. Configure primary colors, secondary colors, backgrounds, and component-specific colors through the Site Skin panel in the Customizer.

This page covers the light-mode palette. The parallel dark-mode palette (45 dedicated dark_* controls) is documented in Dark Mode. For one-click preset palettes, see Color Presets.

Site Skin Panel - Light Mode The Site Skin panel in the WordPress Customizer showing color scheme options

Accessing Color Settings

Go to Appearance → Customize
Open the Site Skin section

The section contains: a Style preset picker (visual swatch grid), a Color Mode toggle (light / dark), per-cluster color controls for every surface, and a parallel Dark Palette subsection.

Set Custom Colors?

Setting	Key	Options	Default
Set Custom Colors?	`site_custom_colors`	Yes / No	Yes

This is the master switch for the whole color palette. When it's set to Yes, every per-cluster color control below (Top Bar, Header, Sub Header, Body, Buttons, Side Panel, Footer, Copyright - light and dark) becomes editable. Set it to No to hide all the individual color pickers and fall back to the colors that come from your Style preset or the theme defaults. Leave it on Yes whenever you want to hand-tune colors.

Every color control in this section has a Dark Mode counterpart with a matching dark_* key (for example site_footer_background_color for light, dark_site_footer_background_color for dark). The dark twin of each control only appears when Color Mode is Dark or the visitor toggles to dark. The full dark palette is documented in Dark Mode.

How your color choices reach the site

When you change a color in the Customizer, it updates instantly everywhere it's used - buttons, links, headings, cards, blocks, patterns, even your dark-mode counterpart if you have one. You don't have to clear caches or tell anything to rebuild.

Developers + child-theme authors curious about the token system that makes this work - see Design Tokens for the full reference, or the Dark Mode developer notes for the architecture.

Primary Color Settings

The primary color is used throughout your site for buttons, links, accents, and interactive elements.

Primary Color

Setting	Description	Default
Primary Color (`site_primary_color`)	Main brand color	`#ee4036`
Primary Hover Color	Hover state for primary elements	Darkened primary

Where Primary Color Appears:

Buttons and call-to-action elements
Links (text and menu items)
Active/selected states
Progress bars and indicators
Form focus states
Navigation underlines
BuddyPress accent elements

Secondary Color

Setting	Description	Default
Secondary Color	Supporting brand color	#03A9F4
Secondary Hover Color	Hover state for secondary elements	Darkened secondary

Where Secondary Color Appears:

Secondary buttons
Alternative link colors
Accent elements
Badges and tags
Alternate hover states

Background Colors

Site Background

Setting	Key	Default
Site Background Color	`body_background_color`	`#f7f7f9`
Site Background Image	`background_image` (WP core)	None
Background Repeat	`background_repeat`	No Repeat
Background Position	`background_position`	Center Center
Background Size	`background_size`	Cover
Background Attachment	`background_attachment`	Scroll

Content Background

Setting	Key	Default
Content Background	`content_background_color`	`#f7f7f9`
Box Background (cards / elevated surfaces)	`box_background_color`	`#ffffff`
Secondary Background (subtle tint)	`secondary_background_color`	`#fafafa`
Global Border Color	`site_border_color`	`#e4e3e3`

Header Background

Setting	Key	Default
Header Background	`site_header_bg_color`	`#ffffff`
Site Title Color	`site_title_color`	`#003049`
Site Title Hover	`site_title_hover_color`	`#e94560`
Menu Link	`menu_color`	`#003049`
Menu Hover	`menu_hover_color`	`#ee4036`
Menu Active	`menu_active_color`	`#ee4036`

Top Bar

These controls only appear when the top bar is enabled (Header → Top Bar). Each has a Dark Mode twin.

Setting	Key	Default
Top Bar Background Color	`topbar_background_color`	`#ee4036`
Top Bar Content Color	`topbar_content_color`	`#ffffff`
Top Bar Link Color	`topbar_links_color`	`#ffffff`
Top Bar Link Hover	`topbar_links_hover_color`	`#ee4036`

Sub-Header Background

The sub-header is the breadcrumb / page-title strip below the header.

Setting	Key	Default
Subheader Background Color	`site_subheader_bg_color`	`rgba(255,255,255,0.5)`
Subheader Title Color	`subheader_title_color`	`#003049`

Colors for the slide-out side panel and its toggle icon. Each has a Dark Mode twin.

Setting	Key	Default
Side Panel Toggle Color	`side_panel_toggle_color`	`#ee4036`
Side Panel Background Color	`side_panel_background_color`	`#ffffff`
Side Panel Menu Color	`side_panel_menu_color`	`#003049`
Side Panel Menu Hover Color	`side_panel_menu_hover_color`	`#ee4036`
Side Panel Menu Active Color	`side_panel_menu_active_color`	`#ee4036`
Side Panel Menu BG Hover Color	`side_panel_menu_bg_hover_color`	`#ffffff`
Side Panel Menu BG Active Color	`side_panel_menu_bg_active_color`	`#ffffff`

Setting	Key	Default
Footer Background	`site_footer_background_color`	`#ffffff`
Footer Title	`site_footer_title_color`	`#003049`
Footer Text	`site_footer_content_color`	`#505050`
Footer Link	`site_footer_links_color`	`#003049`
Footer Link Hover	`site_footer_links_hover_color`	`#ee4036`

Copyright Bar

Colors for the copyright strip below the footer widgets. Each has a Dark Mode twin. (#copyright-settings-bxpro).)

Setting	Key	Default
Copyright Background Color	`site_copyright_background_color`	`#ffffff`
Copyright Content Color	`site_copyright_content_color`	`#505050`
Copyright Link Color	`site_copyright_links_color`	`#003049`
Copyright Link Hover Color	`site_copyright_links_hover_color`	`#ee4036`

Text Colors

Body Text

Setting	Key	Default
Body Text Color	`body_text_color`	`#505050`
Heading Color	`headings_color`	`#003049`
Link Color	`site_links_color`	`#003049`
Link Hover Color	`site_links_focus_hover_color`	`#ee4036`

Meta Text

Meta-text colors (post meta, dates, muted helpers) inherit from the --bx-color-fg-muted and --bx-color-fg-subtle tokens - these aren't directly customizer-exposed but derive from the body-text customizer choices via the token cascade. To customize them explicitly, use a child theme or custom CSS targeting --bx-color-fg-muted / --bx-color-fg-subtle on :root.

Component Colors

Buttons

Setting	Key	Default
Button Background	`site_buttons_background_color`	`#ee4036`
Button Text	`site_buttons_text_color`	`#ffffff`
Button Border	`site_buttons_border_color`	`#ee4036`
Button Hover Background	`site_buttons_background_hover_color`	`#f83939`
Button Hover Text	`site_buttons_text_hover_color`	`#ffffff`
Button Hover Border	`site_buttons_border_hover_color`	`#f83939`

Forms

Form input styling inherits from the global --bx-color-border, --bx-color-bg-elevated, and --bx-color-fg tokens. Focus borders use --bx-color-accent (the primary color). To customize form-specific colors beyond the global cascade, override via child-theme CSS targeting the relevant input selectors.

Sidebar widgets inherit from the box-background and body-text tokens; widget titles inherit from --bx-color-h3 (heading color). No widget-specific customizer controls - widgets pick up your global color choices automatically via the token cascade.

Color Presets

BuddyX Pro 5.1.0 ships 14 hand-tuned palettes through the Style preset picker. Picking a preset overwrites every per-cluster colour in one click; the per-cluster controls below still take precedence if you change them afterwards.

See Color Presets for the full preset reference (Default Light, Default Dark, Neutral, Sapphire, Indigo, Cobalt, Trust, Commerce, Signal, Coral, Aubergine, Midnight, Stone, Carbon) including frontend previews.

The legacy 5.0.x presets (Default Blue, Fresh Green, Warm Orange, Royal Purple, Modern Teal, Classic Red, Dark Theme, Light Minimal, Ocean Blue, Mocha, Electric, Teal Coral) were retired in 5.1.0 - existing customer saves are migrated to the closest 5.1.0 match on upgrade.

Applying a Preset:

Open Skin > Color Presets in Customizer
Click on desired preset thumbnail
Colors update automatically
Customize individual colors as needed
Publish changes

Color Application Examples

Example 1: Corporate Brand

Primary Color: #003366 (Navy Blue)
Secondary Color: #CC9900 (Gold)
Site Background: #F8F9FA
Content Background: #FFFFFF
Text Color: #333333

Example 2: Community Platform

Primary Color: #5C6BC0 (Indigo)
Secondary Color: #26A69A (Teal)
Site Background: #ECEFF1
Header Background: #FFFFFF
Footer Background: #37474F

Example 3: E-Learning Site

Primary Color: #43A047 (Green)
Secondary Color: #FB8C00 (Orange)
Site Background: #FAFAFA
Content Background: #FFFFFF
Link Color: #1B5E20

Color Accessibility

Ensure your color choices meet accessibility standards:

Contrast Ratios (WCAG 2.1)

Text Type	Minimum Ratio	Recommended
Normal Text	4.5:1	7:1
Large Text (18px+)	3:1	4.5:1
UI Components	3:1	4.5:1

Tools for Checking Contrast:

WebAIM Contrast Checker
Colour Contrast Analyser
Browser DevTools accessibility audit

Color Blindness Considerations

Don't rely solely on color to convey information
Use icons or text alongside color indicators
Test with color blindness simulation tools
Ensure sufficient contrast for all users

How customizer changes reach the front end

5.1.0 emits color tokens inline in the page <head> as a <style> block - there's no separate dynamic CSS file, no transient cache, no admin-ajax round-trip. The token block is rebuilt from theme_mods on every page render (lightweight; ~15 KB of CSS variable declarations).

When you save a customizer change, the new value lands in theme_mods_buddyxpro immediately. The next page load (anywhere on the site) reflects the change.

If colors don't seem to update:

Hard reload the front end (Cmd+Shift+R / Ctrl+F5) - the HTML page response includes the inline tokens, so browser cache of the HTML can serve stale colors. Hard reload bypasses the HTML cache.
Clear page caching plugins (WP Rocket, W3 Total Cache, etc.) - these cache the HTML and don't know your customizer changed.
Purge CDN cache if your CDN caches HTML (most CDNs only cache static assets; HTML caching is opt-in).
Customizer preview vs published: the Customizer preview is the published value as of last Save / Publish. Hit Publish to roll the change out to the live site.

Troubleshooting

Colors Not Applying

Problem: Changed colors don't appear on frontend.

Solutions:

Click "Publish" in Customizer (changes aren't saved until published)
Clear browser cache (Ctrl+F5 / Cmd+Shift+R)
Disable caching plugins temporarily
Check for custom CSS overriding theme styles

Colors Look Different Than Picker

Problem: Selected color looks different on the site.

Solutions:

Monitor color calibration may differ
Check if transparency/opacity is applied
Verify no color filters in browser extensions
Compare in multiple browsers

Preset Doesn't Apply Completely

Problem: Color preset doesn't change all elements.

Solutions:

Some elements may have custom overrides
Check plugin-specific color settings
Clear all caches after applying preset
Some colors may need manual adjustment

Dark Mode Colors Conflicting

Problem: Colors look wrong when dark mode is active.

Solutions:

Configure dark mode specific colors
Check Dark Mode Settings
Some colors auto-invert, others need manual setting
Test both light and dark modes after changes

Color Presets - Pre-designed color schemes
Dark Mode - Dark color scheme settings
Border Radius & Styling - Element styling options
Typography Settings - Font colors

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Dark Mode

BuddyX Pro 5.1.0 ships a complete dark-mode system: two color modes (light / dark), a fully brandable dark palette (45 customizer controls), block-pattern dark coverage, and a first-paint architecture that eliminates the light → dark flash on initial page load.

This page covers everything from the basic "turn dark mode on" workflow through the developer-level architecture. Pick the section that matches your task.

Quick start

Appearance → Customize → Site Skin
Set Color Mode to Light or Dark.
Show color-mode toggle is On by default - leave it on so visitors can switch modes themselves, or set it to Off to lock one look.
Optionally pick a Toggle Position (Floating, Header, Mobile, or Both).
Optionally customize the dark palette (the "(Dark Mode)" color controls in Site Skin).
Click Publish.

That's the minimum. The rest of this page is the full reference.

The two color modes

Set with Site Skin → Color Mode (site_color_mode):

Mode	What loads	Visitor can override?
Light	Site renders in light colors on every visit. Dark palette never applies.	Only if Show Toggle is On - then visitors can toggle to dark.
Dark	Site renders in dark colors on every visit. Dark palette is the default surface.	Only if Show Toggle is On - then visitors can toggle to light.

Default: Light. New installs start with light mode because it's the safest assumption.

Visitor override behavior

When Show Toggle is On, every visitor can pick their own mode by clicking the sun/moon icon. Their choice persists across page loads via cookie + localStorage.

If the admin later changes the site default (e.g. flips from Light to Dark), stored visitor overrides whose stamp doesn't match the new default are discarded - so the new default reaches everyone, including visitors who had previously toggled. This avoids "stuck on the old default" complaints when a site rebrands its dark mode.

Color Mode Toggle controls

Setting	Key	Options	Default	Notes
Show color-mode toggle	`site_color_mode_toggle_show`	On / Off	On	When Off, no toggle UI renders - visitors get only the site default. On by default so the toggle matches BuddyX free out of the box.
Toggle position	`site_color_mode_toggle_position`	Floating / Header / Mobile / Both	Floating	Floating shows a small button on the side of the screen. Header places it next to the menu icons on desktop. Mobile shows it only on mobile (next to the hamburger). Both shows it in both the header AND mobile menu.

Hide the toggle on sites that need a single visual identity (one-mode-only). Use Floating when the header is already crowded with menu items, cart, and notifications.

Dark palette - every customizer control

The Site Skin section of the Customizer exposes 45 dark-mode color controls (each labeled "(Dark Mode)"). Each pairs with a light-mode control of the same name (e.g. body_background_color for light, dark_body_background_color for dark) so you can brand both modes independently.

These controls only render visibly when site_color_mode is Dark or when the visitor toggles to dark. They also require the Set Custom Colors? master switch (site_custom_colors, default Yes) to be on - the same switch that gates the light palette (see Color Scheme). Set it to No and every per-cluster picker, light and dark, is hidden.

Page surfaces

Setting	Key	Default	Purpose
Page background	`dark_body_background_color`	`#1A1A2E`	The body backdrop visitors see behind content (midnight blue baseline).
Content background	`dark_content_background_color`	`#111`	Inside content containers (post body, page body).
Secondary background	`dark_secondary_background_color`	`#0F3460`	Subtle elevation - tinted shade above the page bg.
Card / box background	`dark_box_background_color`	`#16213E`	Cards, panels, widgets, elevated surfaces.

Text

Setting	Key	Default	Purpose
Body text	`dark_body_text_color`	`#bfc2c9`	Default text color across the site.
Headings	`dark_headings_color`	`#fcfcfc`	H1-H6.
Borders	`dark_site_border_color`	`#1d3155`	Dividers, table cell borders, input outlines.

Brand + accents

Setting	Key	Default	Purpose
Brand color	`dark_site_primary_color`	`#E94560`	The brand accent for dark mode (a softer red than the light-mode `#ee4036`). Drives `--bx-color-accent` and the matching `--wp--preset--color--primary` / `--wp--preset--color--accent` block tokens.
Site title	`dark_site_title_color`	`#fcfcfc`	Logo text color when no image logo is set.
Site title hover	`dark_site_title_hover_color`	`#e94560`	Hover state of the title link.
Links	`dark_site_links_color`	`#fcfcfc`	All in-content `<a>` elements.
Link focus / hover	`dark_site_links_focus_hover_color`	`#E94560`	Hover + keyboard focus state.

Buttons

Setting	Key	Default	Purpose
Button background	`dark_site_buttons_background_color`	`#E94560`	Default button bg.
Button background hover	`dark_site_buttons_background_hover_color`	`#f83939`	Hover state.
Button text	`dark_site_buttons_text_color`	`#ffffff`	Text color on the button.
Button text hover	`dark_site_buttons_text_hover_color`	`#ffffff`	Hover text.
Button border	`dark_site_buttons_border_color`	`#E94560`	Border color (matches bg by default).
Button border hover	`dark_site_buttons_border_hover_color`	`#f83939`	Hover border.

Setting	Key	Default	Purpose
Header background	`dark_site_header_bg_color`	`#16213E`	The header strip behind the logo + menu.
Menu link	`dark_menu_color`	`#fcfcfc`	Top-level nav links.
Menu link hover	`dark_menu_hover_color`	`#E94560`	Hover state.
Menu link active	`dark_menu_active_color`	`#E94560`	Active / current-page state.

Sub-header

Setting	Key	Default	Purpose
Sub-header background	`dark_site_subheader_bg_color`	`#0F3460`	The breadcrumb / page-title strip.
Sub-header title	`dark_subheader_title_color`	`#fcfcfc`	Title text in the sub-header.

Setting	Key	Default	Purpose
Topbar background	`dark_topbar_background_color`	`#E94560`	The utility bar above the header.
Topbar text	`dark_topbar_content_color`	`#ffffff`	Plain text in the topbar.
Topbar links	`dark_topbar_links_color`	`#ffffff`	Link color.
Topbar links hover	`dark_topbar_links_hover_color`	`#E94560`	Hover state.

Setting	Key	Default	Purpose
Side panel background	`dark_side_panel_background_color`	`#16213E`	The slide-out panel surface.
Toggle icon	`dark_side_panel_toggle_color`	`#E94560`	The hamburger icon that opens the panel.
Menu link	`dark_side_panel_menu_color`	`#fcfcfc`	Links inside the panel.
Menu link hover	`dark_side_panel_menu_hover_color`	`#E94560`	Hover state.
Menu link active	`dark_side_panel_menu_active_color`	`#E94560`	Active state.
Menu link bg hover	`dark_side_panel_menu_bg_hover_color`	`#0F3460`	Background of a hovered link row.
Menu link bg active	`dark_side_panel_menu_bg_active_color`	`#0F3460`	Background of the active link row.

Setting	Key	Default	Purpose
Footer background	`dark_site_footer_background_color`	`#16213E`	Footer area surface.
Footer title	`dark_site_footer_title_color`	`#fcfcfc`	Widget titles.
Footer text	`dark_site_footer_content_color`	`#bfc2c9`	Widget body text.
Footer links	`dark_site_footer_links_color`	`#fcfcfc`	In-footer links.
Footer links hover	`dark_site_footer_links_hover_color`	`#E94560`	Hover state.

Copyright bar

Setting	Key	Default	Purpose
Copyright background	`dark_site_copyright_background_color`	`#16213E`	Copyright strip below the footer.
Copyright text	`dark_site_copyright_content_color`	`#bfc2c9`	Text color.
Copyright links	`dark_site_copyright_links_color`	`#fcfcfc`	Links.
Copyright links hover	`dark_site_copyright_links_hover_color`	`#E94560`	Hover state.

Loader

Setting	Key	Default	Purpose
Loader background	`dark_site_loader_bg`	`#E94560`	The site-loader overlay background in dark mode.

The defaults above ship as a coordinated midnight-blue palette (deep navy surfaces, off-white text, a soft red-pink accent). When the customizer doesn't have a saved value AND the customer hasn't customized the field, the token cascade emits a separate set of fallback values from Tokens\Component::$dark_color_defaults (#0a0a0a / #161616 / #f5f5f5 / #ff6b6b) - those are the values that paint for installs that explicitly clear the customizer fields. Most customers will see and customize the midnight-blue defaults; only sites that deliberately reset customizer values to empty fall through to the lower fallback tier.

Block patterns + dark mode

5.1.0 ships dark equivalents for the WordPress block-library color presets that BuddyX Pro's theme.json declares. This means pattern-driven landing pages (home, About, Pricing, FAQ, etc.) flip to dark alongside the theme chrome.

Covered preset slugs

The dark mapping covers every semantic slug in the theme.json palette:

Slug	Light value	Dark value	Driven by
`base`	`#ffffff`	`#0a0a0a`	`dark_body_background_color`
`base-2`	`#FAFAFA`	`#101010`	`dark_secondary_background_color`
`base-3`	`#F4F4F4`	`#161616`	`dark_box_background_color`
`tertiary`	`#F6F6F6`	`#161616`	`dark_box_background_color`
`contrast`	`#1a1a1a`	`#f5f5f5`	`dark_body_text_color`
`contrast-2`	`#3D3D3D`	`#d0d0d0`	static fallback
`contrast-3`	`#6E6E6E`	`#a0a0a0`	static fallback
`primary`	`#ef5455`	`#ff6b6b`	`dark_site_primary_color`
`accent`	`#D83734`	`#ff6b6b`	`dark_site_primary_color` (same source)
`secondary`	`#41848f`	`#5aa3ae`	static fallback
`accent-2`	`#3A7882`	`#4a96a3`	static fallback
`accent-3`	`#F4D35E`	`#f4d35e`	static fallback (yellow works on both modes)
`neutral`	`#666666`	`#888888`	static fallback
`surface-1`	`#FFF8F2`	`#1a1612`	static fallback (warm-tinted dark)
`surface-2`	`#F2F7F8`	`#121518`	static fallback (cool-tinted dark)

When you customize dark_body_background_color (or any other "driven by" key above), both the theme chrome (--bx-color-bg) and the matching block preset (--wp--preset--color--base) update from the same source. This is the single source of truth guarantee: one customizer change → both color systems flip together.

Slugs deliberately not overridden

Slug	Light value	Why no dark override
`surface-3`	`#1F2937`	Already a dark color in light mode; doesn't need flipping.
`transparent-accent`	`color-mix(...)`	Mode-agnostic expression.
`black`, `white`, `red`, `vivid-red`, `cyan-bluish-gray`, named-hue presets	literal hex	These encode an absolute color the block author chose deliberately (e.g. `has-black-background-color` = "I want black background"). Flipping them would violate author intent.

If a child theme adds new palette slugs to its own theme.json, extend the dark mapping via the buddyxpro_dark_wp_preset_map filter (see For developers below).

No flash on load

Your visitors see the right color mode the moment the page appears - there's no jarring flash from light to dark on first load, even on the very first visit. We worked hard on this; you don't have to think about it.

(Developers and child-theme authors curious about how this works - see For developers at the bottom of this page for the architectural details.)

Per-entry override (page-settings)

For sites that want certain pages to ignore the site default (e.g. a "dark only" landing page on a light site), open the page in the WP editor and look for the Page Settings → Display → Color Mode field (_buddyxpro_page_color_mode):

Page setting	Effect
Use site default (empty)	Falls through to `site_color_mode`.
Force light	This page renders in light regardless of visitor preference.
Force dark	This page renders in dark regardless of visitor preference.

The toggle UI continues to render (if enabled site-wide) but the visitor's choice doesn't override the page-level force.

Dark mode logo

If your regular logo has dark colors that won't read on dark backgrounds:

Appearance → Customize → Site Identity → Logo
Upload an alternate logo to Dark Mode Logo
Use a light-colored version of your brand mark
Keep the dimensions identical to the regular logo (the swap is instant; the layout doesn't reflow)

The swap fires automatically when dark mode applies - no admin action needed beyond uploading the alternate file.

Common workflows

"I want to brand my dark mode (not use the defaults)"

Pick your dark accent color → set Dark Brand Color (dark_site_primary_color). This drives buttons, accent, primary, and accent in block patterns.
Pick your dark page background → set Dark Body Background (dark_body_background_color). This drives the page bg + --wp--preset--color--base for blocks.
Pick your dark elevated surface → set Dark Card / Box Background (dark_box_background_color). This drives cards + --wp--preset--color--base-3 for blocks.
Upload a dark-mode logo if needed.

That covers the 80% case - the rest of the dark palette can use the WCAG-AA defaults.

"I want my site to only ever be dark (no light mode)"

Set Color Mode to Dark.
Set Show color-mode toggle to Off.
Customize the dark palette to taste.
Publish.

Visitors land directly in dark mode with no toggle UI. The light palette controls still exist in the customizer (they're never made invisible), but they never paint because there's no path to light mode.

"I want maximum visitor control"

Set Color Mode to the look you want new visitors to land on (Light or Dark).
Set Show color-mode toggle to On.
Set Toggle Position to Header (most discoverable) or Both.

Every visitor lands on your default and can switch to the other mode with one click. Their choice persists per-device via cookie + localStorage.

Plugin compatibility

The dark token system applies automatically to:

Plugin	What's covered
BuddyPress / BuddyBoss	Activity stream, member directory, member profile, group pages, messages, notifications
WooCommerce	Shop archive, single product, cart, checkout, my-account
LearnDash	Course archive, course/lesson/topic templates, focus mode (additional `--ld-dark-mode-*` tokens)
bbPress	Forum index, single forum, single topic
Dokan / WCFM / MultiVendorX	Vendor dashboards, store pages
FluentCart, SureCart	Cart + checkout surfaces
Better Messages	Conversation list, threads, chat header/footer, search + message inputs (maps the plugin's own dark palette)
GamiPress	Points widgets, achievement lists, rank titles + descriptions
rtMedia	Media galleries, media-option menus, upload controls, "no media" message
BP Verified Member	Request-verification button (the verified badge + tooltip are dark-safe by design)

The add-on overrides (Better Messages, GamiPress, rtMedia, BP Verified Member) ship as small per-plugin stylesheets that load only when the plugin is active (added in 5.1.1).

If a third-party plugin renders content with hardcoded colors (instead of using BuddyX Pro's tokens), that plugin won't flip - file a support ticket and the team can usually add compatibility overrides.

For developers

First-paint architecture (no FOUC)

5.1.0 paints the correct color mode from the first rendered frame - no JavaScript-driven flash from light to dark on page load. Two independent first-paint pathways converge on the same outcome:

Server-side resolution from cookie / user meta. When a visitor has previously toggled their preference, the server reads the cookie (buddyx_dark_mode) before rendering. The body class buddyx-dark-theme ships in the initial HTML; dark CSS rules apply on the first paint.
Synchronous HTML attribute bootstrap. Even before any stylesheet parses, a tiny inline script in <head> sets <html data-bx-mode="dark|light"> by reading the bx-color-mode localStorage key. The CSS selector :root[data-bx-mode="dark"] then applies dark tokens on the first paint, covering the case where the cookie expired but localStorage still holds the preference.

Together these eliminate FOUC (Flash of Unstyled Content) in the scenarios that pre-5.1.0 caused a visible flash:

Scenario	Pre-5.1.0	5.1.0
Cookie path (returning visitor toggled dark)	No flash	No flash
localStorage-only (cookie cleared / private mode)	Light → dark flash on DOMContentLoaded	No flash (HTML attribute path)

The token cascade

Every customizer color value flows through inc/Tokens/Component.php and emits as a CSS custom property:

Light mode: declared on :root (default).
Dark mode: declared on :root[data-bx-mode="dark"] and body.buddyx-dark-theme.

The two selectors are additive - either of them matching makes the dark tokens apply.

The token vocabulary itself is documented in docs/buddyx-pro-design-tokens.md.

Filter the dark block-preset mapping

Child themes that extend theme.json's palette can add their own dark equivalents via buddyxpro_dark_wp_preset_map:

add_filter( 'buddyxpro_dark_wp_preset_map', function ( $map ) {
    // Add a dark mapping for a child-theme palette slug 'forest'.
    $map['--wp--preset--color--forest'] = array(
        'key'      => null,         // No customizer key - static dark value.
        'fallback' => '#0e1f15',
    );
    // Drive a slug from an existing dark customizer key.
    $map['--wp--preset--color--ocean'] = array(
        'key'      => 'dark_site_primary_color',  // Existing customizer key.
        'fallback' => '#5aa3ae',
    );
    return $map;
} );

Each entry's key (if non-null) points at a dark_* customizer setting in $dark_color_defaults - the customer's customizer value drives the preset. When key is null, the fallback static value is used.

Filter the resolved color mode server-side

The buddyx_resolve_color_mode() function (in inc/Helpers/Dark_Mode.php) returns the canonical mode for the current request. Filter via body_class if you need to bolt-on additional behavior:

add_filter( 'body_class', function ( $classes ) {
    if ( in_array( 'buddyx-dark-theme', $classes, true ) ) {
        $classes[] = 'my-plugin-dark-extras';
    }
    return $classes;
} );

Defer dark CSS file (advanced)

The dark token CSS is inline in <head> (emitted by Tokens\Component::build_token_css()). For LearnDash-specific dark overrides, the separate stylesheet assets/css/dark-mode.min.css only loads when class_exists('SFWD_LMS') returns true (manifest-gated). See docs/developer/asset-manifest.md for the asset loading architecture.

Common questions

Can I hide the toggle? Yes - Appearance → Customize → Site Skin → Show color-mode toggle = Off. No CSS overrides required.

What are the toggle position options? Four: Floating (a small button on the side of the screen - the default), Header (next to the desktop menu icons), Mobile (in the mobile menu drawer only), and Both (header on desktop and mobile menu together). Exactly one placement renders per request based on this setting.

Does dark mode work with the Site Editor / Full Site Editing? Partially. BuddyX Pro is a classic theme (not a block theme). The theme.json palette is recognized by FSE-style block patterns, but template-level FSE workflows (Templates panel, Template Parts) aren't a primary surface. Dark mode applies to the same surfaces as light mode does on this theme.

Will my dark customizations persist across upgrades? Yes. All dark_* setting IDs are stable across releases. The 5.1.0 release introduced these IDs; subsequent releases (5.1.x, 5.2.x) will not rename or remove them. If a setting is ever retired, a migration runs in inc/Migration/Component.php to preserve customer values.

Does dark mode slow down my site? No. The dark CSS is the same payload as the light CSS - both are emitted inline by Tokens\Component. The mode-switch toggle JS is ~3 KB total. First-paint is dark or light depending on resolution; no flashing.

My logo looks washed out in dark mode. What do I do? Upload a dedicated dark-mode logo (a light-colored version of your brand mark) at Site Identity → Dark Mode Logo. Keep the dimensions identical to the regular logo to avoid layout shift.

Can I make some pages dark-only? Yes - use the page-settings Color Mode field (see Per-entry override above).

The dark mode looks ugly on my landing page (pattern blocks look wrong). You likely have a child theme that added custom theme.json palette slugs without dark equivalents. Add a filter on buddyxpro_dark_wp_preset_map (see developer section) to register dark equivalents for those slugs.

Color Scheme - Light-mode palette settings (parallel to this page's dark palette)
Color Presets - Pre-built light + dark palette bundles
Border Radius - Skin shape customization
Site Identity - Logo (including dark-mode logo)
Design Tokens - Developer reference for the --bx-color-* token system
Asset Manifest - How dark CSS is loaded

Need help? support@wbcomdesigns.com

Blog Settings

Blog archive, single post, and post element controls.

Blog Archive Layout

Control how your blog posts appear on your main blog page, category pages, and archive pages. Choose from seven layouts and customize how posts are displayed.

Site Blog Panel The Blog Archive panel in the WordPress Customizer showing layout options, image position, and card controls

What You Can Do

With BuddyX Pro 5.1.0+ blog archive settings, you can:

Choose from 7 layouts: Default, List, Grid, Masonry, Magazine, Editorial, Minimal
Set the image position (Left or Right) for the List layout
Pick 1, 2, 3, or 4 columns for Grid, Masonry, and Magazine (the same blog_columns radio-buttonset drives all three)
Enable Pinterest-style masonry on the Masonry layout
Pick a card style: Plain, Bordered, Shadow, or Elevated
Pick a hover effect: None, Lift, Zoom, or Tint
Set the excerpt length (5-60 words)
Override how many posts show per page for the blog feed (0-50, or inherit the Reading setting)
Show or hide a category filter pill row above the feed
Show or hide tags, and pick a tag style
Override the sidebar specifically for the blog feed (including when the homepage is set to "Your latest posts")
Show or hide the front-end edit link for logged-in editors

Every control on this page lives in Appearance > Customize > Blog Archive.

Choosing Your Blog Layout

Step 1: Access Blog Settings

Go to Appearance > Customize
Click on Blog Archive (the panel was split in 5.1.0 - single-post controls now live in the Single Post panel)
The first control is Blog Layout

Step 2: Select a Layout

BuddyX Pro offers seven distinct blog layouts (blog_layout_option, default default-layout):

Layout	Key	Best For	Description
Default	`default-layout`	Traditional blogs	Classic single-column layout with featured images above title
List	`list-layout`	News / chronological feeds	Image on the left or right (toggle via `blog_image_position`), title + excerpt to the side - compact, lets you fit more posts per scroll
Grid	`grid-layout`	Portfolio / visual blogs	Card-based grid with 1, 2, 3, or 4 columns
Masonry	`masonry-layout`	Image-heavy blogs	Pinterest-style staggered grid (enable via the `blog_masonry` switch), 1-4 columns
Magazine	`magazine-layout`	News / publishing	Three-region NYT-style layout: one large feature card, three side cards, then a 1-4-column grid for the rest
Editorial	`editorial-layout`	Long-form / text-first	Small thumbnail to the left of headline + excerpt, hairline divider between articles
Minimal	`minimal-layout`	Personal blogs / portfolios	Title-led with optional excerpt; featured image suppressed for a stripped-back read

Image Position (List layout only)

When List is selected, the Image position toggle (blog_image_position, default thumb-left) decides which side the thumbnail sits on:

Option	Key
Left (default)	`thumb-left`
Right	`thumb-right`

This control only appears for the List layout.

Columns

After picking Grid, Masonry, or Magazine, the Columns control (blog_columns) sets how many cards fit on a desktop row. The same setting drives all three layouts, so switching between them keeps your column choice. The default is Default (the layout's own built-in column count) plus explicit 1, 2, 3, and 4 options.

Columns	Desktop (>1280px)	Laptop (1024-1280)	Tablet (640-1024)	Mobile (<640)
1	1	1	1	1
2	2	2	2	1
3	3	3	2	1
4	4	3	2	1

Magazine layout caps the bottom grid at the same column count; the feature + side region stays at one large card + three small cards regardless.

Layout Previews

Default Layout:

Default blog layout - classic single-column with featured images above titles

┌────────────────────────────────────┐
│  ┌────────────────────────────┐   │
│  │    Featured Image          │   │
│  └────────────────────────────┘   │
│  Blog Post Title                   │
│  Written by Author | Date          │
│  Post excerpt text here...         │
├────────────────────────────────────┤
│  ┌────────────────────────────┐   │
│  │    Featured Image          │   │
│  └────────────────────────────┘   │
│  Blog Post Title                   │
│  Written by Author | Date          │
│  Post excerpt text here...         │
└────────────────────────────────────┘

Grid Layout (2 Columns):

Grid Blog Layout Grid layout - card-based 2-column design with consistent heights

┌──────────────────┬──────────────────┐
│ ┌──────────────┐ │ ┌──────────────┐ │
│ │Featured Image│ │ │Featured Image│ │
│ └──────────────┘ │ └──────────────┘ │
│ Post Title       │ Post Title       │
│ Author | Date    │ Author | Date    │
│ Excerpt...       │ Excerpt...       │
├──────────────────┼──────────────────┤
│ ┌──────────────┐ │ ┌──────────────┐ │
│ │Featured Image│ │ │Featured Image│ │
│ └──────────────┘ │ └──────────────┘ │
│ Post Title       │ Post Title       │
│ Author | Date    │ Author | Date    │
│ Excerpt...       │ Excerpt...       │
└──────────────────┴──────────────────┘

Masonry Layout:

Masonry Blog Layout Masonry layout - Pinterest-style staggered grid with variable heights

┌──────────────┬──────────────┬──────────────┐
│ ┌──────────┐ │ ┌──────────┐ │ ┌──────────┐ │
│ │  Image   │ │ │  Image   │ │ │  Image   │ │
│ └──────────┘ │ │  (tall)  │ │ └──────────┘ │
│ Title        │ │          │ │ Title        │
│ Excerpt...   │ │          │ │ Excerpt...   │
├──────────────┤ └──────────┘ ├──────────────┤
│ ┌──────────┐ │ Title        │ ┌──────────┐ │
│ │  Image   │ │ Excerpt...   │ │  Image   │ │
│ │  (tall)  │ ├──────────────┤ └──────────┘ │
│ │          │ │ ┌──────────┐ │ Title        │
│ └──────────┘ │ │  Image   │ │ Excerpt...   │
│ Title        │ └──────────┘ │              │
└──────────────┴──────────────┴──────────────┘

Card Style and Hover

Two controls change how each post card looks and reacts to the pointer. They apply to the card-based layouts (Grid, Masonry, Magazine) and default to their pre-5.1.0 behavior, so existing sites render identically until you change them.

Card style

Setting: Card style (blog_card_style) Default: Plain

Option	Key	Effect
Plain (default)	`plain`	No card chrome - the pre-5.1.0 look
Bordered	`bordered`	Thin border around each card
Shadow	`shadow`	Soft drop shadow
Elevated	`elevated`	Larger shadow for a lifted, floating card

Hover effect

Setting: Hover effect (blog_card_hover) Default: None

Option	Key	Effect
None (default)	`none`	No hover animation
Lift	`lift`	Card rises slightly on hover
Zoom	`zoom`	Featured image zooms inside its frame
Tint	`tint`	Subtle overlay tint on hover

Both default to their quietest option so upgrading sites get no surprise animation.

Masonry Options

When Masonry is selected, the Enable masonry switch (blog_masonry) appears:

Option	Key	Description
No (default)	`off`	Regular grid - all cards align to the same height
Yes	`on`	True Pinterest-style layout with staggered heights

The Columns control (1-4) applies to Masonry too. See the responsive table above for how the count steps down on tablet and mobile.

The setting ships empty (No) by default, and a read-side helper falls back to the legacy blog_masonry_view value so customers who configured masonry before 5.1.0 keep their staggered grid without re-toggling.

Magazine Options

When Magazine is selected, the top region is fixed:

One large feature card (post #1)
Three small side cards stacked next to it (posts #2-4)
A grid below for the rest (posts #5+)

The Columns control drives only that bottom grid (1-4 columns).

Editorial and Minimal

Editorial renders every post as a small left-aligned thumbnail next to its headline and excerpt, with a hairline divider between articles. There is no column option - the layout is always single-column for a long-form reading rhythm.
Minimal is title-led with an optional excerpt and suppresses the featured image for a stripped-back read.

Excerpt Length

Set how much of each post's summary shows on the archive.

Setting: Excerpt length (blog_excerpt_length) Default: 30 words Range: 5-60 words (step 1)

Guidelines:

Short (5-25 words): Visual-heavy blogs, card layouts
Medium (30-45 words): Balanced approach, most blogs
Long (50-60 words): Content-rich sites, news portals

Posts Per Page

By default the blog feed uses the WordPress core Settings > Reading > Blog pages show at most value. BuddyX Pro adds a per-feed override so you do not have to change the site-wide setting.

Setting: Posts per page (blog_archive_posts_per_page) Location: Appearance > Customize > Blog Archive Default: 0 (inherit the Settings > Reading value) Range: 0 - 50 (step 1)

Set any value from 1-50 to override how many posts the blog archive shows before pagination, without touching the site-wide Reading setting that other archives use. Leave it at 0 to keep inheriting the global value, which is what existing sites do on upgrade.

Show a horizontal row of category pills above the first post so visitors can filter the feed by category without leaving the page.

Setting: Show category filter (blog_archive_show_filter) Location: Appearance > Customize > Blog Archive Default: No Options: Yes / No

The filter renders server-side (no JavaScript) using the standard ?cat= query argument, so it works with caching and is crawlable. Enable it on topic-driven or magazine feeds where readers browse by subject; leave it off for single-topic or personal blogs.

Show Edit Link

Setting: Show edit link (blog_edit_link) Default: Disabled Who sees it: Logged-in users with manage_options (administrators)

Shows an "Edit" link on posts so administrators can jump straight into the editor from the front end. It renders only for logged-in administrators, so visitors never see it.

Common Questions

Why aren't my layout changes showing?

Check these:

Click Publish in the customizer
Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
Clear any caching plugins (WP Super Cache, W3 Total Cache)
Check if a child theme is overriding templates

Can I use different layouts for different categories?

Not directly through the customizer, but you can:

Use category-specific templates in a child theme
Add custom CSS to target specific category pages
Use a page builder plugin for custom category archives

My masonry layout isn't staggering.

Common fixes:

Confirm Enable masonry is set to Yes (default is No)
Ensure JavaScript is enabled and check the console for errors
Verify all images have proper dimensions
Clear cache and reload the page

How do I change the number of posts per page?

Use the Posts per page control in Blog Archive to override just the blog feed, or Settings > Reading for the site-wide default that other archives inherit.

Does reading time show on archive pages?

No. Reading time is a single-post-only feature. It renders on the full-article page, never on the blog listing. See Reading Time.

The excerpt is cutting off mid-sentence.

This is normal WordPress behavior. To adjust:

Manually add an excerpt in the post editor (WordPress will use that instead)
Increase the excerpt length control in the customizer

Performance Tips

For faster loading:

Keep the excerpt length reasonable (30-45 words)
Set posts per page to 6-10 (not 20+)
Optimize featured images (compress before upload)
Enable caching plugins

For better user experience:

Match the layout to your content (Grid/Masonry for visual blogs, List/Editorial for text-first)
Use a card style and hover effect that suits your brand
Test every layout at 390px width before publishing

Single Post Layout - Configure individual post pages
Post Elements & Meta - What renders in the post meta row
Reading Time - Single-post read-time estimate
Sidebar Options - Blog sidebar configuration
Typography - Text styling for blog posts
Color Scheme - Blog color customization

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Post Elements & Meta

Understand what appears in the post meta row - the small line of author, date, and (optionally) reading-time details next to every post - and which parts you can actually control from the Customizer.

Blog Post Settings A post card with its automatic meta row: author avatar, "Written by", and the publish date

How the Meta Row Works

BuddyX Pro renders the post meta row automatically from the post itself (template-parts/content/entry_meta.php). Most of it is not a set of on/off switches - the theme decides what to show based on the post type and the data on the post. That keeps archives consistent and avoids a wall of toggles that do nothing on posts without that data.

The parts that are configurable are:

Tags - shown or hidden on the archive, with a choice of style (Blog Archive panel)
Reading time - an optional "X min read" label on single posts (Single Post panel)
Edit link - a front-end "Edit" link for administrators (Blog Archive panel)

Everything else in the row - the author and the date - renders automatically as described below.

What Renders Automatically

Author

Every post that supports authors shows its author. When BuddyPress is active the byline links to the member's BuddyPress profile; otherwise it links to the standard WordPress author archive.

What's shown:

Author avatar (38px, from Gravatar or the BuddyPress avatar)
The wording "Written by {Author Name}"
A link to the author's profile or archive

There is no show/hide toggle for the author and no separate avatar-size control - the row is designed to be consistent across every post.

Date

Posts (and any custom post type with an archive) show their publish date, linked to the post. If a post has been edited since publishing, the theme also emits a hidden machine-readable "updated" time for SEO while displaying the published date.

Changing the date format:

Go to Settings > General
Find Date Format
Choose a preset or enter a custom format
Save changes

This is a WordPress core setting that applies site-wide (F j, Y gives "January 29, 2026", M j, Y gives "Jan 29, 2026", Y-m-d gives "2026-01-29").

Attachment Parent

On attachment views only, the row links back to the parent post. This is automatic and has no setting.

Tags (Archive)

Tags are the one meta element you can toggle on the blog archive. They live in Appearance > Customize > Blog Archive, not in a separate "Post Meta" section.

Show tags (blog_show_tags, default Disabled) - Enable / Disable.

Tag style (blog_show_tags_style, default default) - appears when tags are enabled:

Style	Key	Appearance
Default (default)	`default`	Plain text links
Badge	`badge`	Tag with a filled background
Underline	`underline`	Tag with a bottom border

See Blog Archive Layout for the full archive control set.

Reading Time (Single Posts)

An estimated "X min read" label can be appended to the meta row - on single posts only. It is calculated automatically from the post content (200 words per minute) and ships off by default.

Setting: Show reading time (single_post_reading_time) Location: Appearance > Customize > Single Post Default: No Options: Yes / No

The label renders through the buddyx_entry_meta_after action, so it sits at the end of the meta row next to the date and author. It never appears on archive listings, pages, custom post types, or BuddyPress activity. Full detail lives in Reading Time.

Edit Link

Setting: Show edit link (blog_edit_link) Location: Appearance > Customize > Blog Archive Default: Disabled Who sees it: Logged-in administrators (manage_options)

Shows an "Edit" link inside the meta area so administrators can open the editor from the front end. It only renders for logged-in administrators, so regular visitors never see it.

Styling the Meta Row with CSS

Because the meta row is template-driven, fine adjustments are done with custom CSS in Appearance > Customize > Additional CSS. Useful hooks:

.entry-meta - the whole row wrapper
.entry-meta__content - the inner flex container
.posted-by - the author span (contains the avatar and "Written by" text)
.posted-on - the date span
.bx-reading-time - the reading-time span (also carries .posted-on)
.entry-edit-link - the administrator edit link

Examples

/* Hide the date on mobile */
@media (max-width: 767px) {
    .entry-meta .posted-on {
        display: none;
    }
}

/* Make the author avatar a touch smaller */
.entry-meta .posted-by img {
    width: 32px;
    height: 32px;
}

/* Emphasise the date */
.entry-meta .posted-on {
    font-weight: 700;
}

The reading-time label inherits your active Site Skin and typography, so it matches the rest of the row in both light and dark mode automatically.

Accessibility Notes

The template already uses accessible markup:

Dates use semantic <time> elements with datetime attributes
The author name is a real link to the profile/archive
The avatar is output through get_avatar(), which includes an alt attribute

When adding your own CSS, keep the row readable: don't drop the font size below 14px, keep sufficient colour contrast, and avoid hiding text behind icon-only styling.

Common Questions

Can I hide the author or the date from the Customizer?

No. The theme renders author and date automatically for consistency. Use the CSS hooks above if you need to hide one for a specific design.

Why isn't my reading time showing?

Check these:

Setting enabled: Customizer > Single Post > Show reading time = Yes
You're on a single post: reading time never appears on archives or pages
Cache cleared: clear site and browser cache
Plugin conflicts: disable other reading-time plugins that may hook the same row

How do I change the date format?

Go to Settings > General > Date Format. This is a WordPress core setting affecting all dates site-wide.

The author link goes to a 404 page.

This happens when the author has no published posts, or permalinks need flushing. Re-save Settings > Permalinks, or publish at least one post under that author.

Can I add tags on single posts too?

The blog_show_tags toggle governs the archive. Single-post tag output is handled by the theme's single-post content template and the post's own tag terms.

Blog Archive Layout - Layout, tags, edit link, category filter
Single Post Layout - Title layouts, author bio, related posts, navigation
Reading Time - The single-post read-time estimate
Typography - Meta text styling
Color Scheme - Meta color customization

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Single Post Layout

Customize how individual blog posts appear when visitors click to read them. Control the header design, featured image placement, author information, and related content.

The Single Post panel in the WordPress Customizer showing title layout, width, spacing, and element options

What You Can Do

With BuddyX Pro's single post settings, you can:

Choose from 3 title and image layouts
Set content width for optimal reading
Set the sidebar for single posts
Set the entry header width and featured image height
Set the vertical spacing between header, image, and content
Add an image overlay color for the title-over layout
Show an auto-generated table of contents
Show an estimated reading time
Add a reading progress bar
Display an author bio at the end of posts
Show related posts to keep visitors engaged
Configure post navigation (previous/next links)
Add social sharing buttons

Accessing Single Post Settings

Go to Appearance > Customize
Click on Single Post (single-post controls moved out of the old Site Blog panel in 5.1.0)

Post Title Layouts

Choose how the post title and featured image appear at the top of your posts:

Single Post Title Layout 1 Title Over Image layout - title overlaid on featured image with dark overlay

Single Post Title Layout 2 Title Above Image layout - traditional style with title, then featured image below

Available Layouts

Setting: Title layout (single_post_title_layout) Default: Title Above Image (buddyx-section-title-above)

There are three positions only. (A fourth "Half & Half" option existed before 5.1.0 but was removed - it relied on an undefined color token and did not read well on most posts. Posts that had it saved fall back to the default Title Above Image position.)

Layout	Key	Description	Best For
Title Above Image (default)	`buddyx-section-title-above`	Traditional: title, then featured image below	Classic blogs, clean reading
Title Below Image	`buddyx-section-title-below`	Featured image first, title underneath	Image-focused content, portfolios
Title Over Image	`buddyx-section-title-over`	Title overlaid on featured image with an overlay color	Hero-style posts, dramatic effect

Layout Previews

Title Over Image:

┌─────────────────────────────────────┐
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │   [Featured Image with    │   │
│    │    overlay color]         │   │
│    │                           │   │
│    │   Post Title in White     │   │
│    │   Written by Author | Date│   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Title Above Image:

┌─────────────────────────────────────┐
│                                     │
│        Post Title in Large Text     │
│        Written by Author | Date     │
│                                     │
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │    Featured Image         │   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Title Below Image:

┌─────────────────────────────────────┐
│    ┌───────────────────────────┐   │
│    │                           │   │
│    │    Featured Image         │   │
│    │                           │   │
│    └───────────────────────────┘   │
│                                     │
│        Post Title in Large Text     │
│        Written by Author | Date     │
│                                     │
│  Post content starts here...        │
└─────────────────────────────────────┘

Single Blog Layout Settings Single post layout customizer settings showing width, spacing, and element options

Choose the sidebar arrangement for single posts. In 5.1.0 this control moved into the Single Post section so all single-post options live together.

Setting: Sidebar layout (single_post_sidebar_option) Location: Appearance > Customize > Single Post Default: Inherits your global sidebar setting

Option	Effect
None	Full-width post, no sidebar (best for immersive reading)
Left	Sidebar to the left of the content
Right	Sidebar to the right of the content
Both	Sidebar on both sides

Because the default mirrors your effective global sidebar, the control shows the same selection your posts already use - so picking None (or any other value) is a real, savable change rather than a no-op. See Sidebar Options for the global setting this overrides.

Content Width Settings

Control how wide the post content appears (single_post_content_width, default Small):

Setting	Width	Description	Best For
Small	~700px	Narrower content area	Long-form reading, text-heavy posts
Large	~1200px	Wider content area	Visual content, galleries, wide images

Reading Tip: Small width provides optimal line length (50-75 characters per line) for comfortable reading. This is recommended for most text-based blogs.

When to Use Each Width

Use Small Width For:

Text-focused articles
Long-form storytelling
Professional blogs
News articles
Tutorial content

Use Large Width For:

Image galleries
Portfolio posts
Video-heavy content
Wide charts/diagrams
E-commerce product showcases

Title Over Image Options

When you select Title Over Image layout, additional settings appear:

Image Overlay Color

Setting: Image overlay color (buddyx_section_title_over_overlay) Default: rgba(0, 0, 0, 0.1) (black at 10% opacity) Purpose: Makes white text readable over photos

Recommendations:

Overlay Color	Best For	Example
Dark gray/black	Light-colored images	rgba(0, 0, 0, 0.4)
Navy blue	Warm-toned images	rgba(20, 30, 60, 0.5)
Dark purple	Vibrant images	rgba(50, 20, 70, 0.4)
Gradient	All images	Custom CSS required

Opacity Guide:

10-20%: Subtle tint, image clearly visible
30-50%: Balanced, good text contrast
60-80%: Heavy overlay, focus on text
90-100%: Almost solid color

Entry Header Settings

Header Width

Setting: Entry header width (single_post_entry_header_width) Default: Default Options:

Option	Description	Best For
Default	Header matches content width	Consistent, clean design
Full Width	Header spans entire container	Dramatic, hero-style headers

Featured Image Height (Full Width Only)

When the entry header width is set to Full, you can set the featured image height.

Setting: Featured image height (single_post_featued_image_height) Default: 500px Value: any CSS length (a dimension field - enter a value such as 500px) Applies to: Desktop screens (min-width 768px), and only when Entry header width is Full

Height Recommendations:

Content Type	Suggested Height	Why
Standard blog posts	400-500px	Balanced, not overwhelming
Portfolio/visual	600-700px	Showcases imagery
News articles	350-450px	Quick to scroll past
Landing page style	700-800px	Maximum impact

The setting key preserves a legacy spelling (single_post_featued_image_height) so upgrading sites keep their saved value.

Element Spacing

Setting: Elements spacing (single_post_elements_spacing) Default: 32px Value: any CSS length (a dimension field - enter a value such as 32px)

Controls vertical space between:

Entry header (title/meta)
Featured image
Post content

Spacing Guide:

Space	Effect	Best For
16-24px	Tight, compact	Mobile-first, news sites
28-40px	Comfortable, standard	Most blogs, balanced design
48-80px	Spacious, airy	Luxury, minimalist, portfolio

Show an auto-generated "On this page" navigation at the top of each long post so readers can jump to a heading.

Setting: Show table of contents (single_post_toc) Default: Off Options: Yes / No

How it works

The TOC scans the post's H2 and H3 headings and links to each.
Posts with fewer than two headings are skipped automatically (a one-link TOC is just noise).
H2 headings number sequentially (1, 2, 3...). H3 headings indent under their parent H2 as a nested alpha list (a, b, c...).
The TOC sits at the very top of the rendered content, above the first paragraph.
Anchor IDs are slug-cased from the heading text and are stable, so external links to #some-heading keep working across content edits as long as you don't rename the heading.

Best for

Long-form guides and tutorials (1500+ words, 4+ headings)
Documentation and reference articles
Multi-section how-tos where the reader may want to jump straight to one step

Skip it for

Short posts (under 800 words)
News / opinion posts where readers should scroll the whole thing
Posts with no headings (the TOC won't render anyway, but the panel toggle is wasted in the customizer)

Style notes

The TOC uses neutral surfaces from the active color mode (--bx-color-bg-muted border, --bx-color-link link colour). No standalone color controls - it inherits Site Skin and Border Radius.

Reading Progress Bar

Add a visual indicator showing how much of the post has been read:

Setting: Reading progress bar (single_post_progressbar) Default: On Options: Yes / No

How It Works

Thin bar appears at top of screen
Fills from left to right as visitor scrolls
Reaches 100% at end of post content
Encourages completion

Benefits:

Shows reading progress visually
Increases engagement
Encourages visitors to finish reading
Modern UX feature
Minimal performance impact

Best For:

Long-form content (1000+ words)
Tutorial and guide posts
Story-driven content
Educational articles

Consider Disabling For:

Very short posts (under 500 words)
Minimal, distraction-free design
Sites where it conflicts with header design

Author Bio Section

Display author information at the end of each post:

Setting: Show author bio (single_post_show_author_bio) Default: No (off) Options: Yes / No

New in 5.1.0 and off by default, so existing sites render unchanged until you turn it on.

What's Included

When enabled, displays:

Author avatar
Author name (linked to archive)
Author biographical info (from user profile)
Author social links (if configured)
Link to view all author posts

Configuring Author Info

Go to Users > Your Profile
Fill out Biographical Info
Add social profile URLs
Upload profile picture
Click Update Profile

Bio Writing Tips:

Keep it 2-3 sentences
Mention expertise/credentials
Include a call-to-action
Update regularly

Example: "Sarah Johnson is a WordPress developer with 10 years of experience. She specializes in building community-driven websites and shares tips weekly on this blog."

Keep visitors engaged by showing similar content:

Social sharing buttons and related posts section at the bottom of single posts

Setting: Show related posts (single_post_related_posts) Default: Off Options: Yes / No

Setting: Related posts title (single_post_related_posts_title) Default: "You may also like" Visible when: Related Posts is enabled

Alternative Titles:

"Related Articles"
"Continue Reading"
"More from this Category"
"What to Read Next"
"Similar Posts"
"Keep Exploring"

WordPress shows related posts based on:

Same categories (highest priority)
Same tags
Recent posts (if no matches)

Display Format

Available Platforms

Setting: Social networks (single_post_social_link, sortable list) Default enabled: Facebook, Twitter, Pinterest, LinkedIn, WhatsApp

Customization:

Drag to reorder platforms
Uncheck to hide specific platforms
Checked items appear in your order

Platform Descriptions

Platform	Best For	Share Format
Facebook	General content	Link with image/title
Twitter	News, quotes	Text + link (280 chars)
Pinterest	Visual content	Image + description
LinkedIn	Professional content	Article preview
WhatsApp	Mobile sharing	Direct message with link

Position: Below post content, above comments Style: Icon buttons or text links (theme dependent) Mobile: Often combined into single "Share" button

Comments Section

Comments appear after post content (WordPress core feature):

Comment Display Settings

Access via Settings > Discussion:

Setting	Description	Recommended
Allow comments	Enable/disable comments	On
Require name/email	Mandatory fields	On
Comment moderation	Manual approval	On for new sites
Comment registration	Must be logged in	Off (reduces engagement)

Comment Pagination

For posts with many comments:

Break comments into pages: Yes
Comments per page: 50
Show newer/older: Newer first

Common Questions

Can I use different layouts for different posts?

Not directly through customizer (applies to all posts), but you can:

Use a page builder plugin for specific posts
Add custom CSS targeting specific post IDs
Create custom post templates in a child theme
Use categories with category-specific templates

The title is hard to read over my featured image.

For Title Over Image layout:

Increase overlay opacity (try 0.5 or higher)
Use darker overlay color
Choose darker featured images
Switch to Title Above Image layout

How do I disable the featured image on single posts?

Option 1: Don't set a featured image on that post
Option 2: Use custom CSS: .single-post .entry-header img { display: none; }
Option 3: Use a plugin like "Hide Featured Image"

My related posts aren't showing.

Check these:

Setting is enabled: Customizer > Blog > Related Posts = Yes
Posts have categories/tags: Related posts need common taxonomy
Enough published posts: Need at least 4-5 posts total
Cache cleared: Clear site cache and refresh

Can I show author bio only on certain posts?

Requires custom code. Options:

Use a plugin like "Author Bio Box"
Add conditional logic in child theme
Use post meta boxes to control per-post

Social sharing buttons aren't appearing.

Check:

Setting enabled: Customizer > Blog > Show Social Box = Yes
At least one platform selected: Check the platforms list
JavaScript enabled: Social features require JS
No conflicts: Disable other social sharing plugins
Cache cleared: Clear cache and test

How do I change the social sharing button design?

Styling is theme-controlled. To customize:

Add custom CSS in Customizer > Additional CSS
Use a child theme to override styles
Install a dedicated social sharing plugin for more options

The reading progress bar disappears on mobile.

This may be intentional design. To force it on mobile:

Check customizer for mobile-specific settings
Add custom CSS for mobile displays
Contact support if it should appear but doesn't

Can I add more social platforms?

Default platforms are built into the theme. To add more:

Use a plugin like "Social Warfare" or "AddToAny"
Hire a developer to extend the theme
Use a child theme to add custom share buttons

Performance Tips

Optimizing Single Posts

For Speed:

Compress featured images before upload
Use appropriate content width (less HTML/CSS rendering)
Limit related posts to 3-4
Lazy load images in post content
Minimize social sharing platforms to essentials

For Engagement:

Always include featured image
Enable progress bar for long posts
Show author bio (builds trust)
Enable related posts
Keep post navigation enabled

Image Recommendations

Element	Size	Format	Max File Size
Featured image (default width)	1200×675px	JPG	150KB
Featured image (full width)	1920×800px	JPG	200KB
In-content images	800-1200px wide	JPG/PNG	100-150KB
Author avatar	150×150px	JPG/PNG	20KB

Blog Archive Layout - Configure blog listing pages
Post Elements & Meta - Customize post information display
Sidebar Options - Single post sidebar configuration
Typography - Post text styling
Color Scheme - Post color customization

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Reading Time

Show an estimated "X min read" label in the post meta row so visitors know how long an article will take before they start. BuddyX Pro calculates the estimate for you from the post content - there is nothing to type in per post. The feature is a single on/off switch and ships off by default, so existing single-post views render unchanged until you turn it on.

Turning On Reading Time

Go to Appearance > Customize
Click on Blog
Find the Single Post Settings section
Set Show reading time to Yes
Click Publish

Setting: Show reading time (single_post_reading_time) Default: No (off) Options: Yes / No

Tip: The customizer tooltip sums it up - "Append an estimated reading time (assumes 200 words per minute) to the post meta row." Enable it, then open any published post to confirm the label appears.

How the Estimate Is Calculated

BuddyX Pro works out the reading time automatically. You do not set a value per post - the theme reads the published content and does the math on every page load.

Baseline speed: 200 words per minute, the standard editorial reading pace.
What gets counted: The post body only. The theme strips shortcodes and HTML tags before counting words, so embedded YouTube, Instagram, and other media blocks do not inflate the number.
Rounding: The word count is divided by 200 and rounded up to the next whole minute. A 150-word post still reads as "1 min read".
Minimum: The estimate never drops below 1 minute, so even a one-line post shows a sensible label.

Post length	Calculation	Label shown
150 words	150 / 200, rounded up	1 min read
600 words	600 / 200	3 min read
1,400 words	1,400 / 200	7 min read
3,000 words	3,000 / 200	15 min read

The label is translation-ready and uses the singular/plural form for the minute count, so it reads correctly in every language you run the theme in.

Where It Appears

The reading-time label renders on single post views only - the full-article page a visitor lands on after clicking through. It is added to the end of the entry meta row, alongside the date, author, and category links.

It does not appear on:

Blog archive / listing pages (#blog-archive-bxpro))
Pages, custom post types, or BuddyPress activity
Post excerpts or related-post cards

This keeps archives clean while giving readers the time estimate exactly where they decide whether to commit to the full read.

For Developers

Two hooks let you adapt the estimate without editing theme files:

buddyxpro_reading_time_minutes - a filter on the calculated minute value. Use it to assume a different reading speed, or to add padding for media-heavy posts. It receives the minutes (int) and the WP_Post object.
buddyx_entry_meta_after - the action the label is hooked onto. If you build a child theme, you can reposition or restyle the output from here.

The rendered label carries the classes posted-on bx-reading-time, so you can target it with custom CSS in Appearance > Customize > Additional CSS - for example to add an icon or change its color. Reading time inherits your active Site Skin and typography, so it matches the rest of the meta row in both light and dark mode automatically.

When to Use It

Turn it on for:

Long-form guides, tutorials, and how-tos where the time commitment matters
Magazine, news, and editorial blogs where readers scan before committing
Any content library where "quick read vs. deep dive" helps visitors choose

Consider leaving it off for:

Very short posts or link posts where "1 min read" adds little
Minimalist, distraction-free layouts where you want the meta row bare

Reading time pairs naturally with the Table of Contents and reading progress bar - together they signal up front how long and how structured a post is, which is exactly what long-form readers look for.

Post Elements & Meta - Choose which meta details (date, author, category) sit in the row next to reading time
Single Post Layout - Title layouts, content width, table of contents, and reading progress bar
Blog Archive Layout - Configure the blog listing pages where reading time does not appear

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

BuddyX Pro can add an automatic "On this page" list to the top of your single blog posts. It reads the headings you already wrote, turns each one into a jump link, and lets readers skip straight to the section they want. There is nothing to build by hand and no shortcode to place - you write your post with normal headings, flip one switch, and the theme does the rest.

What You Can Do

With the table of contents turned on, each qualifying single post gets:

An auto-generated list of its H2 and H3 headings, in the order they appear
A clickable jump link for every heading (smooth anchor navigation)
Numbered top-level entries (1, 2, 3...) with H3 subheadings nested underneath as a lettered list (a, b, c...)
Styling that follows your active Site Skin, border radius, and dark mode automatically

The list is generated on the server every time the post renders, so it always matches the current content. Edit a heading, add a section, reorder your H2s - the table of contents updates on the next page load with no extra step.

Turning It On

There is a single control for this feature.

Go to Appearance > Customize
Click on Blog
Open the Single Post Settings section
Find Show table of contents and set it to Yes
Click Publish

Setting	Control	Default	Options
Show table of contents (`single_post_toc`)	On/off switch	No (off)	Yes / No

That is the only option. The feature is off by default, so existing sites look exactly the same until you enable it.

Tip: The table of contents applies to all single posts at once. It is a global toggle, not a per-post setting. If you need it on some posts but not others, see the "Common Questions" section below.

How It Works

Once the switch is set to Yes, BuddyX Pro does three things automatically when a single post loads:

Adds anchors to your headings. Every H2 and H3 in the post gets an id derived from its text (for example, a heading called "Getting Started" becomes #getting-started). Headings that already have an id are left untouched.
Builds the list. The theme scans the post for those H2 and H3 headings and assembles the "On this page" box.
Places it at the top. The finished list is inserted at the very top of the post content, directly above your first paragraph.

The box is a proper <nav> list labelled "Table of contents" for screen readers, so it is keyboard reachable and accessible out of the box.

Which headings are included

Heading level	In the table of contents?	How it appears
H1	No	Reserved for the post title
H2	Yes	Top-level numbered entry
H3	Yes	Nested lettered entry under its parent H2
H4 - H6	No	Not listed

The heading levels are fixed at H2 and H3. This keeps the list focused on your main sections and their subsections, which is the level of detail readers actually scan. There is no control to add H4 or deeper - deeply nested lists become noise rather than navigation.

The two-heading minimum

Posts with fewer than two qualifying headings are skipped automatically. A table of contents with a single link tells the reader nothing, so BuddyX Pro simply does not render the box on those posts. This means you can safely leave the switch on for your whole site: short posts and heading-light posts stay clean, and only substantial posts get the navigation.

Where the Table of Contents Appears

The list always renders at the top of the post content, above the first paragraph and below the post title and featured image. This position is fixed - there is no setting to move it into a sidebar, pin it to the side, or make it float as the reader scrolls. It behaves as an inline "jump menu" at the start of the article, which is the pattern readers expect from a table of contents and which works identically on desktop and mobile.

Note: If you are looking for a floating or sticky progress indicator that follows the reader down the page, that is a separate feature - see the Reading Progress Bar in Single Post Settings.

Anchor Links Stay Stable

Each heading's anchor is generated from its text, so a link like yoursite.com/post/#installation points at your "Installation" heading. These anchors are stable as long as you do not rename the heading, which means you can share a deep link to a specific section - in an email, another post, or a support reply - and it keeps working across content edits. If you rename a heading, its anchor changes to match the new text, so update any external links that pointed at the old wording.

Styling and Dark Mode

The table of contents inherits your theme design - there are no separate colour pickers for it, by design. It draws from your active tokens:

A muted surface background with a subtle border
Your global Border Radius on the corners
Your Link colour for the entries, with a hover underline

Because it uses theme tokens rather than fixed colours, it repaints correctly when a visitor switches to dark mode and matches whatever Site Skin you have chosen. To restyle it beyond the defaults, target the .bx-toc class in Appearance > Customize > Additional CSS.

Best Used For

Long-form guides and tutorials (1500+ words with four or more sections)
Documentation, reference, and knowledge-base articles
Multi-step how-tos where a reader may want to jump straight to one step
Roundups and listicles with clearly headed sections

Skip It For

Short posts under 800 words (they rarely need in-page navigation)
News and opinion posts meant to be read top to bottom
Posts with one or no headings (the box will not render anyway)

Common Questions

I turned it on but no table of contents appears.

Check these in order:

The post is a single post - the feature runs on single blog posts only, not on pages, archives, or custom post types.
The post has at least two H2 or H3 headings - one heading is skipped by design.
Your headings are real headings - text made bold or made large by hand is not a heading. Use the Heading block (or H2/H3 in the editor) so the theme can find them.
Cache cleared - if you use a caching plugin, clear the cache and reload the post.

Can I show it on some posts but not others?

The customizer switch is global. Because posts with fewer than two headings are skipped automatically, the practical effect is that only your longer, well-structured posts display the box. If you need to suppress it on a specific long post, remove or reduce its headings, or add targeted CSS in Additional CSS using that post's body class.

Can I add H4 headings to the list?

No. The list is fixed to H2 and H3 to keep it scannable. H4 and deeper headings are ignored.

Can I move the table of contents into the sidebar or make it float?

Not through the customizer. It renders inline at the top of the content by design. Custom placement would require a child theme or custom development - reach out to us at support@wbcomdesigns.com if that is a hard requirement for your site.

Does it work with page builders?

The table of contents reads the standard post content that WordPress passes through the_content. Headings you place with the block editor or classic editor are detected. Content rendered entirely by a third-party builder that bypasses the normal content flow may not be scanned - test on one post before relying on it site-wide.

Single Post Layout - full single-post settings, including the reading progress bar
Reading Time - show an estimated reading time in the post meta
Post Elements & Meta - customize the information shown with each post
Blog Archive Layout - configure your blog listing pages

Got a question? We are a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

BuddyPress

Activity stream, member profiles, groups, and BuddyPress settings.

Activity Stream

The activity stream is the heartbeat of your BuddyPress community. BuddyX Pro transforms the standard activity feed into an engaging, modern experience with card layouts, activity types, and social interactions.

Where these settings live: The theme's activity display controls are in Customizer > Community Settings > Activity Control. The MediaPress override is under Customizer > Community Settings > General Setting.

Youzify note: The Community Settings panel (including the Activity Control section) is removed when the Youzify plugin is active. Run BuddyPress without Youzify to use these options.

What You Can Do

BuddyX Pro enhances the BuddyPress activity stream with:

Modern Card Layout - Instagram/Facebook-style activity cards
Activity Type Badges - Visual indicators for different activities
Action Buttons - Like, comment, share, delete
Component Filtering - Filter by profile, groups, forums, etc.
Activity Type Control - Show/hide cover image updates
Media Display - Optimized photo and video rendering
Comment Threading - Nested comment conversations
Real-time Updates - AJAX-powered live updates
Post Form - Share updates from any page

Activity Stream Features

Activity Card Design

BuddyX Pro uses a modern card-based layout for all activity items.

What Each Card Shows:

1. Activity Type Badge

Colored label at top
Shows activity category
Examples: "Profile", "Activity", "Groups", "Forums"

2. Member Avatar

Profile picture
Links to member profile
Shows online status (if enabled)

3. Activity Header

Member name and action
"John posted an update"
"Jane joined the group Marketing Team"
Timestamp

4. Activity Content

Post text
Embedded media
Shared links
Attachments

5. Activity Actions

Like/Favorite button
Comment button
Share button (if enabled)
Delete (for own activity)

6. Comment Section

Existing comments
Comment form
Nested replies

Activity Types and Badges

BuddyX Pro adds visual badges to help members quickly identify activity types.

Activity Type	Badge Label	What It Represents
Profile	"Profile"	Profile updates, avatar changes
Activity	"Activity"	Status updates, posts
Groups	"Groups"	Group joins, posts, updates
Forums	"Forums"	Forum posts (bbPress)
Friends	"Friends"	New friendships
Members	"Members"	New member registrations
Blogs	"Blogs"	Blog posts (multisite)
Business	"Business"	Custom business activities

Why This Matters: Members can quickly scan their feed and identify the types of content they're interested in.

Activity Stream Locations

The activity stream appears in multiple places throughout your site.

Sitewide Activity

Location: Main activity page (usually /activity/)

What It Shows:

All public activity across the site
Member posts
Group updates
New friendships
Profile changes

Who Sees It:

All visitors (public activity only)
Logged-in members see more

Member Profile Activity

Location: Individual member profiles, Activity tab

What It Shows:

That member's personal activity
Posts they've made
Comments they've left
Activity mentions

Who Sees It:

Depends on privacy settings
Usually public

Group Activity

Location: Individual group pages, Activity tab

What It Shows:

Activity within that group
Member posts to group
Group announcements
Member joins

Who Sees It:

Group members only (private groups)
Everyone (public groups)

Activity Widgets

Location: Sidebars and widget areas

What Shows:

Recent activity
Filtered activity streams
Specific components

Activity Type Settings

Control what types of activity appear in feeds.

Activity control settings to show or hide specific activity types in the feed

Cover Image Activity Settings

BuddyX Pro lets you hide profile update clutter.

Available Settings:

Setting	What It Controls	Default
Member Cover Image Activity	Shows when member updates cover	On
Group Image Activity	Shows when group avatar changes	On
Group Cover Image Activity	Shows when group cover updates	On

Why You'd Disable These:

Reasons to Hide:

Reduces activity stream noise
Focuses on user-generated content
Members update covers frequently
Professional communities prefer substance over style changes

Reasons to Show:

Encourages profile customization
Celebrates member engagement
Visual community culture
Shows active participation

How to Configure:

Appearance > Customize
Community Settings > Activity Control
Check/uncheck desired activity types
Click Publish

Activity Posting

Let members share updates from anywhere on your site.

The Activity Post Form

What It Includes:

"What's new?" text area
Media upload button (with plugins)
Privacy selector (with plugins)
Post button

Where It Appears:

Top of activity stream page
Member profile pages
Group pages (post to group)

Who Can Post:

Logged-in members only
Must have posting permissions

Posting to Groups

Members can post specifically to groups:

Visit group page
Use post form at top
Write message
Click Post
Appears in group activity only

Privacy:

Public groups: Activity visible to all
Private groups: Members only
Hidden groups: Members only

@Mentions

Tag other members in posts and comments.

How to Mention:

Type @ symbol
Start typing member name
Select from autocomplete
Member gets notification

Example: @JohnDoe check out this cool feature!

What Happens:

Tagged member gets notification
Activity appears in their Mentions stream
Creates engagement opportunity

Activity Filtering

Help members find relevant content.

Members can filter activity by:

By Component:

Everything (default)
Updates & Replies
Profile Updates
Friendships
New Groups
Group Updates
Forum Topics (bbPress)

By Scope:

Everything
My Activity
My Favorites
My Friends (if friends enabled)
My Groups
Mentions (@mentions)

How to Use Filters:

Visit activity stream
Click filter dropdown
Select desired filter
Stream updates instantly (AJAX)

Custom Activity Streams

Create focused activity streams with widgets:

Widget Examples:

Recent activity from specific group
Activity from members in same city
Forum activity only
Friend activity only

Setup:

Appearance > Widgets
Add BP Activity Widget
Configure filters
Place in sidebar

Activity Actions

What members can do with activity items.

Like/Favorite

What It Does:

Marks activity as favorite
Shows appreciation
Saves for later

How It Works:

Click heart/star icon
Activity saved to "My Favorites"
Counter increments
Original poster sees engagement

Who Can See:

Favorite count is public
Individual favorites are private

Comment

What It Does:

Add comment to activity
Start conversations
Nested replies supported

How to Comment:

Click Comment button
Type comment
Click Post
Appears below activity

Comment Features:

@mention support
Threaded replies
Delete own comments
Like comments (with plugins)

What It Does:

Reshare activity to your stream
Credit original poster
Amplify content

Requires: Activity sharing plugin

Delete

Who Can Delete:

Original poster (own activity)
Site administrators
Group moderators (group activity)

How to Delete:

Click Delete or trash icon
Confirm deletion
Activity removed permanently

Note: Deleting activity also deletes all comments on it.

Activity Privacy

Control who sees activity content.

Default Privacy Levels

Public Activity:

Status updates
Profile changes
New friendships
Group joins (public groups)

Private Activity:

Private group posts
Hidden group activity
Direct mentions (sometimes)

Privacy by Component

Friends Component:

New friendships are public
Friend activity filter is personal

Groups Component:

Public groups: Activity is public
Private groups: Members only
Hidden groups: Members only

Private Messages:

Never appear in activity stream
Completely private

Media in Activity

Enhance posts with photos, videos, and links.

Photo Uploads

Requires: Media plugin (MediaPress, BuddyPress Media, etc.)

What Members Can Do:

Upload photos to posts
Create photo albums
Tag photos
Like and comment on media

Display in Activity:

Inline photo display
Lightbox viewing
Gallery layouts

Video Uploads

Requires: Media plugin

Supported:

Uploaded videos
YouTube embeds
Vimeo embeds

Display:

Inline video players
Thumbnail previews
Responsive sizing

Link Previews

What Happens:

Member pastes URL in post
System fetches link preview
Shows thumbnail, title, description
Rich preview in activity stream

Supported Platforms:

YouTube
Vimeo
Most websites with OpenGraph tags

MediaPress Integration

If MediaPress Plugin Installed:

BuddyX Pro provides enhanced media list views.

Enhanced Features:

Better media grid layouts
Improved activity media display
Optimized lightbox viewing

Control Setting:

Customizer > Community Settings > General Setting
Override Activity Media List View: Enable/Disable
Publish

Note: When enabled, MediaPress backend settings for media size may not function as expected.

Activity Notifications

How members stay updated on activity.

Notification Triggers

Members get notified for:

@mentions in activity
Replies to their activity
Comments on their posts
Likes on their activity (with plugins)
New group activity (if enabled)

Notification Display

Header Notification Icon:

Bell icon in site header
Badge shows unread count
Dropdown shows recent notifications

Email Notifications:

Configurable in member settings
Instant, daily digest, or never
Per-notification-type controls

Performance Optimization

Keep your activity stream fast.

For Large Communities

Best Practices:

Enable object caching (Redis/Memcached)
Limit activity per page (10-15 items)
Disable unnecessary activity types
Use lazy loading for media
Implement infinite scroll carefully

Caching Considerations

Don't Cache:

Activity stream pages (dynamic content)
Post forms (nonce issues)
Comment forms

Do Cache:

Media files
Avatars
Static elements

How to Exclude from Cache: Add activity pages to cache plugin exclusions.

Common Questions

Q: Can I delete old activity automatically? A: Not built-in. Requires plugin like "BP Activity Cleaner" or custom cron job.

Q: Why don't I see all activity types? A: Only active BuddyPress components generate activity. Enable components in Settings > BuddyPress.

Q: Can members hide their activity from others? A: Not by default. BuddyPress activity is generally public. Requires custom development.

Q: How do I disable activity stream entirely? A: Deactivate the Activity component in Settings > BuddyPress > Components.

Q: Why do cover image updates clutter my feed? A: Disable them in Customizer > Community Settings > Activity Control > Uncheck cover image options.

Q: Can I limit who can post activity? A: You can disable posting for specific user roles with custom code or plugins.

Q: How do I moderate inappropriate activity? A: Site admins can delete any activity. Consider moderation plugins for better tools.

Q: Does activity have a character limit? A: No character limit by default. Can be added with custom code.

Q: Can I schedule activity posts? A: Not natively. Requires third-party scheduling plugins.

Q: Why don't @mentions work? A: Ensure notifications component is active and member name is spelled correctly.

Activity Stream Best Practices

Encourage Engagement

Do:

Post regularly as admin
Respond to member activity
Create discussion prompts
Feature member content
Use @mentions actively

Don't:

Over-moderate (stifles conversation)
Let spam accumulate
Ignore member questions
Post only announcements

Content Moderation

Set Clear Guidelines:

Post community rules
Link to guidelines in post form
Moderate consistently
Explain removals

Use Tools:

Moderation plugins
Report buttons
Admin controls
Spam filters

Drive Activity

Strategies:

Weekly discussion topics
Member spotlights
Questions of the day
Challenges and contests
Group activity prompts

Recommended Configurations by Community Type

Professional Network

Disable: Cover image activity, group image activity
Enable: @mentions, comments
Focus: Professional updates, industry discussions
Moderation: Higher standard, clear guidelines

Enable: All activity types, media sharing
Encourage: Photos, videos, personal updates
Features: Likes, favorites, sharing
Moderation: Lighter touch, community-driven

Learning Community

Disable: Cover image updates
Enable: Group activity, forum activity
Focus: Educational content, course discussions
Features: Document sharing, Q&A

Support Community

Disable: Friendship updates, cover images
Enable: Group activity, @mentions
Privacy: Consider more private groups
Moderation: High sensitivity, quick response

Hobby/Interest Community

Enable: All activity, media sharing
Encourage: Project photos, achievements
Features: Rich media, photo albums
Moderation: Community guidelines, self-policing

BuddyPress Customizer Settings - Activity customization options
Member Profiles - Personal activity streams
Groups - Group activity feeds
Member Directory - Member discovery

Got a question? We're a friendly team - happy to help.

BuddyPress Integration

BuddyX Pro automatically styles all BuddyPress pages with custom templates and Customizer options.

Where the settings live: BuddyX Pro's BuddyPress and bbPress controls sit in a customizer panel named Community Settings (not "BuddyPress"). Open Appearance > Customize > Community Settings.

Youzify note: The entire Community Settings panel is removed when the Youzify plugin is active - Youzify manages the directory, profile, and activity screens itself. Run BuddyPress (or bbPress) without Youzify to reach these settings.

Quick Setup

1. Install BuddyPress

Plugins > Add New
Search "BuddyPress"
Click Install Now then Activate

2. Set Template Pack

Required: BP Nouveau (BP Legacy not supported)

Settings > BuddyPress > Options
Select BP Nouveau
Save

3. Enable Components

Settings > BuddyPress > Components

Enable what you need:

Extended Profiles
Activity Streams
Friend Connections
Private Messaging
User Groups
Notifications

4. Configure BuddyX Settings

Appearance > Customize > Community Settings

That's it - BuddyX Pro handles the styling automatically.

What BuddyX Pro Adds

Activity Stream

Clean card layout
Styled action buttons (like, comment, share)
Optimized media display
AJAX load more
Filter dropdowns

Member Directory

Three directory view styles (Style 1, Style 2 Card, Style 3 Card1)
Member cards with avatar, name, meta
Online status indicators
Search and filters
Pagination

Member Profiles

6 header layout styles
Cover image with drag-drop upload
Navigation tabs
Profile fields display
Action buttons (Add Friend, Message)

Groups

Two directory view styles (Style 1, Style 2 Card)
Group cards with avatar and meta
6 single group header styles
Group navigation
Join/Leave buttons

Private Messaging

Conversation threads
Message composition
Star important messages
Search messages

Customizer Settings

All of the controls below live in Customizer > Community Settings. This is an overview - see BuddyPress Settings for every option, default, and screenshot.

General Setting

Customize > Community Settings > General Setting

Setting	Options	Default
Avatar Style	Yes (round) / No (square)	Yes
Override Activity Media List View (MediaPress only)	Enable / Disable	Enable

Members Directory

Customize > Community Settings > Members Directory

Setting	Options	Default
Members Directory View	Style 1 / Style 2 (Card) / Style 3 (Card1)	Style 2 (Card)
Customize Members Cover Background? (BuddyPress only)	Yes / No	No
Set Default Cover Image (BuddyPress only)	Image upload	-
Member Directories Elements	Online Status, Profile Type, Followers, Last Active, Joined Date	Online Status, Last Active, Joined Date on

Single Member

Customize > Community Settings > Single Member

Setting	Options	Default
Single Member Header Layout	6 layout options (Left View, Centered View, Container Left View, Container Centered View, Stretch Left View, Stretch Centered View)	Left View
Single Member Navigation View	More / Swipe	Swipe
Single Member Navigation Style	Default / Icon + Label / Icon + Label (Swipe 1) / Icon + Label (Swipe 2)	Icon + Label
Display Name Format (BuddyPress only)	Username / Display Name	Username
Show User Social Links	Yes / No	No
Profile Headers Elements	Online Status, Profile Type, Member Handle, Joined Date, Last Active, Followers, Following	all on

Groups Directory

Customize > Community Settings > Groups Directory

Setting	Options	Default
Groups Directory View	Style 1 / Style 2 (Card)	Style 2 (Card)
Customize Groups Cover Background? (BuddyPress only)	Yes / No	No
Set Default Cover Image (BuddyPress only)	Image upload	-
Group Directories Elements	Cover Images, Avatars, Group Privacy, Last Activity, Members (BuddyBoss), Group Descriptions (BuddyBoss), Join Buttons	all on

Single Group

Customize > Community Settings > Single Group

Setting	Options	Default
Single Group Header Layout	6 layout options (Left View, Container View, Container Left View, Container Centered View, Stretch Left View, Stretch Centered View)	Left View
Single Group Navigation View	More / Swipe	Swipe
Single Group Navigation Style	Default / Icon + Label / Icon + Label (Swipe 1) / Icon + Label (Swipe 2)	Icon + Label
Group Headers Elements	Group Type, Last Activity, Group Description, Group Organizers, Group Privacy	all on

BuddyBoss note: The Customize Members/Groups Cover Background switches and their Set Default Cover Image uploads exist only on BuddyPress (non-BuddyBoss) sites. When BuddyBoss Platform is active, BuddyBoss manages directory cover images and these controls are hidden.

Header Icons

BuddyX Pro adds these to your site header:

Notification Bell - Unread count badge, dropdown list
Messages Icon - Unread count, quick access
User Menu - Avatar dropdown with profile links

Enable/disable at: Customize > Site Header > Header Elements

BuddyX Pro creates dedicated sidebars:

Widget Area	Use For
BuddyPress Left/Right Sidebar	BP pages
Members Directory Sidebar	Member listing
Groups Directory Sidebar	Groups listing
Activity Sidebar	Activity stream

Add widgets at: Appearance > Widgets

Common Issues

Members page 404

Settings > Permalinks
Click Save Changes

"Requires BP Nouveau" error

Settings > BuddyPress > Options
Select BP Nouveau under Template Pack
Save

Activity not loading

Enable Activity at Settings > BuddyPress > Components
Create test content
Clear cache

Avatars not showing

Check folder permissions: chmod 755 wp-content/uploads
Verify uploads enabled in BuddyPress settings

Profile pages broken

Verify using BP Nouveau template pack
Clear all caches
Deactivate plugins to find conflict

BuddyPress Settings - Customizer options
Member Profiles - Profile customization
Member Directory - Directory options
Groups - Group configuration
Activity Stream - Activity settings

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

BuddyPress Customizer Settings

Customize every aspect of your BuddyPress community through the WordPress Customizer. BuddyX Pro provides extensive settings to match your community's brand and style.

Where these settings live: BuddyX Pro groups every BuddyPress and bbPress control under a customizer panel named Community Settings (not "BuddyPress"). All paths on this page read Customizer > Community Settings > [Section].

Youzify note: The entire Community Settings panel - every control described on this page - is removed when the Youzify plugin is active. Youzify manages its own directory, profile, and activity screens, so BuddyX Pro hands those controls off to it. To see the settings below, run BuddyPress (or bbPress) without Youzify active.

What You Can Configure

The Community Settings panel contains these sections (they appear when BuddyPress or bbPress is active and Youzify is not):

General Setting - Avatar style and MediaPress media-view option
Activity Control - Cover-image activity types shown in the feed
Members Directory - Member directory view and card elements
Groups Directory - Group directory view and card elements
Single Member - Individual member profile header, navigation, and social links
Single Group - Individual group header and navigation
Forums Archive Layout - bbPress forums archive layout (only when bbPress is active)

Accessing BuddyPress Settings

Log in to your WordPress admin dashboard
Go to Appearance > Customize
Click the Community Settings panel
Select the section you want to configure

General Setting

Configure global BuddyPress appearance options.

BuddyPress general settings for avatar style and activity media options

Available Settings

Setting	Options	Default	What It Does
Avatar Style	Yes/No	Yes	Makes avatars circular. Turn off for square avatars.
Override Activity Media List View	Enable/Disable	Enable	Enhances MediaPress media display. This control only appears when the MediaPress plugin is active.

Location: Customizer > Community Settings > General Setting

Activity Control

Control what appears in activity streams across your community.

Available Settings

Setting	Options	Default	What It Does
Member Cover Image Activity	Yes/No	Yes	Shows activity when member updates cover photo.
Group Image Activity	Yes/No	Yes	Shows activity when group avatar changes.
Group Cover Image Activity	Yes/No	Yes	Shows activity when group cover photo updates.

Why This Matters: Disabling these options reduces activity stream clutter if your community prefers to focus on user-generated content rather than profile updates.

Location: Customizer > Community Settings > Activity Control

Members Directory

Customize how members appear in your directory and what information displays.

Directory Layout Options

The Members Directory View control (a select) offers three styles. The theme default is Style 2 (Card).

Layout	Value	Description	Best For
Style 1	`default`	Classic list view with avatars on left	Traditional social networks
Style 2 (Card) - default	`card`	Card layout with cover images	Visual, portfolio-based communities
Style 3 (Card1)	`card1`	Compact card with action buttons	Professional networks, business directories

How to Change:

Customizer > Community Settings > Members Directory
Find Members Directory View
Select your preferred style
Click Publish

Cover Image Customization

Available for: Style 2 and Style 3 layouts

Setting	Default	What It Does
Customize Members Cover Background?	No	Enables custom default cover images. Appears only when the view is Style 2 or Style 3.
Set Default Cover Image	(empty)	Upload image shown when member has no cover. Appears once Customize Members Cover Background is set to Yes.

BuddyBoss note: These two cover-image controls are not available when BuddyBoss Platform is active - BuddyBoss manages directory cover images itself, so the theme omits them. They appear only on a BuddyPress (non-BuddyBoss) site.

Recommended Cover Dimensions: 1300px x 225px

Member Directory Elements

Control which information appears on member cards:

Element	Default	What It Shows
Online Status	On	Green dot for online, gray for offline
Profile Type	Off	Member type badge (if using member types)
Followers	Off	Follower count (requires BP Follow or BuddyBoss)
Last Active	On	"Active 2 hours ago" timestamp
Joined Date	On	"Joined Jan 2024" registration date

Performance Tip: The Online Status indicator updates every 5 minutes. Disable it on high-traffic sites to reduce database queries.

Followers appears only when the BP Follow plugin or BuddyBoss Platform is active.

Location: Customizer > Community Settings > Members Directory > Member Directories Elements

Groups Directory

Configure how groups display in your directory.

Directory Layout Options

The Groups Directory View control (a select) offers two styles. The theme default is Style 2 (Card).

Layout	Value	Description	Best For
Style 1	`default`	List view with group info	Simple communities with few groups
Style 2 (Card) - default	`card`	Card layout with cover images	Communities with many active groups

Cover Image Customization

Available for: Style 2 (Card) layout

Setting	Default	What It Does
Customize Groups Cover Background?	No	Enables custom default cover images. Appears only when the view is Style 2 (Card).
Set Default Cover Image	(empty)	Upload image shown when group has no cover. Appears once Customize Groups Cover Background is set to Yes.

BuddyBoss note: These two cover-image controls are not available when BuddyBoss Platform is active - BuddyBoss handles group cover images itself. They appear only on a BuddyPress (non-BuddyBoss) site.

Recommended Cover Dimensions: 1300px x 225px

Group Directory Elements

Control which information appears on group cards:

Element	Default	What It Shows	Available In
Cover Images	On	Group cover photo	Style 2 only
Avatars	On	Group profile picture	All styles
Group Privacy	On	Public/Private/Hidden badge	All styles
Last Activity	On	Most recent activity timestamp	All styles
Members	On	Member count	BuddyBoss only
Group Descriptions	On	Brief description text	BuddyBoss only
Join Buttons	On	Join/Request to Join button	All styles

Location: Customizer > Community Settings > Groups Directory > Group Directories Elements

BuddyX Pro lets you set the sidebar layout for your BuddyPress directory pages independently of the rest of the site. Each directory picks from the same four presets - None (full width, no sidebar), Left, Right, or Both.

Setting	Options	Default	What It Controls
Activity Directory Sidebar Layout	None / Left / Right / Both	Both	Sidebar placement on the main activity stream directory
Members Directory Sidebar Layout	None / Left / Right / Both	Right	Sidebar placement on the members directory
Groups Directory Sidebar Layout	None / Left / Right / Both	Right	Sidebar placement on the groups directory

Location: Customizer > Site Sidebar

Note: These three controls appear only when BuddyPress is active and Youzify is not installed. Youzify manages its own directory layouts, so the theme hands off sidebar control to it when Youzify is present.

Youzify Appearance Override

If you run the Youzify profile plugin alongside BuddyX Pro, the theme adds one control so your custom color scheme can take over Youzify's own light/dark styling.

Setting	Options	Default	What It Does
Override Youzify Default Appearance Mode?	Yes/No	Yes	When Yes, BuddyX Pro's custom colors drive Youzify's profile surfaces instead of Youzify's built-in appearance mode. Set to No to leave Youzify styling untouched.

Location: Customizer > Site Skin

Note: This control appears only when Youzify is active, and it takes effect once Custom Colors is enabled in Site Skin. With Custom Colors off, Youzify keeps its default appearance.

Single Member Profile Settings

Customize individual member profile pages with multiple header layouts and navigation styles.

Layout	Description	Best For
Left View	Avatar on left, info on right, full width	Classic profiles
Centered View	Avatar centered, info below	Modern, minimal designs
Container Left View	Left layout within container	Boxed site layouts
Container Centered View	Centered layout within container	Professional networks
Stretch Left View	Left layout, full browser width	Magazine-style sites
Stretch Centered View	Centered layout, full browser width	Portfolio communities

Single Member Navigation View (default: Swipe):

More - Dropdown for extra tabs
Swipe - Horizontal scroll navigation

Single Member Navigation Style (default: Icon + Label):

Default - Text labels only
Icon + Label - Icons with text
Icon + Label (Swipe 1) - Compact icons for swipe
Icon + Label (Swipe 2) - Larger icons for swipe

Display Name Format

Available for: BuddyPress only. This control is hidden when BuddyBoss Platform is active.

Format	Shows	Example
Username	WordPress username	@johndoe
Display Name	User's display name	John Doe

Profile Header Elements

Control what information appears in member headers:

Element	Default	What It Shows
Online Status	On	Online/offline indicator
Profile Type	On	Member type badge
Member Handle	On	@username display
Joined Date	On	Registration date
Last Active	On	Last activity timestamp
Followers	On	Follower count. Appears only when BP Follow or BuddyBoss Platform is active.
Following	On	Following count. Appears only when BP Follow or BuddyBoss Platform is active.

Enable members to add social media profiles to their BuddyPress profiles.

How to Enable:

Customizer > Community Settings > Single Member
Enable Show User Social Links (default: No)
Configure social networks in User Social Links section

Default Networks:

Facebook
Twitter
LinkedIn
Instagram

Add Custom Networks:

Click Add button
Enter network name
Add FontAwesome icon code (e.g., <i class="fa-brands fa-tiktok"></i>)
Choose icon color
Save

Members can then add their profile URLs in their BuddyPress profile edit page.

Location: Customizer > Community Settings > Single Member

Single Group Settings

Configure individual group pages with header and navigation options.

The Single Group Header Layout control (default: Left View) mirrors the Single Member layouts, with one label difference - the second option is named Container View here:

Left View (default)
Container View
Container Left View
Container Centered View
Stretch Left View
Stretch Centered View

Single Group Navigation View (default: Swipe):

More (dropdown)
Swipe (horizontal scroll)

Single Group Navigation Style (default: Icon + Label):

Default
Icon + Label
Icon + Label (Swipe 1)
Icon + Label (Swipe 2)

Group Header Elements

Control what information appears in group headers:

Element	Default	What It Shows
Group Type	On	Group type badge
Last Activity	On	Most recent activity
Group Description	On	Group description text
Group Organizers	On	Group admin/moderator info
Group Privacy	On	Public/Private/Hidden status

Location: Customizer > Community Settings > Single Group

Forums Archive Layout (bbPress)

When bbPress is active, the Community Settings panel adds a Forums Archive Layout section that sets how the forums archive page lists its forums.

Setting	Options	Default	What It Does
Forums Archive Layout	Default / Card / Cover	Default	Chooses the listing layout for the forums archive page.

This section appears only when bbPress is installed and active, and (like the rest of the panel) is hidden when Youzify is active.

Location: Customizer > Community Settings > Forums Archive Layout

Recommended Configurations by Community Type

Professional Network

Members Directory:

Layout: Style 3 (Card1)
Show: Profile Type, Followers, Joined Date
Hide: Last Active, Online Status

Single Member:

Header: Container Centered View
Navigation: Icon + Label
Show: Profile Type, Member Handle, Followers
Enable: User Social Links

Members Directory:

Layout: Style 2 (Card)
Show: Online Status, Last Active, Joined Date
Custom: Add fun cover images

Single Member:

Header: Left View
Navigation: Swipe with Icon + Label
Show: Online Status, Last Active, Followers

Learning Community

Members Directory:

Layout: Style 1
Show: Profile Type, Joined Date, Last Active

Groups:

Layout: Style 2 (Card)
Show: Cover Images, Descriptions, Member Count

Single Member:

Header: Container Left View
Navigation: More (dropdown)

Private Membership Site

Members Directory:

Layout: Style 3 (Card1)
Show: Profile Type, Joined Date
Hide: Online Status (privacy)

Single Member:

Header: Container Centered View
Hide: Last Active (privacy)
Show: Profile Type, Member Handle

Common Questions

Q: Do I need to refresh the page to see changes? A: Yes. Most BuddyPress settings require publishing and refreshing the page as live preview is not available.

Q: Can I use different layouts for different member types? A: No. The layout applies to all members. You can use custom CSS to style specific member types differently.

Q: Will changing layouts break my site? A: No. You can safely test different layouts. If you don't like a change, simply switch back.

Q: Do cover images slow down my site? A: Cover images add visual appeal but do increase page weight. Use optimized images (WebP format, under 200KB) for best performance.

Q: What if I don't see the Community Settings panel in Customizer? A: The panel appears only when BuddyPress, BuddyBoss Platform, or bbPress is active. It is also completely removed when the Youzify plugin is active, because Youzify manages those screens itself. Deactivate Youzify (or confirm a community plugin is active) to see the panel.

Q: Can members choose their own layout? A: No. Layout settings are site-wide and controlled by administrators only.

Q: How do I know which layout looks best? A: Test each layout with real member data. Ask a few community members for feedback before finalizing.

Q: Will these settings work with BuddyBoss Platform? A: Yes. BuddyX Pro is fully compatible with both BuddyPress and BuddyBoss Platform.

Member Profiles - Detailed profile customization
Member Directory - Directory features and filters
Groups - Group settings and layouts
Activity Stream - Activity feed configuration
BuddyPress Overview - Integration overview

Got a question? We're a friendly team - happy to help.

Groups

BuddyPress Groups let members create communities within your community. BuddyX Pro enhances groups with beautiful layouts, custom cover images, and extensive customization options.

Where these settings live: Groups Directory controls are in Customizer > Community Settings > Groups Directory, and single-group controls are in Customizer > Community Settings > Single Group. The default directory view is Style 2 (Card).

Youzify note: The Community Settings panel (including every Groups control) is removed when the Youzify plugin is active. Run BuddyPress without Youzify to use these options.

Groups Directory Frontend

What You Can Do with Groups

BuddyX Pro provides powerful group features:

2 Directory Layout Styles - List or card views
6 Header Layout Options - For single group pages
Custom Cover Images - Visual group identity
Group Type Badges - Categorize groups visually
Privacy Indicators - Public/Private/Hidden badges
Activity Integration - Group-specific activity streams
Member Lists - Showcase group members
Organizer Display - Highlight group admins
Join/Leave Buttons - Easy membership management

Groups Directory Layouts

Choose how groups appear in your directory.

Style 1: List View

Groups Directory Style 1 Style 1 - Classic list view with groups displayed in horizontal rows

Best For: Simple communities, few groups

Features:

Horizontal list layout
Group avatar on left
Info on right
Classic forum style
Maximum information density

What Displays:

Group avatar (square or circular)
Group name and description
Last activity timestamp
Member count
Privacy status (Public/Private/Hidden)
Join/Leave button

When to Use:

Communities with <20 groups
Forum-style sites
Information-focused layouts
Desktop-primary audiences

Style 2: Card with Cover Images (Default)

Groups Directory Style 2 Style 2 - Card view with cover images and overlapping group avatars

Best For: Visual communities, active groups

Features:

Card-based grid layout
Cover images at top
Avatar overlays cover
Modern, visual design
Instagram-like cards

What Displays:

Cover image background
Group avatar (overlapping cover)
Group name
Privacy badge
Member count
Last activity
Join button

When to Use:

Communities with many active groups
Visual, modern brands
Groups with cover images
Communities encouraging group creation

Requirements:

Looks best when groups have cover images
Custom default cover recommended

How to Change Layout

Go to Appearance > Customize
Navigate to Community Settings > Groups Directory
Find Groups Directory View
Select: Style 1 or Style 2 (Card)
Click Publish
Visit groups directory to see changes

Note: Publish and refresh page to see changes. Live preview not available.

Group Directory Elements

Control what information appears on group cards.

Available Elements

Element	What It Shows	Default	Available In
Cover Images	Group cover photo	On	Style 2 only
Avatars	Group profile picture	On	All styles
Group Privacy	Public/Private/Hidden	On	All styles
Last Activity	Recent activity time	On	All styles
Members	Member count	On	BuddyBoss only
Group Descriptions	Brief description	On	BuddyBoss only
Join Buttons	Join/Leave actions	On	All styles

How to Configure Elements

Customizer > Community Settings > Groups Directory
Scroll to Group Directories Elements
Check/uncheck desired elements
Click Publish
Refresh groups page

Important: Changes require publishing and page refresh.

Element Details

Cover Images

Available: Style 2 (Card) only

What It Is:

Banner image at top of card
Visible in directory
Uploaded by group admins

Why Show:

Visual group identity
Attractive directory
Encourages group branding

Why Hide:

Cleaner, simpler layout
Faster loading
Few groups have covers

Performance: Disable if page load is slow with many groups.

Avatars

What It Is:

Group profile picture
Appears on all layouts

Why Show:

Visual group recognition
Professional appearance
Standard expectation

Why Hide:

Text-only preference (rare)
Extreme minimalism

Recommendation: Keep enabled. Avatars are core to group identity.

Group Privacy

What It Shows:

Public - Anyone can see and join
Private - Visible, join requires approval
Hidden - Invitation-only, not visible in directory

Why Show:

Transparency
Helps members understand access
Reduces confusion

Why Hide:

All groups same privacy level
Minimalist design

Recommendation: Keep enabled for clarity.

Last Activity

What It Shows:

"Active 2 hours ago"
"Active this week"
Relative timestamps

Why Show:

Shows active vs inactive groups
Helps members find engagement
Encourages participation

Why Hide:

Don't want to highlight inactive groups
All groups consistently active

Members Count (BuddyBoss Only)

What It Shows:

Total member count
"24 members" text

Why Show:

Popular group indicator
Helps members find active groups
Social proof

Why Hide:

Don't want to highlight small groups
Equal emphasis on all groups

Group Descriptions (BuddyBoss Only)

What It Shows:

Brief group description text
Excerpt from full description

Why Show:

Helps members understand group purpose
Better browsing experience
More context

Why Hide:

Cleaner, simpler cards
Group names self-explanatory

Join Buttons

What It Shows:

Join Group - For public groups
Request Membership - For private groups
Leave Group - If already member
No button for hidden groups

Why Show:

Quick group joining
Better user experience
Standard functionality

Why Hide:

Force visits to group page first
Reduce accidental joins (rare)

Recommendation: Keep enabled for best user experience.

Cover Image Customization

Available for: Style 2 (Card) layout

BuddyBoss note: The Customize Groups Cover Background switch and Set Default Cover Image upload appear only on a BuddyPress (non-BuddyBoss) site. When BuddyBoss Platform is active, BuddyBoss handles group cover images and the theme hides these two controls.

Add visual appeal with group cover images.

Setting Default Cover Images

Provide fallback cover when groups don't upload their own:

Customizer > Community Settings > Groups Directory
Enable Customize Groups Cover Background
Click Set Default Cover Image
Upload your image
Click Publish

Cover Image Best Practices

Recommended Dimensions: 1300px x 225px

Design Tips:

Use community-themed images
Subtle patterns work best
Avoid text (accessibility)
Keep file size under 200KB
Test with avatar overlay
Consider group avatar position

Good Default Ideas:

Branded gradient
Community logo watermark
Abstract patterns
Thematic backgrounds
Solid colors with texture

What to Avoid:

Busy photos
Dark colors (poor avatar contrast)
Text or detailed logos
Stock photos of people

Group Admin Upload Process

Group admins can upload custom covers:

Visit group page
Click Change Cover Image (on cover area)
Drag and drop or browse
Crop if needed
Click Upload

Requirements:

Must be group admin or moderator
BuddyPress cover images enabled
Logged in

Single Group Layouts

Customize individual group pages.

Choose from 6 layouts (same as member profiles):

Group Header Left View Left View - Classic layout with avatar left, info right

Group Header Container Container View - Contained width layout

Group Header Container Left Container Left View - Left-aligned in contained width

Group Header Container Center Container Centered View - Centered in contained width

Group Header Stretch Left Stretch Left View - Full width with left alignment

Group Header Stretch Center Stretch Centered View - Full width with centered alignment

Layout	Description	Best For
Left View	Avatar left, info right, full width	Classic group pages
Container View	Centered, contained width	Boxed layouts
Container Left View	Left layout, contained	Professional communities
Container Centered View	Centered, contained	Formal organizations
Stretch Left View	Left layout, full browser width	Visual impact
Stretch Centered View	Centered, full browser width	Maximum impact

How to Change:

Customizer > Community Settings > Single Group
Single Group Header Layout: Choose layout
Publish

Recommended Layout

Left View is recommended for most communities because:

Familiar layout - Users expect avatar on left, info on right (like Facebook groups, LinkedIn)
Easy scanning - Eye naturally flows left to right
Action buttons accessible - Prominent placement for Join Group, Send Message
Works at all screen sizes - Responsive without awkward reflows
Professional appearance - Clean, traditional social network feel

Use centered or stretch layouts only if your design specifically calls for it (portfolios, creative communities, magazine-style sites).

Navigation View:

More - Extra tabs in dropdown
Swipe - Horizontal scrolling tabs

Navigation Style:

Default - Text only
Icon + Label - Icons with text
Icon + Label (Swipe 1) - Compact for swipe
Icon + Label (Swipe 2) - Larger for swipe

Configuration:

Customizer > Community Settings > Single Group
Single Group Navigation View: Choose More or Swipe
Single Group Navigation Style: Choose style
Publish

Group Header Elements

Control information displayed in group headers.

Available Elements

Element	What It Shows	Default
Group Type	Type badge	On
Last Activity	Recent activity	On
Group Description	Full description	On
Group Organizers	Admin/mod list	On
Group Privacy	Privacy status	On

How to Configure

Customizer > Community Settings > Single Group
Scroll to Group Headers Elements
Check/uncheck elements
Publish and refresh

Element Details

Group Type

What It Is:

Visual badge showing group category
Examples: "School", "Project", "Social"

Why Show:

Multiple group categories
Help members understand purpose
Visual organization

Why Hide:

All groups same type
Simpler design

Requirements: Group Types must be set up in BuddyPress.

Last Activity

Shows: Most recent group activity timestamp

Why Show: Indicates active vs dormant groups

Why Hide: Privacy or all groups equally active

Group Description

Shows: Full group description text

Why Show: Clear group purpose and rules

Why Hide: Minimal design, description obvious from name

Group Organizers

Shows:

Group creator
Administrators
Moderators
Avatar and name

Why Show:

Contact information
Accountability
Community transparency

Why Hide:

Anonymous group structure
Minimal information preference

Group Privacy

Shows: Public/Private/Hidden status with icon

Why Show: Clear access expectations

Why Hide: All groups same privacy level

Group Types

Categorize groups for better organization.

What Are Group Types?

Group types let you categorize groups:

Study Groups vs Social Groups
Regional Chapters
Project Teams vs Discussion Groups
Free vs Premium Groups

Setting Up Group Types

Install group types plugin or use custom code
Define group type taxonomy
Assign types when creating groups
BuddyX Pro displays type badges automatically

Where Types Appear

Group directory cards
Single group header
Group search filters

To Hide Type Badges:

Customizer > Community Settings > Single Group
Uncheck Group Type
Publish

Group Privacy Levels

Understand BuddyPress group privacy options.

Public Groups

Visibility: Listed in directory, visible to all

Who Can Join: Anyone

Content Visibility: Public activity

Best For:

Open communities
Public discussions
Marketing/brand groups
Community announcements

Private Groups

Visibility: Listed in directory

Who Can Join: Requires approval

Content Visibility: Members only

Best For:

Semi-private discussions
Teams requiring approval
Alumni groups
Professional groups

Hidden Groups

Visibility: Not in directory (invitation only)

Who Can Join: Invitation required

Content Visibility: Members only

Best For:

Secret projects
Executive teams
Support groups
VIP access

Note: BuddyX Pro displays privacy badges to help members understand access levels.

Group Activity Feeds

Every group has its own activity stream.

What Appears in Group Activity

Member posts to group
Group announcements
New member joins
Group updates
Uploaded media (with plugins)

Activity Features

For Members:

Post directly to group
Comment on group activity
Like/react to posts
Share activity

For Admins:

Pin important posts
Delete inappropriate content
Moderate discussions

Location: Single group page, Activity tab

Group Member Lists

Show who's in each group.

What's Displayed

All group members
Admins and moderators highlighted
Member avatars
Join dates
Member roles

Admin Actions

Group admins can:

Promote to admin/moderator
Remove members
Ban members
Send group messages

Location: Single group page, Members tab

Creating Groups

How members create new groups.

Group Creation Process

Click Create a Group button
Details: Name, description, privacy
Settings: Enable features
Cover/Avatar: Upload images
Invite: (optional) Invite members
Click Finish

Admin Settings for Group Creation

Who Can Create Groups:

Set in Settings > BuddyPress > Settings > Group Creation

Options:

All members
Administrators only
Specific user roles (with plugins)

Recommendation: Start restricted, open up as community matures.

Common Questions

Q: Can I limit how many groups a member can create? A: Not in BuddyPress by default. Requires custom plugin.

Q: How do I delete a group? A: Group admins can delete from group settings, or WordPress admins from admin dashboard.

Q: Can groups have subgroups? A: Not natively. Requires hierarchical groups plugin.

Q: What's the difference between admin and moderator? A: Admins have full control. Moderators can moderate content but not delete group.

Q: Can I disable group creation entirely? A: Yes. Settings > BuddyPress > Settings > Restrict group creation to admins.

Q: How do I make all new groups require approval? A: Requires custom code or plugin. Not a default BuddyPress option.

Q: Why don't my cover images appear in directory? A: Cover images only show in Style 2 (Card) layout. Switch from Style 1.

Q: Can I change the default group privacy? A: Not through theme settings. Requires custom code modification.

Q: How do I feature/pin certain groups at top? A: Requires custom code or groups featured plugin.

Q: Can members join multiple groups? A: Yes, unlimited by default.

Recommended Configurations by Community Type

Educational Institution

Layout: Style 1
Show: Group Type, Descriptions, Organizers, Members
Group Types: Classes, Clubs, Departments
Why: Information-focused, clear organization

Professional Network

Layout: Style 2 (Card)
Show: Group Type, Privacy, Members, Join Buttons
Hide: Last Activity, Descriptions
Why: Visual, professional appearance

Hobby/Interest Community

Layout: Style 2 (Card)
Show: Cover Images, Last Activity, Members, Descriptions
Custom Covers: Themed backgrounds
Why: Engaging, visual, activity-focused

Corporate/Internal

Layout: Style 1
Show: Group Type, Organizers, Privacy, Descriptions
Hide: Join Buttons (controlled access)
Why: Professional, controlled, informative

Gaming Community

Layout: Style 2 (Card)
Show: Cover Images, Last Activity, Members
Hide: Descriptions (prefer short names)
Why: Visual, competitive, activity-driven

BuddyPress Customizer Settings - All customizer options
Member Directory - Member layouts and features
Activity Stream - Group activity feeds
Member Profiles - Group member profiles

Got a question? We're a friendly team - happy to help.

Member Directory

The member directory is where visitors discover and connect with your community members. BuddyX Pro provides three distinct layout styles and extensive customization options to showcase your members beautifully.

Where these settings live: Members Directory controls are in Customizer > Community Settings > Members Directory. The default view is Style 2 (Card).

Youzify note: The Community Settings panel (including every Members Directory control) is removed when the Youzify plugin is active - Youzify manages its own member directory. Run BuddyPress without Youzify to use these options.

Members Directory Card View The Members Directory with Style 2 (Card with Cover Images) layout showing member cards with avatars, cover images, names, join dates, last active times, and Add Friend buttons

What You Can Do

With BuddyX Pro's member directory features, you can:

Choose from 3 card layout styles
Show/hide member information elements
Display online status indicators
Show follower and following counts
Add custom default cover images
Display member type badges
Control information density
Optimize for mobile and desktop

Directory Layout Styles

BuddyX Pro offers three distinct member directory layouts.

Style 1: Classic List

Members Directory Style 1 Style 1 - Classic horizontal list layout with avatars on left and member info on right

Best For: Traditional social networks, forums

Features:

Horizontal list layout
Avatar on left
Member info on right
Clean, scannable design
Maximum information density

What Members See:

Large avatar (circular or square)
Member name as clickable link
Joined date
Last active timestamp
Action buttons (Add Friend, Send Message)

When to Use:

Communities with 100+ members
Forums and discussion sites
Information-heavy communities
Desktop-focused audiences

Style 2: Card with Cover Images (Default)

Members Directory Style 2 Style 2 - Card layout with cover images and overlapping avatars

Best For: Visual communities, portfolios

Features:

Card-based grid layout
Cover images at top
Avatar overlays cover
Modern, visual design
Instagram-like appearance

What Members See:

Cover image background
Profile avatar (overlapping cover)
Member name
Meta information
Online status indicator

When to Use:

Creative communities
Photo-focused networks
Portfolio sites
Communities with <200 members
Visual, modern brands

Requirements:

Cover images look best when most members have them
Custom default cover recommended

Style 3: Card with Action Buttons

Members Directory Style 3 Style 3 - Card layout with prominent action buttons for quick interactions

Best For: Professional networks, directories

Features:

Compact card layout
No cover images
Quick action buttons
Private message button
Clean, professional look

What Members See:

Profile avatar
Member name and info
"Private Message" button (if logged in)
Meta information
Profile type badge (optional)

When to Use:

Professional networking sites
Business directories
Dating/matchmaking communities
Action-oriented communities

Unique Features:

Prominent messaging button
Space-efficient cards
No cover image clutter

How to Change Layout Style

Go to Appearance > Customize
Navigate to Community Settings > Members Directory
Find Members Directory View
Select: Style 1, Style 2, or Style 3
Click Publish
Visit your members page to see the change

Page Refresh Required: Live preview is not available. Publish and refresh to see changes.

Cover Image Customization

Available for: Style 2 and Style 3 layouts

BuddyBoss note: The Customize Members Cover Background switch and Set Default Cover Image upload appear only on a BuddyPress (non-BuddyBoss) site. When BuddyBoss Platform is active, BuddyBoss manages directory cover images and the theme hides these two controls.

Add visual appeal with custom cover images.

Setting Default Cover Images

When members don't upload their own cover, show your custom default:

Customizer > Community Settings > Members Directory
Enable Customize Members Cover Background
Click Set Default Cover Image
Upload your image
Click Publish

Cover Image Best Practices

Recommended Dimensions: 1300px x 225px

Design Tips:

Use subtle gradients or patterns
Avoid bright colors that clash with avatars
Don't include text (accessibility)
Keep file size under 200KB
Test with various avatar positions
Use WebP format for best performance

Good Default Cover Ideas:

Branded gradient
Subtle geometric pattern
Community logo watermark
Themed background (tech, nature, abstract)
Solid color with texture overlay

What to Avoid:

Photos with faces (confusing)
Busy patterns (distracting)
Dark images (poor contrast)
Text or logos (accessibility issues)

Member Information Elements

Control exactly what information displays on member cards.

Available Elements

Element	What It Shows	Default	Performance Impact
Online Status	Green/gray dot indicator	On	Medium (cached)
Profile Type	Member type badge	Off	Low
Followers	Follower count	Off	Low
Last Active	"Active 2 hours ago"	On	Low (cached)
Joined Date	"Joined Jan 2024"	On	None

How to Configure Elements

Customizer > Community Settings > Members Directory
Scroll to Member Directories Elements
Check/uncheck desired elements
Click Publish
Refresh directory page

Note: Changes won't show in Customizer preview. Publish and refresh to see results.

Element Details

Online Status

What It Is:

Real-time activity indicator
Green dot = active in last 5 minutes
Gray dot = offline

Why Show It:

Encourages real-time connections
Shows community activity level
Helps members find active users

Why Hide It:

Privacy concerns
Reduces database queries on large sites
Professional communities prefer no tracking

Performance Note: Cached for 5 minutes per user to reduce database load.

Profile Type

What It Is:

Visual badge showing member category
Examples: "Teacher", "Premium Member", "Admin"

Why Show It:

Multi-tiered communities
Different member roles
Paid vs free members

Why Hide It:

All members same type
Minimalist design preference
Reduces visual clutter

Requirements: You must set up BuddyPress Member Types first.

Followers Count

Requirements: BP Follow plugin or BuddyBoss Platform

What It Shows:

"25 Followers" text
Not clickable in directory

Why Show It:

Social networking communities
Gamification
Showcase popular members

Why Hide It:

Not using follow feature
Reduces "popularity contest" feeling
Simpler, cleaner design

Last Active

What It Shows:

"Active 3 hours ago"
"Active this week"
Relative timestamps

Why Show It:

Shows community engagement
Helps find active members
Encourages participation

Why Hide It:

Privacy-focused communities
Pressure on inactive members
Professional networks

Joined Date

What It Shows:

"Joined Jan 2024"
Month and year only

Why Show It:

Celebrates long-time members
Shows community growth
"Veteran" vs "new" member distinction

Why Hide It:

All members joined recently
Avoid highlighting age differences
Minimalist design

Online Status Indicators

Help members see who's currently active.

How It Works

Technology:

Checks last activity timestamp
Active = activity in last 5 minutes
Updates every 5 minutes
Results cached for performance

Visual Display:

Green dot - Online now
Gray dot - Offline
Appears next to avatar

Where It Appears

When enabled, online status shows in:

Member directory cards
Single member profiles
Activity stream
Group member lists

Privacy Considerations

Show Online Status When:

You have a real-time community
Members expect social networking features
You want to encourage live conversations
Gaming or chat-based community

Hide Online Status When:

Privacy is important
Mental health or support groups
Members need anonymity
Professional formal environments

How to Disable:

Customizer > Community Settings > Members Directory
Uncheck Online Status
Customizer > Community Settings > Single Member
Uncheck Online Status there too
Publish

Search and Filter Features

BuddyPress provides built-in member search and filtering.

Available Filters

Members can filter directory by:

Newest Members - Recently registered
Active Members - Recently active
Popular Members - Most connections
Alphabetical - A-Z by name

Search:

Search by name
Search by username
Real-time filtering

How Members Use Filters

Visit members directory
Click filter dropdown
Select filter option
Results update automatically

No Configuration Needed: Filters work automatically with all layout styles.

Pagination and Performance

Default Settings

24 members per page (BuddyPress default)
AJAX pagination (no page reload)
Infinite scroll option (with plugins)

Performance Tips

For Large Communities (1000+ members):

Keep online status enabled (it's cached)
Disable unnecessary elements
Use Style 1 layout
Consider reducing members per page
Use caching plugin

For Small Communities (<200 members):

Style 2 (Card) looks great
Show all elements
Encourage cover image uploads

For Medium Communities (200-1000 members):

Style 3 (Card1) good balance
Selective element display
Monitor page load times

Optimizing Cover Images

If using Style 2:

Encourage members to upload covers
Use image optimization plugin
Serve images via CDN
Use WebP format
Lazy load images (with plugin)

Action Buttons

What members can do from the directory.

Style 1 and Style 2 Buttons

Add Friend (if friend component active)

Adds connection request
Changes to "Pending" or "Accept"

Send Message (if messages active)

Opens private message composer
Requires login

Style 3 Unique Button

Private Message

Prominent button on each card
Direct message access
Visible only when logged in
Hidden on own card

Requirements

For Add Friend:

BuddyPress Friend Connections component active

For Send Message:

BuddyPress Private Messaging component active
User must be logged in

Disabling Buttons: Deactivate components in Settings > BuddyPress > Components

Mobile Responsiveness

All layouts are fully responsive.

Style 1

Stacks to single column
Avatar size adjusts
Maintains information hierarchy

Style 2 (Card)

3 columns → 2 columns → 1 column
Cover images scale proportionally
Touch-friendly cards

Style 3 (Card1)

3 columns → 2 columns → 1 column
Buttons remain accessible
Compact, thumb-friendly

No Configuration Needed: Responsive behavior is automatic.

Common Questions

Q: Can I have different layouts for different member types? A: No. The layout style applies to all members in the directory. Use custom CSS if you need type-specific styling.

Q: How do I increase members shown per page? A: This is controlled by BuddyPress settings, not the theme. Requires custom code or plugin.

Q: Why don't cover images appear in Style 1? A: Style 1 doesn't support cover images. Use Style 2 (Card) or Style 3 (Card1) for covers.

Q: Can members choose to hide their last active time? A: Not by default. BuddyPress shows this for all members. Custom development required for individual privacy.

Q: Will disabling elements improve performance? A: Marginally. Online status has the most impact. Other elements have minimal performance cost.

Q: How do I remove the member directory entirely? A: You would need to disable the Members component in BuddyPress settings (not recommended).

Q: Can I show member fields (like "Location") in directory? A: Not through theme settings. Requires custom template editing or plugin.

Q: Why do some members have green dots and others gray? A: Green = online (active in last 5 minutes), Gray = offline or not active recently.

Q: Can I change the 5-minute online threshold? A: Yes, but requires custom code modification in the theme's functions file.

Q: Do cover images slow down the page? A: They add page weight. Use optimized images (WebP, under 200KB) and caching for best performance.

Recommended Configurations by Community Type

Professional Network

Layout: Style 3 (Card1)
Show: Profile Type, Followers, Joined Date
Hide: Online Status, Last Active
Why: Professional, action-oriented, privacy-respecting

Layout: Style 2 (Card)
Show: Online Status, Last Active, Joined Date
Custom Cover: Branded gradient
Why: Visual, engaging, social

Forum Community

Layout: Style 1
Show: Last Active, Joined Date, Online Status
Hide: Profile Type, Followers
Why: Information-dense, traditional

Creative Portfolio Network

Layout: Style 2 (Card)
Show: Profile Type, Joined Date
Hide: Online Status, Last Active
Custom Cover: Artistic pattern
Why: Visual showcase, less tracking

Learning Community

Layout: Style 1
Show: Profile Type, Joined Date
Hide: Followers, Online Status
Why: Focus on learning, not social gaming

Dating/Matchmaking

Layout: Style 3 (Card1)
Show: Online Status, Last Active
Hide: Joined Date, Followers
Why: Quick messaging, see who's available now

BuddyPress Customizer Settings - All customizer options
Member Profiles - Individual profile pages
Activity Stream - Activity feed features
Groups - Group directory and layouts

Got a question? We're a friendly team - happy to help.

Member Profiles

Member profiles are the heart of your BuddyPress community. BuddyX Pro transforms standard BuddyPress profiles into beautiful, feature-rich pages that showcase your members' information, activity, and achievements.

Where these settings live: Single-member profile controls are in Customizer > Community Settings > Single Member. Default cover images are set under Customizer > Community Settings > Members Directory.

Youzify note: The Community Settings panel (including every profile control below) is removed when the Youzify plugin is active - Youzify manages its own profile screens. Run BuddyPress without Youzify to use these options.

What Makes BuddyX Pro Profiles Special

BuddyX Pro enhances BuddyPress member profiles with:

6 Header Layout Styles - From classic to modern designs
3 Navigation Styles - Optimized for desktop and mobile
Cover Images - Visual profile headers with drag-drop upload
Online Status Indicators - Real-time online/offline display
Social Links Integration - Connect member social media profiles
Follower Counts - Display followers and following (with BP Follow)
Member Type Badges - Visual indicators for member roles
Achievement Badges - BadgeOS integration support
Profile Visitor Counter - Track profile views (with plugin)

Profile Header Layouts

Choose the layout that matches your community's style.

Member Profile Header Default Member profile header with avatar, cover image, member info, and action buttons

Layout 1: Left View (Default)

Best For: Traditional social networks, general communities

Layout:

Avatar positioned on the left
Member info and stats on the right
Full-width background
Horizontal navigation below header

When to Use:

Facebook-style communities
General purpose social networks
Communities prioritizing information density

Layout 2: Centered View

Member Header Centered Centered layout with avatar and info aligned in the center

Best For: Modern, visual communities

Layout:

Avatar centered at top
Member info centered below avatar
Symmetrical design
Navigation tabs centered

When to Use:

Portfolio communities
Creative professional networks
Image-focused communities

Layout 3: Container Left View

Member Header Container Left Container left layout - contained within site width with left alignment

Best For: Boxed website layouts

Layout:

Left-aligned like Layout 1
Contained within site's content width
Better integration with boxed themes

When to Use:

Sites with boxed/contained layouts
Corporate community sites
Learning management communities

Layout 4: Container Centered View

Member Header Container Centered Container centered layout - contained width with centered alignment

Best For: Professional networks with contained layouts

Layout:

Centered like Layout 2
Contained within content width
Professional, organized appearance

When to Use:

Business directories
Professional associations
B2B communities

Layout 5: Stretch Left View

Member Header Stretch Left Stretch left layout - full browser width with left alignment

Best For: Magazine-style sites

Layout:

Left-aligned layout
Extends full browser width
Maximum visual impact

When to Use:

Media-rich communities
Magazine-style sites
Communities with large cover images

Layout 6: Stretch Centered View

Member Header Stretch Centered Stretch centered layout - full browser width with centered alignment

Best For: Portfolio and creative communities

Layout:

Centered layout
Full browser width
Maximum impact for cover images

When to Use:

Artist communities
Photography networks
Design portfolios

Go to Appearance > Customize
Navigate to Community Settings > Single Member
Find Single Member Header Layout
Select your preferred layout
Click Publish
Visit a member profile to see the change

Recommended Layout

Left View is recommended for most communities because:

Familiar layout - Users expect avatar on left, info on right (like Facebook, LinkedIn)
Easy scanning - Eye naturally flows left to right
Action buttons accessible - Prominent placement for Add Friend, Send Message
Works at all screen sizes - Responsive without awkward reflows
Professional appearance - Clean, traditional social network feel

Use centered or stretch layouts only if your design specifically calls for it (portfolios, creative communities, magazine-style sites).

Control how navigation tabs appear on member profiles.

More (Dropdown)

How It Works:

Primary tabs visible
Extra tabs in "More" dropdown
Saves vertical space

Best For:

Desktop-focused communities
Sites with many profile sections
Traditional forum-style layouts

Swipe (Horizontal Scroll)

How It Works:

All tabs in horizontal row
Swipe/scroll to see more tabs
Touch-friendly

Best For:

Mobile-first communities
Modern, app-like experiences
Communities with 4-8 profile sections

Default (Text Only)

Tab labels without icons
Clean, minimal look
Fastest loading

Icon + Label

Icons with text labels
Easy visual recognition
Modern appearance

Icon + Label (Swipe 1)

Compact icons for swipe navigation
Optimized for horizontal scrolling
Space-efficient

Icon + Label (Swipe 2)

Larger icons for swipe navigation
Better visibility on mobile
Touch-friendly targets

Customizer > Community Settings > Single Member
Single Member Navigation View: Choose More or Swipe
Single Member Navigation Style: Choose icon style
Click Publish

Cover Images

Cover images add visual appeal to member profiles.

Cover Image Features

Drag-and-drop upload - Easy image updates
Default images - Set fallback for members without covers
Responsive design - Looks great on all devices
Activity feed updates - Shows when cover changes (optional)

Setting Up Default Cover Images

Customizer > Community Settings > Members Directory
Enable Customize Members Cover Background
Click Set Default Cover Image
Upload your image
Click Publish

BuddyBoss note: The Customize Members Cover Background switch and Set Default Cover Image upload appear only on a BuddyPress (non-BuddyBoss) site. When BuddyBoss Platform is active, BuddyBoss manages cover images and the theme hides these controls.

Recommended Dimensions: 1300px x 225px

Image Tips:

Use WebP format for smaller file size
Keep file size under 200KB
Use subtle patterns or gradients
Avoid text in images (accessibility)
Test on mobile devices

Member Upload Process

Members can upload their own cover images:

Visit own profile
Click Change Cover Image button (on cover area)
Drag and drop image or click to browse
Crop if needed
Click Upload

Member Upload Requirements:

BuddyPress must allow cover image uploads
Member must be logged in
Viewing own profile

Profile Information Display

Control what information appears in profile headers.

Available Elements

Element	What It Shows	When to Show	When to Hide
Online Status	Green/gray indicator	Real-time communities	Privacy-focused sites
Profile Type	Member type badge	Multiple member types	Single member type
Member Handle	@username	Twitter-like communities	Formal professional networks
Joined Date	Registration date	Growth-focused communities	Privacy-focused sites
Last Active	Recent activity timestamp	Active engagement sites	Privacy concerns
Followers	Follower count	Social networks	Private communities
Following	Following count	Social networks	Simple communities

How to Configure Elements

Customizer > Community Settings > Single Member
Scroll to Profile Headers Elements
Check/uncheck desired elements
Click Publish
Refresh a profile page to see changes

Note: Changes require page refresh; live preview is not available.

Online Status Indicators

Show members who's currently active in your community.

How It Works

Green dot - Member active in last 5 minutes
Gray dot - Member offline or inactive
Updates automatically - Checks every 5 minutes
Cached for performance - Reduces database load

Where It Appears

Profile header
Member directory cards
Activity stream avatars
Group member lists

Privacy Considerations

Some communities prefer to hide online status:

Hide For:

Mental health communities
Private support groups
Professional networks where privacy matters
High-profile member communities

Show For:

Social networks
Gaming communities
Real-time collaboration sites
Dating/matchmaking communities

How to Disable:

Customizer > Community Settings > Single Member
Uncheck Online Status
Customizer > Community Settings > Members Directory
Uncheck Online Status in directory settings
Publish

Let members showcase their social media profiles.

How to Enable

Customizer > Community Settings > Single Member
Enable Show User Social Links
Configure User Social Links section
Add desired social networks
Publish

Facebook
Twitter
LinkedIn
Instagram

Click Add button in User Social Links
Title: Network name (e.g., "TikTok")
Icon: FontAwesome code: <i class="fa-brands fa-tiktok"></i>
Icon Color: Choose brand color
Click Publish

Finding FontAwesome Icons:

Visit fontawesome.com/search
Search for social network
Click icon
Copy HTML code
Paste into Icon field

Member Setup Process

Once enabled, members add links in their profile:

Go to profile Edit page
Scroll to Social Links section
Enter social media URLs
Click Save Changes

Links appear:

In profile header
As clickable icons
With hover tooltips
In customizable colors

Display Name Format

BuddyPress Only (not BuddyBoss)

Choose how member names appear throughout the site.

Username Format

Shows: WordPress username (e.g., johndoe123)

Best For:

Twitter-like communities
Gaming communities
Anonymous communities

Display Name Format

Shows: User's display name (e.g., John Doe)

Best For:

Professional networks
Real-name communities
Formal organizations

How to Change:

Customizer > Community Settings > Single Member
Display Name Format: Choose Username or Display Name
Publish

Follower and Following Counts

Requires: BP Follow plugin or BuddyBoss Platform

Display social connections on member profiles.

What's Included

Follower count - Number following this member
Following count - Number this member follows
Clickable links - View full follower/following lists
Directory display - Optional in member cards

Where It Appears

Profile header meta section
Member directory cards (optional)
Activity stream

How to Enable

Already enabled by default if you have:

BP Follow plugin installed, OR
BuddyBoss Platform active

To hide from directory:

Customizer > Community Settings > Members Directory
Uncheck Followers in Member Directories Elements
Publish

Member Type Badges

Display visual badges for different member types.

What Are Member Types?

Member types let you categorize members:

Students vs Teachers
Free vs Premium members
Customers vs Staff
Regular vs VIP members

Setting Up Member Types

Requires: BuddyPress Member Types feature or custom code

Define member types in BuddyPress
Assign types to members
BuddyX Pro displays type badges automatically

Badge Display Options

Show in:

Profile header
Member directory cards
Activity stream

To hide:

Customizer > Community Settings > Single Member
Uncheck Profile Type
Publish

Visitor Counter

Requires: "Who Viewed My Profile" plugin

Track and display profile view counts.

What It Shows

Total unique visitors
"Visitor" or "Visitors" label
Appears below profile header

How to Enable

Install "Who Viewed My Profile" plugin
Activate plugin
Counter appears automatically on profiles
Members see who viewed their profile

Location: Displays in profile meta section, below member information.

Profile Achievements (BadgeOS)

Requires: BadgeOS plugin

Showcase member achievements and badges.

What's Displayed

Recently earned badges
Badge images
Up to 10 badges
Links to individual badge pages

How It Works

Install and configure BadgeOS
Create achievement types and badges
Members earn badges through activity
Badges automatically display on profiles

Location: Appears in dedicated section on profile page.

Common Questions

Q: Can members choose their own profile layout? A: No. Profile layouts are set site-wide by administrators. All members have the same layout.

Q: How do I disable cover images completely? A: Go to BuddyPress > Settings > Cover Images and disable cover image uploads.

Q: Will social links work if member leaves field empty? A: Yes. Only filled social links display. Empty fields are hidden automatically.

Q: Can I add more than 4 social networks? A: Yes. Click "Add" as many times as needed. There's no limit.

Q: Do profile visitors see my online status? A: Yes, if online status is enabled. It updates every 5 minutes.

Q: How accurate is the online status indicator? A: Very accurate. It shows members active in the last 5 minutes. Cached for performance.

Q: Can I use different header layouts for different member types? A: Not through Customizer settings. You would need custom CSS or theme customization.

Q: What if a member doesn't upload a cover image? A: They see the default cover image you set in Customizer, or BuddyPress default if none set.

Q: How do I remove the @username handle from profiles? A: Customizer > Community Settings > Single Member > Uncheck "Member Handle" > Publish.

Q: Can visitors see follower counts? A: Yes. Follower/following counts are public information visible to all visitors.

Recommended Configurations by Community Type

Professional Network

Layout: Container Centered View
Navigation: More (dropdown), Icon + Label
Show: Profile Type, Member Handle, Followers, Following
Hide: Last Active, Online Status (privacy)
Social Links: Enabled with LinkedIn, Twitter

Layout: Left View
Navigation: Swipe, Icon + Label
Show: Online Status, Last Active, Followers
Social Links: Enabled with Facebook, Instagram, Twitter

Learning Community

Layout: Container Left View
Navigation: More (dropdown), Default style
Show: Profile Type, Joined Date, Last Active
Hide: Online Status
Social Links: Optional

Private Support Group

Layout: Centered View
Navigation: Swipe, Default style
Show: Profile Type, Joined Date
Hide: Online Status, Last Active, Follower counts
Social Links: Disabled

BuddyPress Customizer Settings - All customizer options
Member Directory - Directory layouts and filters
Activity Stream - Activity feed on profiles
Groups - Member's group involvement

Got a question? We're a friendly team - happy to help.

Avatar Styles

BuddyX Pro adds one simple control that changes the shape of every member and group avatar across your community. You choose between round (circular) avatars and square avatars, and the theme applies your choice everywhere BuddyPress shows a profile photo - directories, profile headers, group headers, and the activity stream. This page explains the control, its options and default, and exactly where the change appears.

What the Avatar Style Control Does

BuddyX Pro ships a single Avatar Style switch. When it is set to Yes, the theme adds a round-avatars class to the page and renders member and group avatars as perfect circles. When it is set to No, avatars keep BuddyPress's default square (lightly rounded) shape.

There is one control for the whole site. You do not set member avatars and group avatars separately - both follow the same choice, so your community stays visually consistent.

The Options

Option	Value	What Members See
Yes	Round	Circular avatars (`border-radius: 50%`) - the modern social-network look
No	Square	Square avatars with the theme's standard corner radius

Default: Yes (round avatars). A fresh BuddyX Pro install shows circular avatars out of the box.

Where to Find the Setting

Go to Appearance > Customize
Open the Community Settings panel
Click General Setting
Find the Avatar Style control near the top
Choose Yes for round avatars or No for square avatars
Click Publish

Note: The Community Settings panel and its Avatar Style control only appear when BuddyPress (or bbPress) is active. If you do not see it, activate BuddyPress first.

Youzify note: The entire Community Settings panel - including Avatar Style - is removed when the Youzify plugin is active, because Youzify manages its own avatar and profile styling. Deactivate Youzify to reach this control.

Where the Style Applies

Your choice is global. Once published, the avatar shape updates on every BuddyPress surface, including:

Member directory - avatars in all three directory layouts (list and card styles)
Group directory - group avatars in the groups listing
Single member profiles - the large avatar in the profile header, over the cover image
Single group pages - the group avatar in the group header
Activity stream - the author avatar next to each post and comment
Member and group lists - anywhere BuddyPress lists people or groups

If you run BuddyBoss Platform alongside the theme, the same round style also applies to platform card avatars, so the look stays consistent across both.

Choosing Round vs Square

Choose round (Yes) when:

You want the familiar, friendly social-network feel
Your community is casual, social, or creative
You want avatars to sit cleanly over cover images in the card directory layouts

Choose square (No) when:

You prefer a more formal, structured, directory-style look
Your brand or design system uses square imagery
You are matching an existing visual identity that avoids circles

There is no functional difference - this is purely a presentation choice, so pick whichever matches your community's personality.

Common Questions

Q: Can I use round avatars for members but square for groups? A: No. The Avatar Style switch is a single site-wide setting that applies to both member and group avatars. Custom CSS is required if you want different shapes per component.

Q: Do I need to refresh to see the change? A: The Customizer preview reflects the shape when you publish. Publish, then visit your members or groups directory to confirm the look on the live site.

Q: Does this change the avatars members upload? A: No. The original uploaded image is untouched. The theme only changes how the avatar is displayed (masked to a circle or shown square), so you can switch back and forth at any time with no loss.

Q: Where is this setting - I only see "Community Settings", not "BuddyPress"? A: In BuddyX Pro the BuddyPress options live under the Community Settings panel. The Avatar Style control is the first item inside General Setting.

BuddyPress Customizer Settings - All community customizer options in one place
Member Profiles - Single profile header, cover image, and avatar placement
Member Directory - Directory layout styles where avatars appear

Got a question? We're a friendly team - happy to help.

Email us at support@wbcomdesigns.com
Visit our Documentation Portal

BuddyBoss Platform

BuddyBoss Platform integration and exclusive features.

BuddyBoss-Specific Features

This guide covers the unique features available when using BuddyX Pro with BuddyBoss Platform, including detailed configuration instructions and best practices for each feature.

Media Galleries

BuddyBoss Platform provides built-in photo and video gallery features for members and groups.

Photo Albums

Create and organize photo collections:

Where Photos Appear:

Member profiles (personal photos)
Group pages (group photos)
Activity stream (shared photos)
Media directory page

Upload Photos:

Go to your profile or group
Click Media tab
Click Upload Photos
Select one or multiple images
Add captions (optional)
Choose album (or create new)
Click Save

Photo Settings:

Setting	Location	Options
Who Can Upload	BuddyBoss > Settings > Media	All Members, Registered Only
Max File Size	BuddyBoss > Settings > Media	Up to PHP limit
Photo Privacy	Per upload	Public, Friends, Only Me
Activity Post	Per upload	Create activity or not

Video Support

Share video content directly:

Supported Formats:

MP4 (recommended)
MOV
AVI
WMV

Video Uploads:

Navigate to profile or group
Go to Media tab
Click Upload Videos
Select video file(s)
Wait for upload to complete
Add title and description
Set privacy and album

Video Optimization Tips:

Keep videos under 50MB for faster uploads
Use MP4 format for best compatibility
Compress videos before uploading
Consider video length (under 5 minutes recommended)

Media Privacy Controls

Control who sees your media:

Privacy Level	Who Can View
Public	Everyone, including visitors
My Connections	Friends/followers only
Only Me	Only you (private)
Group Members	Group members (for group media)

Set Privacy:

Click the media item
Click Edit
Select Privacy dropdown
Choose privacy level
Click Save Changes

Media in Activity Stream

Photos and videos automatically appear in activity:

Activity Post Options:

Automatic post on upload (can be disabled)
Manual photo/video posts from activity composer
Comment with media attachments
Share existing media to activity

Disable Auto-Activity:

Upload photo/video
Uncheck "Post to activity feed"
Media saves without activity post

Activity Reactions

Members can react to posts with emoji reactions beyond simple likes.

Available Reactions

Reaction	Icon	When to Use
Like	👍	General approval or agreement
Love	❤️	Strong positive emotion
Haha	😂	Funny or amusing content
Wow	😮	Surprising or impressive
Sad	😢	Sympathetic or disappointing
Angry	😠	Disagreement (if enabled)

Using Reactions

React to Activity:

Hover over activity post
Click reaction icon (heart, laugh, etc.)
Your reaction appears immediately
Click again to remove reaction

View Who Reacted:

Click reaction count below post
See list of members who reacted
Filter by reaction type
Click member to view profile

Configuring Reactions

Enable/Disable Reactions:

Go to BuddyBoss > Settings > Activity
Scroll to Reactions section
Toggle Enable Activity Reactions
Choose which reactions to enable
Click Save Settings

Reaction Options:

Setting	Options	Recommendation
Enable Reactions	On/Off	On for engagement
Show Reaction Count	Yes/No	Yes for transparency
Allow Multiple Reactions	Yes/No	No (one per person)
Negative Reactions	Include/Exclude	Exclude for positivity

Profile Types

Categorize members into different types with unique features and fields.

What Are Profile Types?

Profile types let you:

Organize members into categories
Display different registration forms
Show different profile fields per type
Control content access by type
Add visual badges to profiles

Example Uses:

Student, Teacher, Administrator (school)
Buyer, Seller, Agent (marketplace)
Free, Premium, VIP (membership)
Patient, Doctor, Staff (healthcare)

Creating Profile Types

Add New Profile Type:

Go to BuddyBoss > Profile Types
Click Add New
Enter type name (e.g., "Premium Member")
Add description
Choose label color for badge
Set display settings:
- Show on registration
- Show in member directory
- Enable type filter
Click Save

Profile Type Settings:

Setting	Description	Example
Type Name	Display name	"Gold Member"
Slug	URL-friendly	"gold-member"
Label Color	Badge color	#FFD700 (gold)
Registration	Show on signup form	Yes
Directory Filter	Filter members by type	Yes
Custom Fields	Type-specific fields	Phone number required

Assigning Profile Types

Assign to Existing Users:

Go to Users in admin
Click user's name
Scroll to Profile Type section
Select type from dropdown
Click Update User

Auto-Assignment on Registration:

Go to BuddyBoss > Settings > Profiles
Set Default Profile Type for new members
Or create type-specific registration pages
New users get type automatically

Let Users Choose:

Enable profile type on registration form
Users select type when signing up
Dropdown appears on registration page
Admin can change later if needed

Profile Type Badges

Visual indicators appear on member profiles:

Badge Display Locations:

Member directory cards
Profile header
Activity stream author info
Group member lists
Search results

Customize Badge Appearance:

/* Add to Customizer > Additional CSS */

/* Style premium member badge */
.bp-member-type-badge.premium-member {
    background-color: #FFD700;
    color: #000;
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: bold;
}

/* Style teacher badge */
.bp-member-type-badge.teacher {
    background-color: #007bff;
    color: white;
}

Type-Specific Profile Fields

Show different fields based on profile type:

Set Field Visibility:

Go to Users > Profile Fields
Edit a field
Scroll to Profile Type Visibility
Check which types see this field
Save changes

Example Field Configurations:

Field	Student Type	Teacher Type	Admin Type
Grade Level	✓	✗	✗
Subject Taught	✗	✓	✗
Department	✗	✓	✓
Bio	✓	✓	✓

Private Messaging Enhancements

BuddyBoss Platform extends private messaging with advanced features.

Message Threads

Group conversations with multiple participants:

Start Group Message:

Go to Messages > Compose
Type first recipient name
Click + Add to add more recipients
Write message
Click Send
All recipients can reply to thread

Thread Features:

Up to 100 participants
All participants see all replies
Anyone can add new participants
Thread owner can remove participants
Conversation history preserved

File Attachments

Send files in messages:

Attach Files:

Compose or reply to message
Click Attach File icon
Select file from computer
Supported types:
- Documents (PDF, DOC, TXT)
- Images (JPG, PNG, GIF)
- Videos (MP4, MOV)
- Archives (ZIP)
Wait for upload
Click Send

Attachment Settings:

Setting	Location	Default
Max File Size	BuddyBoss > Settings > Messages	10MB
Allowed Types	BuddyBoss > Settings > Messages	All safe types
Multiple Files	Per message	Up to 5 files

Message Notifications

Enhanced notification options:

Email Notifications:

Go to Settings > Email Preferences
Configure message notifications:
- Instant email (immediate)
- Daily digest (once per day)
- Weekly digest (once per week)
- Off (no emails)
Save preferences

Push Notifications:

Install BuddyBoss App
Enable push notifications
Receive instant alerts:
- New message received
- New message in thread
- Message read receipt
Tap to open message

Message Management

Organize your messages:

Star Important Messages:

Click star icon on message
Starred messages appear in Starred folder
Quick access to important conversations
Unstar to remove from folder

Search Messages:

Go to Messages page
Use search box at top
Search by:
- Sender name
- Message content
- Subject line
Results filter in real-time

Message Actions:

Action	How to Do It
Delete Message	Click trash icon
Leave Thread	Click "Leave Conversation"
Mute Thread	Click bell icon
Block Sender	User Settings > Blocked Members

Forums Integration

BuddyBoss Platform includes built-in forums (replaces bbPress).

Forum Features

What's Included:

Discussion forums
Topic subscriptions
Forum replies
Topic tags
Forum search
Moderation tools

Forum vs. bbPress:

Native integration (no separate plugin)
Better mobile experience
Activity stream integration
Modern UI matching theme
Enhanced moderation

Setting Up Forums

Enable Forums:

Go to BuddyBoss > Components
Enable Forum Discussions
Click Save Settings

Create Forum Structure:

Go to BuddyBoss > Forums
Click New Forum
Enter forum details:
- Forum name
- Description
- Visibility (public/private)
- Order position
Click Publish

Group Forums

Each group can have its own forum:

Enable Group Forums:

Go to BuddyBoss > Settings > Groups
Check Enable group forums
Save settings

Create Group Forum:

Edit or create a group
Go to Settings tab
Check Enable discussion forum
Save group settings
Forum appears in group navigation

Group Forum Benefits:

Automatic membership (group members only)
Integrated with group activity
Private discussions per group
Group admin moderation
Topic notifications to members

Forum Moderation

Tools for managing discussions:

Moderator Capabilities:

Edit any topic or reply
Delete spam content
Close/open topics
Stick topics to top
Move topics between forums
Mark topics as resolved

Assign Moderators:

Go to forum settings
Add moderator usernames
Save changes
Moderators can manage that forum

Push Notifications

Send real-time notifications to mobile apps.

Notification Types

Configure what triggers notifications:

Trigger	Example
New Messages	"Sarah sent you a message"
Friend Requests	"John wants to be friends"
Activity Mentions	"Mike mentioned you in a post"
Group Invites	"You're invited to Marketing Team"
New Posts in Group	"New post in Your Book Club"
Comment Replies	"Lisa replied to your comment"

Setting Up Notifications

Configure Notification Service:

Go to BuddyBoss > Integrations
Click Push Notifications
Enable service
Connect your app credentials
Test notifications

User Notification Settings:

Users go to Settings > Notifications
Toggle notification types on/off
Choose for each category:
- Push notification
- Email notification
- Both
- Neither
Save preferences

Mobile App Connection

Connect your community to mobile apps:

Using BuddyBoss App:

Purchase BuddyBoss App license
Configure app in BuddyBoss platform
Submit apps to stores (iOS/Android)
Users download from App Store/Play Store
Push notifications work automatically

App Features:

Native mobile experience
Offline content caching
Push notifications
Camera integration for photos
Mobile-optimized layouts
Deep linking to content

Document Uploads

Share files and documents in groups and profiles.

Upload Documents:

Go to profile or group
Click Documents tab
Click Upload Document
Select file(s):
- PDF files
- Word documents
- Spreadsheets
- Presentations
- Text files
Add title
Click Upload

Document Organization:

Create folders
Move documents between folders
Tag documents
Set privacy per document
Activity posts on upload

Document Settings

Setting	Location	Options
Enable Documents	BuddyBoss > Settings	On/Off
Who Can Upload	BuddyBoss > Settings > Documents	All Members, Groups Only
Max File Size	BuddyBoss > Settings > Documents	Up to 50MB
Allowed Types	BuddyBoss > Settings > Documents	Select file types

Video Conferencing

Host live video meetings (requires BuddyBoss Pro).

Zoom Integration

Connect Zoom:

Go to BuddyBoss > Integrations > Zoom
Enter Zoom API credentials
Enable for groups
Save settings

Host Meeting:

Go to group page
Click Meetings tab
Click Create Meeting
Set date, time, duration
Click Schedule
Members join from group page

Meeting Features:

One-click join from group
Recording capabilities
Waiting rooms
Meeting passwords
Host controls

Member Subscriptions

Follow members and get updates.

Following System

Follow a Member:

Visit member's profile
Click Follow button
See their public activity in your feed
No approval needed (unlike friends)

Follower Benefits:

See followed members' public activity
Filter activity by followed members
Notification on new posts (optional)
Following count on profile

Following vs. Friends:

Feature	Friends	Following
Approval Required	Yes	No
Two-Way Connection	Yes	No
See Private Activity	Yes	Only public
Send Private Message	Yes	Yes

Activity Feed Filtering

Filter by Followed Members:

Go to Activity page
Click filter dropdown
Select "People I Follow"
See only followed members' activity

Connection Settings

Control who can connect with members.

Connection Types

Friend Connections:

Require acceptance
Two-way relationship
See friends-only content
Mutual connection badge

Following Connections:

No approval needed
One-way relationship
See public content only
Follower/following counts

Privacy Controls

Connection Settings:

Go to Settings > Privacy
Configure:
- Who can send friend requests
- Who can follow you
- Show connection lists
Save settings

Options:

Setting	Choices
Friend Requests	Everyone, No One
Following	Everyone, No One, Friends
Show Friends List	Public, Friends, Only Me
Show Followers	Public, Only Me

Common Questions

Can I disable media uploads?

Yes:

Go to BuddyBoss > Settings > Media
Uncheck Enable Media Upload
Save settings
Media tab disappears from profiles

How do I limit file upload sizes?

Check three places:

BuddyBoss Settings - Set maximum per file type
PHP settings - upload_max_filesize in php.ini
Web server - Nginx/Apache upload limits

The lowest limit applies.

Can profile types be changed later?

Yes:

Admins can change any user's type
Users can change their own type (if enabled)
Enable in BuddyBoss > Settings > Profiles
Past activity remains unchanged

Do reactions replace likes?

Reactions replace the simple "like" button with multiple reaction options. If you enable reactions, the like button becomes a reaction picker.

Can I use custom forum URLs?

Yes:

Go to Settings > Permalinks
Scroll to Forum Settings
Customize forum slug
Save changes
Old URLs redirect automatically

How many members can follow each other?

No built-in limit. However:

Following thousands may slow profile loading
Consider reasonable limits for UX
Monitor database performance
Use caching for large communities

Best Practices

Media Management

Optimize Performance:

Set reasonable file size limits
Compress images before upload
Use CDN for media delivery
Archive old unused media
Monitor storage usage monthly

Community Guidelines:

Post community media rules
Moderate inappropriate content
Set clear copyright policies
Encourage high-quality uploads
Feature great media on homepage

Profile Type Strategy

Planning Types:

Limit to 3-5 types maximum
Choose clear, distinct names
Plan field requirements early
Consider access control needs
Test registration process

Managing Types:

Review type usage quarterly
Merge underused types
Update field requirements
Communicate type changes
Maintain type documentation

Forum Moderation

Keep Discussions Healthy:

Set clear forum rules
Appoint active moderators
Respond to reports quickly
Archive old inactive topics
Feature quality discussions

Moderation Tools:

Use topic tags for organization
Close resolved topics
Merge duplicate discussions
Move off-topic posts
Ban repeat offenders

BuddyBoss Platform Overview - Getting started
BuddyPress Integration - Standard BuddyPress
Member Profiles - Profile customization
Groups Configuration - Groups setup
Activity Stream - Activity settings

Got a question? We're a friendly team - happy to help.

BuddyX Pro Support: support@wbcomdesigns.com
Documentation: https://docs.wbcomdesigns.com/docs/buddyx-theme/
BuddyBoss Support: https://www.buddyboss.com/support/

BuddyBoss Platform Integration

BuddyX Pro offers seamless integration with BuddyBoss Platform, providing enhanced social networking features beyond standard BuddyPress. This guide explains how BuddyBoss Platform works with the theme and the unique features it brings to your community site.

What is BuddyBoss Platform?

BuddyBoss Platform is a premium evolution of BuddyPress that adds enterprise-level features for building modern online communities, membership sites, and social learning platforms.

Key Differences: BuddyPress vs BuddyBoss Platform

Feature	BuddyPress	BuddyBoss Platform
Core Features	Basic social networking	Enhanced social + enterprise features
Media Support	Limited	Full photo/video galleries
Profile Types	Basic member types	Advanced profile types with visibility
Push Notifications	No	Yes (with BuddyBoss App)
Private Messaging	Basic	Enhanced with threads and attachments
Activity Reactions	No	Yes (like, love, laugh, etc.)
Forums	bbPress integration	Built-in forums
Mobile App	No	iOS and Android apps available
Premium Support	Community only	Direct priority support

Requirements

Requirement	Minimum	Recommended
BuddyBoss Platform	1.0.0	Latest
PHP	8.0	8.2+
WordPress	6.0	Latest
Memory Limit	256M	512M+

Note: BuddyBoss Platform replaces BuddyPress. You cannot use both plugins at the same time.

Installation & Setup

Step 1: Install BuddyBoss Platform

Purchase BuddyBoss Platform from BuddyBoss.com
Download the plugin ZIP file
Go to Plugins > Add New > Upload Plugin
Upload the ZIP file and click Install Now
Click Activate after installation

Step 2: Initial Configuration

Navigate to BuddyBoss > Components
Enable desired components:
- Member Profiles - User profiles with custom fields
- Account Settings - Member account management
- Friend Connections - Member friendships
- Private Messages - Direct messaging
- Activity Feeds - Social activity stream
- Notifications - Member notifications
- Social Groups - Community groups
- Forums - Discussion forums
- Media - Photo and video uploads
- Document Uploads - File sharing
- Profile Types - Member categorization
Click Save Settings

Step 3: Configure BuddyX Pro Settings

Go to Appearance > Customize
Navigate to the Community Settings panel (this single panel drives both BuddyPress and BuddyBoss Platform)
Configure display settings:
- Member directory layout (Members Directory section)
- Profile header style (Single Member section)
- Activity stream appearance (Activity Control section)
- Groups directory view (Groups Directory section)

BuddyBoss note: The default-cover-image controls (Customize Members/Groups Cover Background and their Set Default Cover Image uploads) are not shown when BuddyBoss Platform is active - BuddyBoss manages directory cover images itself. They appear only on a BuddyPress (non-BuddyBoss) site.

Youzify note: The entire Community Settings panel is removed when the Youzify plugin is active, since Youzify manages those screens itself.

Theme Compatibility

Automatic Detection

BuddyX Pro automatically detects BuddyBoss Platform and:

Loads BuddyBoss-specific templates from bb-buddypress/ folder
Applies BuddyBoss-compatible styling
Adjusts layouts for BuddyBoss features
Enables BuddyBoss-specific functionality

Template Structure

themes/buddyx-pro/
├── buddypress/           # Standard BuddyPress templates
└── bb-buddypress/        # BuddyBoss Platform templates
    ├── activity/
    │   ├── entry.php
    │   └── single/
    ├── members/
    │   ├── members-loop.php
    │   └── single/
    └── groups/
        ├── groups-loop.php
        └── single/

Both the buddypress/ and bb-buddypress/ template folders contain three subfolders only - activity/, members/, and groups/. The theme does not ship dedicated messages templates; private-messaging screens use the platform's own templates styled by the theme's general community CSS.

How Template Detection Works

The theme checks for BuddyBoss Platform using this logic:

if ( function_exists( 'buddypress' ) && isset( buddypress()->buddyboss ) ) {
    // Load BuddyBoss templates from bb-buddypress/
} else {
    // Load standard BuddyPress templates from buddypress/
}

What You Can Do With BuddyBoss Platform

Build Different Community Types

Learning Community

Create courses and lesson groups
Set up discussion forums per course
Use profile types for students, instructors
Enable document uploads for course materials
Track member progress with achievements

Professional Network

Create industry-specific profile types
Enable company/organization groups
Use private messaging for networking
Set up job board with groups
Share professional documents

Membership Site

Create tiered profile types (Free, Pro, Premium)
Restrict content by profile type
Enable subscription groups
Use private forums for members
Offer exclusive media galleries

Alumni Network

Create graduation year profile types
Set up class reunion groups
Enable photo galleries for events
Use private messaging for connections
Share news via activity feed

Support Community

Create customer profile types
Set up product-specific groups
Enable help forum discussions
Share documentation files
Track support tickets via activity

Enhanced Features for Communities

Media Galleries

Upload and organize photos and videos:

Feature	Description
Photo Albums	Create organized photo collections
Video Uploads	Share video content directly
Media Comments	Comment on photos and videos
Media Privacy	Control who sees your media
Media Activity	Automatic activity posts for uploads

Advanced Private Messaging

Enhanced messaging beyond basic BuddyPress:

Feature	Description
Message Threads	Group conversations with multiple people
File Attachments	Send documents, images, videos
Message Search	Find messages by keyword
Message Types	Notices, important flags
Read Receipts	See when messages are read

Activity Reactions

Members can react to activity posts:

Reaction	When to Use
Like	General approval
Love	Strong positive emotion
Laugh	Funny content
Surprised	Unexpected news
Sad	Sympathetic response
Angry	Disagreement (optional)

Profile Types

Categorize members with different types:

Example Profile Types:

Students, Teachers, Administrators (Learning)
Founders, Investors, Developers (Startup)
Buyers, Sellers, Agents (Real Estate)
Patients, Doctors, Nurses (Healthcare)
Members, Moderators, Admins (General)

Profile Type Benefits:

Different registration forms per type
Custom profile fields per type
Content access control by type
Activity filtering by type
Visual badges in member lists

Enhanced groups beyond BuddyPress:

Feature	Description
Group Types	Categorize groups (Study, Work, Social)
Group Media	Shared photo/video galleries
Group Documents	File sharing within groups
Sub-Groups	Create nested group hierarchies
Group Forums	Integrated discussion boards
Group Messages	Send messages to all members

BuddyBoss App Integration

Mobile App Features

BuddyBoss Platform connects to native iOS and Android apps:

Feature	Description
Push Notifications	Real-time alerts on mobile
Offline Access	Cache content for offline viewing
Native Experience	Feels like a native app
App Store Publishing	Your own branded apps
Deep Linking	Link directly to content

Setting Up Push Notifications

Go to BuddyBoss > Integrations > Push Notifications
Enable push notification service
Configure notification types:
- New messages
- Friend requests
- Group invitations
- Activity mentions
- New posts in followed content
Test notifications with BuddyBoss Preview app

Recommended Configurations by Community Type

Educational Platform

Enable These Components:

Member Profiles (Student/Teacher types)
Social Groups (Course groups)
Forums (Q&A discussions)
Media (Lesson videos)
Document Uploads (Course materials)

Recommended Settings:

Profile Type: Student, Instructor, Admin
Default Activity: Members + Groups
Media Upload: Members and Groups
Forums: Per-group forums enabled

Business Network

Enable These Components:

Member Profiles (Professional types)
Friend Connections
Private Messages (with threads)
Social Groups (Industry/Company)
Document Uploads

Recommended Settings:

Profile Type: Freelancer, Agency, Client
Registration: Email verification required
Privacy: Members-only content
Groups: Public and private options

Membership Community

Enable These Components:

Member Profiles (Tier-based types)
Private Messages
Social Groups (Premium content)
Media Galleries
Forums

Recommended Settings:

Profile Type: Free, Premium, VIP
Content Restriction: By profile type
Activity Privacy: Members only
Group Creation: Restricted by type

Support Community

Enable These Components:

Member Profiles (Customer types)
Social Groups (Product groups)
Forums (Support categories)
Document Uploads
Activity Feeds

Recommended Settings:

Profile Type: Free User, Pro User, Enterprise
Forums: Priority support sections
Activity: Public for announcements
Groups: Product-specific groups

Performance Considerations

Server Requirements

BuddyBoss Platform requires more resources than BuddyPress:

Resource	Minimum	Recommended
RAM	2GB	4GB+
CPU	2 cores	4+ cores
PHP Memory	256M	512M
Upload Size	64M	128M+

Optimization Tips

Use Object Caching
- Install Redis or Memcached
- Configure persistent object cache
- Reduces database queries significantly
Enable Page Caching
- Cache non-member pages only
- Exclude activity feeds from cache
- Use WP Rocket or similar plugin
Optimize Media Uploads
- Set maximum upload file size
- Enable image compression
- Use CDN for media files
- Consider offsite storage (S3)
Database Maintenance
- Run regular cleanups
- Archive old activity
- Optimize tables monthly
- Monitor database size

Common Questions

Can I switch from BuddyPress to BuddyBoss?

Yes, but carefully:

Backup your entire site first
Deactivate BuddyPress
Install and activate BuddyBoss Platform
Check all pages and features
Test member profiles and groups
Verify no data loss occurred

Note: All BuddyPress data transfers automatically.

Does BuddyX Pro work without BuddyBoss theme?

Yes! BuddyX Pro is a standalone theme. You do not need the BuddyBoss theme. BuddyX Pro provides all the design and layout features while BuddyBoss Platform provides the functionality.

Can I use BuddyBoss Platform free features?

BuddyBoss Platform is a premium plugin requiring a license. However, the core social networking features are included in the base license. Advanced features like mobile apps require higher-tier licenses.

Will my customizations work with BuddyBoss?

Template customizations may need adjustment:

Copy templates to bb-buddypress/ instead of buddypress/
Test all custom CSS for compatibility
Check custom JavaScript for BuddyBoss-specific elements
Review plugin integrations

How do I get BuddyBoss support?

BuddyBoss Platform: Contact BuddyBoss support
Theme compatibility: Contact Wbcom Designs support
Template issues: Check which templates are loading
General WordPress: WordPress.org forums

Can I use BuddyPress plugins with BuddyBoss?

Most BuddyPress plugins work with BuddyBoss Platform because it maintains BuddyPress compatibility. However:

Test plugins in staging first
Some UI plugins may conflict
Check plugin documentation for BuddyBoss support
Report compatibility issues to plugin authors

Troubleshooting

Templates Not Loading Correctly

Problem: Pages look broken or unstyled.

Solutions:

Verify BuddyBoss Platform is active
Check theme version (4.5.0+ required)
Clear all caching (plugin + browser)
Re-save permalinks
Disable conflicting plugins

Media Uploads Failing

Problem: Cannot upload photos or videos.

Solutions:

Check PHP upload_max_filesize setting
Verify folder permissions (wp-content/uploads)
Check Media component is enabled
Test with smaller file size
Review server error logs

Profile Types Not Showing

Problem: Profile type badges not visible.

Solutions:

Enable Profile Types component
Create at least one profile type
Assign users to profile types
Check visibility settings
Clear theme cache

Activity Reactions Not Working

Problem: Cannot react to posts.

Solutions:

Verify Activity component is enabled
Check Reactions settings in BuddyBoss
Clear JavaScript cache
Test in different browser
Check for JavaScript errors in console

BuddyBoss-Specific Features - Detailed feature guide
BuddyPress Integration - Standard BuddyPress docs
Member Profiles - Profile customization
Groups Configuration - Groups setup
Activity Stream - Activity settings

Got a question? We're a friendly team - happy to help.

BuddyX Pro Support: support@wbcomdesigns.com
Documentation: https://docs.wbcomdesigns.com/docs/buddyx-theme/
BuddyBoss Support: https://www.buddyboss.com/support/

bbPress

Forum setup, topic views, and bbPress styling.

bbPress Forums Setup

BuddyX Pro provides seamless bbPress integration, transforming your WordPress site into a discussion forum platform with styled forum layouts, user roles, and community engagement features.

What is bbPress?

bbPress is a lightweight forum plugin for WordPress. Combined with BuddyX Pro, you get:

Discussion forums organized by topics
Forum categories and hierarchies
User roles (Moderator, Participant, etc.)
Topic subscriptions and favorites
Reply threading
Forum search
SEO-friendly URLs
BuddyPress integration (when available)

Requirements

Requirement	Minimum	Recommended
bbPress	2.6	Latest
PHP	8.0	8.2+
WordPress	6.0	Latest

Installation & Setup

Step 1: Install bbPress

Go to Plugins > Add New
Search for "bbPress"
Click Install Now then Activate

Step 2: Create Your First Forum

Navigate to Forums > New Forum
Enter forum title (e.g., "General Discussion")
Add forum description
Set forum type:
- Category - Parent container for forums
- Forum - Standard discussion board
Click Publish

Step 3: Create Forum Structure

Example Forum Hierarchy:

Community Forums (Category)
├── General Discussion (Forum)
├── Support & Help (Forum)
└── Feedback (Forum)

Product Forums (Category)
├── Feature Requests (Forum)
├── Bug Reports (Forum)
└── Showcase (Forum)

Step 4: Configure bbPress Settings

Go to Settings > Forums
Configure main settings
Save changes

What You Can Do

Forums & Topics

Feature	Description
Create Forums	Organize discussions by topic or category
Nest Forums	Create parent/child forum relationships
Forum Icons	Add featured images to forum listings
Forum Descriptions	Display helpful info about each forum
Forum Order	Drag to reorder forums

User Engagement

Feature	Description
Reply to Topics	Participate in discussions
Subscribe	Get email notifications for topic updates
Favorites	Bookmark topics for quick access
User Profiles	View member forum activity
Search Forums	Find topics and replies

Moderation

Feature	Description
User Roles	Assign Keymaster, Moderator, Participant roles
Edit/Delete	Moderate topics and replies
Spam Protection	Mark content as spam
Close Topics	Lock topics from new replies
Stick Topics	Pin important topics to top
Merge Topics	Combine duplicate discussions

BuddyX Pro Theme Features

Forum Layouts

BuddyX Pro styles bbPress with modern, responsive layouts:

Layout Element	Description
Forum Directory	Clean listing of all forums
Topic Lists	Grid or list view of topics
Reply Threading	Visual indication of reply depth
User Avatars	Member avatars in forum posts
Last Activity	Show recent activity timestamps
Forum Meta	Topic/reply counts, freshness

Forums Archive Layout

The Forums Archive Layout control sets how the forums archive page lists your forums. It appears only when bbPress is active.

Options: Default, Card, Cover
Default: Default

Go to Appearance > Customize
Navigate to Community Settings > Forums Archive Layout
Pick Default for the standard list, Card for a boxed card grid, or Cover for a cover-image-led layout

Styled Components

Component	BuddyX Pro Enhancement
Forum Cards	Modern card-style forum display
Topic Rows	Alternating row colors, hover effects
Reply Forms	Styled rich text editor
Search Bar	Custom search interface
Breadcrumbs	Forum navigation path
User Badges	Role indicators (Moderator, Admin)

BuddyPress Integration

When both BuddyPress and bbPress are active:

Feature	Description
Unified Profiles	Forum activity appears in member profiles
Activity Stream	New topics appear in site activity
User Groups	Link forums to BuddyPress groups
Group Forums	Each group can have its own forum
Notifications	Mentions and replies trigger BP notifications

Customizer Settings

Navigate to Appearance > Customize > Sidebar to configure forum layouts.

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

Location: Customize > Sidebar > Sidebar Layout

Note: "Default" option inherits from Global Sidebar Setting.

Widget Area	Description
bbPress Left Sidebar	Appears on forum pages with left sidebar layout
bbPress Right Sidebar	Appears on forum pages with right sidebar layout

Forum Sidebar:

Forum Search Widget
Recent Forum Topics
Popular Topics
Active Users
Topic Tags

bbPress Settings

Configure bbPress at Settings > Forums.

Main Settings

Setting	Description	Default
Forum Prefix	URL slug for forums	forums
Topic Prefix	URL slug for topics	topic
Topic Tags	Enable topic tagging	Yes
Favorites	Enable favorite topics	Yes
Subscriptions	Enable email subscriptions	Yes

Per-Page Settings

Setting	Description	Default
Topics Per Page	How many topics to show	15
Replies Per Page	How many replies to show	15

Reply Threading

Setting	Options	Default
Enable Threading	Yes/No	Yes
Thread Depth	Maximum nesting level	5
Replies Per Page	Page split for long topics	15

Slugs & Permalinks

Setting	Description	Default
Archive Slug	Main forums URL	forums
Forum Slug	Single forum URL	forum
Topic Slug	Single topic URL	topic
Topic Tag Slug	Tag archive URL	topic-tag

After changing slugs: Go to Settings > Permalinks and click Save to flush rewrite rules.

Recommended Configurations by Use Case

Community Discussion Site

Best For: General community, Q&A, user engagement

Settings:

Sidebar: Right sidebar on all pages
Topics per page: 20
Reply threading: Enabled (depth: 3)
Enable subscriptions: Yes
Enable favorites: Yes
Topic tags: Yes

Forum Structure:

General (Category)
├── Introductions
├── General Discussion
└── Off-Topic

Support (Category)
├── How-To Questions
└── Troubleshooting

Product Support Forum

Best For: SaaS, software, product support

Settings:

Sidebar: Right sidebar with search + docs
Topics per page: 25
Reply threading: Enabled (depth: 2)
Enable subscriptions: Yes
Topic tags: Yes (for feature tracking)

Forum Structure:

Product Help (Category)
├── Getting Started
├── Technical Support
└── Feature Requests

Documentation (Category)
├── Guides & Tutorials
└── FAQ

Learning Community

Best For: Courses, education, student discussions

Settings:

Sidebar: Right sidebar with course navigation
Topics per page: 15
Reply threading: Enabled (depth: 4)
Enable group forums: Yes (with BuddyPress)

Forum Structure:

Courses (Category)
├── Course 1 Forum
├── Course 2 Forum
└── General Student Lounge

Resources (Category)
├── Study Groups
└── Q&A

Knowledge Base / FAQ Forum

Best For: Documentation, self-service support

Settings:

Sidebar: No sidebar (full width)
Topics per page: 30
Reply threading: Disabled or shallow (depth: 1)
Enable search: Yes (prominent position)
Topic tags: Yes (for categorization)

Forum Structure:

Getting Started (Category)
├── Installation
├── Configuration
└── First Steps

Advanced Topics (Category)
├── Customization
└── Troubleshooting

Common Questions

Can I add images to forum posts?

Yes. BuddyX Pro supports:

Gravatars for user avatars (automatic)
Featured images on forums (set when creating/editing forum)
Media uploads in replies (requires bbPress Media plugin or similar)

How do I make a forum private?

Edit the forum
Find Forum Visibility setting
Select:
- Public - Everyone can view
- Private - Only members can view
- Hidden - Only keymasters/moderators can view
Update forum

Can forums integrate with BuddyPress groups?

Yes! When both plugins are active:

Go to Settings > Forums
Enable Group Forums option
Each BuddyPress group can have its own forum
Forum activity appears in group activity stream

How do I change user roles?

Go to Users in WordPress admin
Find the user
Hover and click Edit
Find Forum Role dropdown
Select role:
- Keymaster - Full admin (super moderator)
- Moderator - Can moderate all forums
- Participant - Can post topics and replies
- Spectator - Can only read
- Blocked - Cannot access forums
Click Update User

Why aren't topics showing in BuddyPress activity?

Requirements:

Both bbPress and BuddyPress must be active
Activity component must be enabled in BuddyPress
Forum must be public (not private/hidden)
User must have permission to view the forum

To verify:

Go to Settings > BuddyPress > Components
Ensure Activity Streams is checked
Save settings

How do I add forum icons/images?

Edit the forum
Find Featured Image metabox (right sidebar)
Click Set featured image
Upload or select image
Update forum

BuddyX Pro automatically displays forum images in forum listings.

Can I customize the reply editor?

Yes! bbPress uses WordPress's built-in editor. You can:

Option 1: Use a plugin

Install bbPress Fancy Editor or similar
Adds formatting toolbar to reply form

Option 2: Enable visual editor

Install bbPress Visual Editor plugin
Activate plugin
Reply forms get full WordPress editor

How do I reorganize forum order?

Go to Forums in admin
Use the drag handle (≡) to reorder forums
Drag forums up or down
Changes save automatically

Alternative:

Edit the forum
Change Menu Order number (lower = higher position)
Update forum

Why are forum URLs showing 404 errors?

Solution: Flush permalinks

Go to Settings > Permalinks
Click Save Changes (don't change anything)
WordPress regenerates rewrite rules
Try accessing forum again

How do I style forum elements?

Add custom CSS at Appearance > Customize > Additional CSS.

Examples:

/* Style forum title */
.bbp-forum-title {
    font-size: 24px;
    color: #333;
}

/* Change reply background */
.bbp-reply-content {
    background: #f9f9f9;
    padding: 20px;
}

/* Highlight moderator posts */
.bbp-author-role-moderator .bbp-reply-content {
    border-left: 4px solid #28a745;
}

Troubleshooting

Forums Not Displaying Properly

Problem: Forum layouts broken or unstyled.

Solutions:

Verify bbPress is activated
Clear theme cache
Check for theme conflicts (switch to default theme temporarily)
Re-save permalinks

Cannot Create Topics

Problem: Users can't create new topics.

Solutions:

Check user has "Participant" role or higher
Verify forum isn't set to "Closed" status
Check user hasn't been blocked
Review forum permissions

Breadcrumbs Not Showing

Problem: Forum navigation breadcrumbs missing.

Solutions:

Go to Appearance > Customize > Site Sub Header
Ensure breadcrumbs are enabled
Check that sub-header is enabled
Clear caching

Problem: Sidebar missing from forum pages.

Solutions:

Add widgets to bbPress sidebar widget areas
Check Customize > Sidebar forum settings
Verify sidebar isn't set to "None"
Check that widgets are in correct widget area

Search Not Finding Topics

Problem: Forum search returns no results.

Solutions:

Verify topics are published (not drafts)
Check search permissions
Rebuild search index (if using search plugin)
Try default WordPress search

Performance Optimization

Caching

Use object caching (Redis/Memcached)
Configure page caching to exclude forum pages
Enable browser caching for static assets

Database

Regularly optimize bbPress database tables
Clean spam topics/replies
Archive old, inactive topics if needed

Best Practices

Limit topics per page to 20-30 for performance
Disable deep threading (max 3-4 levels) for large forums
Use pagination instead of "load more"
Enable WordPress object caching

Sidebar Layouts - Configure forum sidebars
Sub Header & Breadcrumbs - Forum navigation
BuddyPress Integration - Connect forums to profiles

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

LearnDash

Course layouts, instructor dashboard, hooks reference.

Course Layouts

BuddyX Pro transforms LearnDash courses with modern, customizable layouts. Create stunning course pages with cover images, custom features, instructor profiles, and flexible content areas.

What You Can Do

Customize every aspect of your course appearance:

Add Cover Images - Beautiful header backgrounds for courses and groups
Highlight Features - Icon-based feature lists with custom text
Showcase Instructors - Multiple instructor profiles with avatars
Display Progress - Show enrollment counts and completion status
Customize Cards - Control course card appearance in grids
Style Headers - Rich course headers with breadcrumbs
Control Layouts - Grid, list, or custom column layouts
Show Participants - Display enrolled students with avatars

Single Course Page Layout

BuddyX Pro completely redesigns the single course page for better visual appeal and information hierarchy.

Course Header Components

The enhanced course header includes:

Element	Description	Customizable
Cover Image	Full-width background image	Yes - per course
Breadcrumbs	Navigation path to course	Yes - global toggle
Course Title	Large, prominent heading	Automatic
Short Description	Brief course overview	Yes - per course
Enrollment Count	Number of enrolled students	Automatic
Instructor Profiles	Avatars and names with links	Automatic
Last Updated Date	Most recent modification	Automatic

┌─────────────────────────────────────────────┐
│                                             │
│            [Cover Image Background]          │
│                                             │
│  Breadcrumbs > Courses > Web Development    │
│                                             │
│  Web Development Fundamentals               │ ← Title
│                                             │
│  Learn HTML, CSS, and JavaScript from       │ ← Short Description
│  scratch to build modern websites           │
│                                             │
│  👥 247 students                            │ ← Enrollment
│                                             │
│  [Avatar] [Avatar] John Doe, Jane Smith     │ ← Instructors
│                                             │
│  🏆 Last updated January 25, 2026           │ ← Updated Date
│                                             │
└─────────────────────────────────────────────┘

Adding Cover Images

Cover images create visual impact and help students identify courses.

For Courses

Edit Your Course
- Go to LearnDash LMS → Courses
- Click on course to edit
Find Cover Image Meta Box
- Look in the right sidebar
- Find Course Cover Image box
Upload Image
- Click Set cover image button
- Choose from Media Library or upload new
- Click Set cover image again to confirm
Save Course
- Click Update button
- View course page to see cover

For LearnDash Groups

Edit Your Group
- Go to LearnDash LMS → Groups
- Click on group to edit
Find Cover Image Meta Box
- Right sidebar
- Find Group Cover Image box
Upload Image
- Click Set cover image button
- Select or upload image
- Confirm selection
Save Group
- Click Update button

Cover Image Specifications

Property	Recommendation	Notes
Dimensions	1920×600px	Minimum width 1200px
Aspect Ratio	3.2:1	Wider than standard hero
File Format	JPG for photos, PNG for graphics	WebP for best performance
File Size	Under 200KB	Compress before upload
Safe Area	Center 60%	Sides may crop on mobile

Image Tips:

Use high-quality, relevant images
Avoid text in images (use overlays instead)
Ensure good contrast with white text
Test on mobile devices
Consider dark overlay for readability

Removing Cover Images

Edit the course/group
In the cover image meta box
Click Remove listing image
Update course/group

Effect:

Header still displays but with solid color background
All other header elements remain

Custom Course Features

Highlight what students receive or learn with icon-based feature lists.

Enabling Custom Features

Edit Course
- Go to LearnDash LMS → Courses
- Edit your course
Find Custom Course Features Meta Box
- Usually in the main content area
- Under Course Settings tab
Enable Features
- Check Enable checkbox
- Features section expands

Adding Features

Select Icon
- Click icon dropdown
- Choose from 500+ Font Awesome icons
- Icons are categorized and searchable
Enter Feature Text
- Type feature description
- Keep it short (5-10 words)
- Be specific and benefit-focused
Add More Features
- Click Add Feature button
- Repeat for each feature
- Supports unlimited features
Reorder Features
- Drag and drop rows
- Most important features first
Delete Features
- Click × button on row
- Feature removed immediately
Save Course
- Click Update button

Feature Display Location

Custom features appear on single course page:

Below course content
Above lesson list
In a styled grid layout
Icons on the left, text on right

Layout Example:

What You'll Learn
┌──────────────────────────────────┐
│ 📹 12 hours of video content     │
│ 📄 15 downloadable resources     │
│ 🏆 Certificate of completion     │
│ ♾️  Lifetime access              │
│ 📱 Access on mobile and desktop  │
└──────────────────────────────────┘

Feature Ideas by Course Type

Programming Courses:

💻 50+ coding exercises
🎓 Build 5 real-world projects
📚 Downloadable code snippets
⏰ 20 hours of content
🏆 Certificate upon completion

Business Courses:

📊 15 business templates
💼 Case studies from Fortune 500
🎯 Actionable frameworks
👥 Lifetime community access
📈 Results-focused training

Creative Courses:

🎨 Project-based learning
📷 20+ design templates
🖼️ Portfolio examples included
🎬 Step-by-step video tutorials
💾 Software setup guides

Language Courses:

🗣️ Conversational practice
📖 Grammar cheat sheets
🎧 Audio lessons
📝 Quizzes and exercises
🌍 Cultural context lessons

Instructor Profiles

BuddyX Pro automatically displays instructor information on course pages.

How Instructors Are Detected

The theme pulls instructors from three sources:

Course Author (WordPress user who created course)
LearnDash Instructor IDs (course meta: _ld_instructor_ids)
Instructor Role Plugin (if using Instructor Role for LearnDash)

All three are combined and de-duplicated automatically.

Instructor Display

In Course Header:

Up to 3 instructor avatars (40×40px)
All instructor names as clickable links
Links go to instructor archive page

Instructor Archive Page: Shows when clicking instructor name:

URL: yoursite.com/author/username/?post_type=sfwd-courses
Instructor bio and avatar
List of their courses
Social links (if configured)

Setting Up Instructor Profiles

Edit User Profile
- Go to Users → All Users
- Click on instructor's name
Complete Profile Information
- Display Name: How name appears
- Biographical Info: Instructor bio
- Profile Picture: Upload via Gravatar or BuddyPress
- Email: Contact email
- Website: Personal/company URL
Add Social Links (Optional)
- Install Yoast SEO plugin
- In user profile, find Social Profiles
- Add Twitter, Facebook, LinkedIn, etc.
Assign to Courses
- Make user the course author, OR
- Use LearnDash instructor meta box, OR
- Install Instructor Role for LearnDash plugin

Multiple Instructors

To Add Multiple Instructors:

Method 1: LearnDash Meta Box

Edit course
Find LearnDash Instructor IDs meta box
Enter user IDs separated by commas
Update course

Method 2: Instructor Role Plugin

Install Instructor Role for LearnDash
Create instructor users
Assign instructors to courses in plugin settings

Display:

All instructor avatars appear (up to 3 shown)
All names listed with commas
Example: "John Doe, Jane Smith, Bob Johnson"

Course Archive Layouts

Control how courses appear on your course listing page.

Grid Layout Options

Configure in Appearance → Customize → LearnDash → Course Columns

List View (1 Column)

Best For:

Courses with long descriptions
Detailed course information
Professional/corporate training
When you have fewer courses (under 12)

What Shows:

Large course thumbnail (left)
Full course title
Complete short description
Instructor info
Price/enrollment button
Categories and tags

Use Case: Corporate training portal with detailed course requirements.

Two Columns

Best For:

Balanced layout
Medium-sized course catalogs (12-30 courses)
Academic institutions
Professional certifications

What Shows:

Medium course thumbnail
Course title
Truncated description (2-3 lines)
Instructor name
Price/button

Use Case: University department offering 20 courses across semesters.

Three Columns

Best For:

Compact display
Larger course catalogs (30-60 courses)
Category-based browsing
Visual learners

What Shows:

Smaller thumbnail
Course title
Brief description (1-2 lines)
Price/button
Minimal instructor info

Use Case: Online learning marketplace with varied course topics.

Four Columns (Default)

Best For:

Maximum courses visible
Very large catalogs (60+ courses)
Image-focused browsing
Modern, Pinterest-style layout

What Shows:

Small thumbnail
Course title only
Price badge
Hover for more info

Use Case: Massive open online course (MOOC) platform with hundreds of courses.

Responsive Grid Behavior

BuddyX Pro automatically adjusts columns based on device:

Screen Size	4 Column	3 Column	2 Column	1 Column
Desktop (>1200px)	4 cols	3 cols	2 cols	1 col
Laptop (992-1200px)	3 cols	3 cols	2 cols	1 col
Tablet (768-992px)	2 cols	2 cols	2 cols	1 col
Mobile (<768px)	1 col	1 col	1 col	1 col

Result: Your courses always look great regardless of device.

Course Card Styling

Each course card in the grid includes standardized elements.

Standard Card Elements

┌──────────────────────────┐
│                          │
│   [Course Thumbnail]     │
│                          │
├──────────────────────────┤
│ Web Development          │ ← Title
│                          │
│ Learn HTML, CSS, and...  │ ← Description
│                          │
│ 👤 John Doe              │ ← Instructor
│                          │
│ 👥 247 Students          │ ← Enrollment
│                          │
│ [Enroll Now - $49]       │ ← Price/Button
└──────────────────────────┘

Customizing Card Content

Via LearnDash Course Grid Plugin:

Install LearnDash Course Grid (free on WordPress.org)
Go to LearnDash → Course Grid
Configure card elements:
- Show/hide short description
- Show/hide instructor
- Show/hide enrollment count
- Show/hide course progress
- Button text customization

Via LearnDash Settings:

Go to LearnDash LMS → Settings → General
Find Price Type Display
Choose: Free, Closed, Open, Buy Now
This affects price badges on cards

Course Thumbnail Images

Setting Featured Images:

Edit course
Find Featured Image in right sidebar
Click Set featured image
Select or upload image
Update course

Recommended Specifications:

Dimensions: 800×600px (4:3 ratio)
File size: Under 100KB
Format: JPG or WebP
Consistent style across all courses

Lesson and Topic Layouts

Control the appearance of lessons and topics within courses.

Default: Inherits from global sidebar setting

Override Per Lesson: Lessons typically use LearnDash's built-in layout, but you can:

Use Focus Mode (recommended)
- No sidebars, distraction-free
- Controlled by LearnDash settings
Use Standard Mode with sidebar
- Go to Customizer → Sidebar → Lesson Sidebar
- Choose layout
- Sidebar shows LearnDash Course Sidebar widgets

Lesson Progress Display

Location: Top of lesson content

Shows:

Lesson number in course
Percentage complete
Previous/Next lesson buttons
Mark complete button

Styling: BuddyX Pro applies consistent progress bar styling matching theme colors.

Topic Display

Topics are sub-lessons within a lesson.

Default Display:

Nested under parent lesson
Indented in course content list
Same layout options as lessons
Numbered sequentially

Best Practice: Keep topics focused on single concepts for better learning flow.

LearnDash Groups Layout

Groups bundle multiple courses together (like "bundles" or "memberships").

Group Page Components

Similar to course pages with:

Group cover image
Group title and description
Group leaders (instructors)
Member count
List of included courses
Enrollment button

Group vs Course Differences

Element	Courses	Groups
Cover Meta	`_course_image_id`	`_group_image_id`
Instructors	Multiple sources	Group leaders
Enrollment	Students	Users/Members
Content	Lessons/topics	Courses
Progress	Lesson completion	Course completion

Progress Tracking Display

BuddyX Pro enhances how progress is displayed throughout the learning experience.

Course Progress Bar

Location: Student dashboard, course cards

Shows:

Percentage complete (0-100%)
Colored progress bar
"Not Started," "In Progress," or "Completed" badge

Styling:

Theme primary color for progress
Secondary color for incomplete
Success green for completed

Lesson Completion

Location: Within course content

Shows:

Checkmarks for completed lessons
Play icons for in-progress
Lock icons for unavailable
Estimated time per lesson

Quiz Results

Location: After quiz completion

Shows:

Score percentage
Pass/fail status
Correct/incorrect answers (if enabled)
Certificate link (if passed and certificates enabled)

Certificate Integration

Display certificates for completed courses.

Enabling Certificates

Create Certificate Template
- Go to LearnDash → Certificates
- Click Add New
- Design certificate with shortcodes
- Publish certificate
Assign to Course
- Edit course
- Find Course Settings → Associated Certificate
- Select your certificate template
- Update course
Set Criteria
- In course settings
- Enable Certificate Threshold
- Set minimum quiz score (optional)
- All lessons must be complete

Certificate Display

Where Certificates Appear:

Student dashboard (after course completion)
Course page (if completed)
User profile (via shortcode)

BuddyX Pro Enhancements:

Download button with PDF icon
Print button
Share certificate option (if using sharing plugin)

Quiz Styling

BuddyX Pro applies modern styling to LearnDash quizzes.

Quiz Elements Styled

Question Cards: Clean, card-based design
Answer Choices: Clear radio/checkbox buttons
Submit Button: Theme-styled primary button
Results Screen: Formatted score display
Timer: Prominent countdown (if enabled)
Progress: Question X of Y indicator

Quiz Types Supported

All LearnDash quiz types are styled:

Single choice
Multiple choice
Free text
Fill in the blank
Essay
Sorting choice
Matrix sorting

Focus Mode Compatibility

BuddyX Pro fully supports and enhances LearnDash Focus Mode.

Focus Mode Features

What BuddyX Pro Adds:

Dark Mode Toggle
- Sun/moon icon in header
- Toggles dark theme
- Saved per user
Improved Sidebar
- Better course navigation
- Mobile-friendly toggle
- Progress indicators
Video Player Integration
- Full-width video display
- Better controls visibility
- Responsive sizing
Reading Optimization
- Improved typography
- Better line spacing
- Optimal content width

Enabling Focus Mode

Globally:

Go to LearnDash LMS → Settings → Courses
Find Course Navigation
Select Focus Mode
Save settings

Per Course:

Edit course
Course Settings meta box
Course Navigation → Focus Mode
Update course

Dark Mode in Focus Mode

How It Works:

Student enters Focus Mode
Clicks moon icon (top right)
Dark theme activates
Preference saved in browser cookie
Persists across lessons

Customizing Dark Mode: Dark mode colors inherit from Customizer → Skin → Dark Mode settings.

Common Questions

How do I change course card hover effects?

BuddyX Pro applies hover effects automatically:

Slight scale increase
Shadow enhancement
Smooth transition

To customize, use CSS in child theme:

.ld_course_grid .thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Can I hide the enrollment count?

Yes, via LearnDash Course Grid plugin:

Install plugin
Go to LearnDash → Course Grid
Uncheck Show Enrolled Count
Save settings

How do I add course prerequisites to the layout?

Prerequisites are shown automatically if configured:

Edit course
Course Settings → Prerequisites
Select required courses
Prerequisites display on course page

Can I customize the "Enroll" button text?

Yes:

Go to LearnDash LMS → Settings → General
Find Custom Button Labels
Change "Take This Course" text
Save settings

How do I show course duration?

Install LearnDash Course Grid plugin:

Enables duration field in course settings
Enter duration (e.g., "8 weeks")
Duration displays on course cards

Recommended Configurations by Course Type

Video-Heavy Courses

Layout Settings:

Course Columns: 3-4 columns
Single Course: No sidebar
Lessons: Focus Mode enabled
Progress: Visible on all pages

Why: Maximizes video player space, minimal distractions.

Text-Based Courses

Layout Settings:

Course Columns: 2 columns
Single Course: Right sidebar
Lessons: Standard mode with sidebar
Custom Features: Emphasize reading materials

Why: Sidebars provide navigation, two-column provides readable line length.

Quiz-Focused Certification

Layout Settings:

Course Columns: List view
Single Course: Both sidebars
Lessons: No sidebar
Certificate: Prominently displayed

Why: Detailed course info, quizzes need focus, certificates are the goal.

Community Learning

Layout Settings:

Course Columns: 3 columns
Single Course: Right sidebar (BuddyPress widgets)
Lessons: Focus Mode
Enable: Course participants display

Why: Community engagement via sidebars, focused learning in lessons.

LearnDash Setup - Initial configuration
LearnDash Dashboard - Student dashboard
Sidebar Layouts - Sidebar configuration
Dark Mode - Dark mode settings

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: Screenshots, BuddyX Pro version, LearnDash version

LearnDash Hooks Reference

Developer documentation for customizing BuddyX Pro's LearnDash integration.

Filter Hooks

buddyx_ld_filter_course_author_url

Modify the instructor profile URL on course pages.

add_filter( 'buddyx_ld_filter_course_author_url', 'my_instructor_url', 10, 2 );

function my_instructor_url( $author_url, $instructor_id ) {
    // Link to BuddyPress profile instead
    if ( function_exists( 'bp_core_get_user_domain' ) ) {
        return bp_core_get_user_domain( $instructor_id );
    }
    return $author_url;
}

Parameters:

$author_url (string) - Default author posts URL with ?post_type=sfwd-courses
$instructor_id (int) - User ID of the instructor

Return: String - Modified URL

buddyx_ld_course_search_form_format

Control the search form HTML format.

add_filter( 'buddyx_ld_course_search_form_format', 'my_search_format' );

function my_search_format( $format ) {
    // Force XHTML format
    return 'xhtml';
}

Parameters:

$format (string) - 'html5' or 'xhtml'

Return: String - Format type

get_buddyx_ld_course_search_form

Customize the complete course search form output.

add_filter( 'get_buddyx_ld_course_search_form', 'my_search_form' );

function my_search_form( $form ) {
    // Add custom class to form
    $form = str_replace( 'class="buddyx_ld_course_search-form',
                         'class="my-custom-class buddyx_ld_course_search-form',
                         $form );
    return $form;
}

Parameters:

$form (string) - Complete search form HTML

Return: String - Modified form HTML

buddyx_learndash_lms_get_course_participants_per_page

Control how many participants show per AJAX load.

add_filter( 'buddyx_learndash_lms_get_course_participants_per_page', 'my_participants_count' );

function my_participants_count( $per_page ) {
    // Show 10 participants per page
    return 10;
}

Parameters:

$per_page (int) - Default is 5

Return: Integer - Number of participants per page

learndash_header_tab_menu

BuddyX Pro uses this LearnDash filter to add custom meta boxes.

add_filter( 'learndash_header_tab_menu', 'my_metaboxes', 15, 4 );

function my_metaboxes( $header_data_tabs, $menu_tab_key, $screen_post_type ) {
    // Add custom metabox to Settings tab
    foreach ( $header_data_tabs as $key => $data_tabs ) {
        if ( 'sfwd-courses-settings' === $data_tabs['id'] ) {
            $header_data_tabs[ $key ]['metaboxes'][] = 'my_custom_metabox';
        }
    }
    return $header_data_tabs;
}

Theme-registered metaboxes:

learndash_course_custom_features - Custom features panel

single_template

BuddyX Pro filters single templates for LearnDash groups.

add_filter( 'single_template', 'my_group_template', 15 );

function my_group_template( $template ) {
    if ( get_post_type() === 'groups' ) {
        // Use custom template
        $my_template = get_stylesheet_directory() . '/my-group-template.php';
        if ( file_exists( $my_template ) ) {
            return $my_template;
        }
    }
    return $template;
}

Action Hooks

buddyx_sub_header

BuddyX Pro replaces the sub header on LearnDash pages.

// Add content before the LearnDash course header
add_action( 'buddyx_sub_header', 'my_before_course_header', 5 );

function my_before_course_header() {
    if ( is_singular( 'sfwd-courses' ) ) {
        echo '<div class="course-announcement">Enrollment open!</div>';
    }
}

Theme modifications:

Removes default buddyx_sub_header on single courses/groups
Adds buddyx_learndash_single_course_header for courses
Adds buddyx_learndash_single_group_header for groups
Adds buddyx_learndash_instructor_header for instructor pages

BuddyX Pro adds elements after the Focus Mode header navigation.

add_action( 'learndash-focus-header-nav-after', 'my_focus_button', 15, 2 );

function my_focus_button( $course_id, $user_id ) {
    ?>
    <button class="my-focus-action">Custom Action</button>
    <?php
}

Theme additions at this hook:

Dark/Light mode toggle (priority 10)
Sidebar trigger button (priority 10)

pre_get_buddyx_ld_course_search_form

Fires before the course search form is generated.

add_action( 'pre_get_buddyx_ld_course_search_form', 'my_search_setup' );

function my_search_setup() {
    // Custom setup before search form renders
}

save_post

BuddyX Pro saves custom course meta on post save.

add_action( 'save_post', 'my_course_save', 15 );

function my_course_save( $post_id ) {
    if ( get_post_type( $post_id ) !== 'sfwd-courses' ) {
        return;
    }

    // Your custom save logic
}

Theme-saved meta:

buddyx_ld_ccf_enable - Custom features enabled
buddyx_ld_features - Array of feature icons/text
_course_image_id - Cover image attachment ID
_group_image_id - Group cover image attachment ID

Theme Functions

buddyx_learndash_single_course_header()

Renders the Udemy-style single course header.

// Replace with custom header
remove_action( 'buddyx_sub_header', 'buddyx_learndash_single_course_header' );
add_action( 'buddyx_sub_header', 'my_course_header' );

function my_course_header() {
    // Custom course header implementation
}

Output includes:

Breadcrumbs (if enabled)
Course title
Short description
Enrollment count
Instructor avatars/names
Last updated date

buddyx_learndash_single_group_header()

Renders the single group header.

// Customize group header
remove_action( 'buddyx_sub_header', 'buddyx_learndash_single_group_header' );
add_action( 'buddyx_sub_header', 'my_group_header' );

buddyx_learndash_instructor_header()

Renders the instructor profile header.

// Customize instructor header
remove_action( 'buddyx_sub_header', 'buddyx_learndash_instructor_header' );
add_action( 'buddyx_sub_header', 'my_instructor_header' );

get_buddyx_ld_course_search_form()

Generates the course search form with filters.

// Display in template
if ( function_exists( 'get_buddyx_ld_course_search_form' ) ) {
    get_buddyx_ld_course_search_form();
}

// Get form as string
$form = get_buddyx_ld_course_search_form( false );

Parameters:

$echo (bool) - Whether to echo or return (default: true)

Return: String|void - Form HTML when $echo is false

buddyx_learndash_ld_course_enrolled_users_list()

Get cached count of enrolled users.

$count = buddyx_learndash_ld_course_enrolled_users_list( $course_id );
echo $count . ' students enrolled';

// Force refresh cache
$count = buddyx_learndash_ld_course_enrolled_users_list( $course_id, true );

Parameters:

$course_id (int) - Course ID
$force_refresh (bool) - Bypass transient cache (default: false)

Return: Integer - Number of enrolled users

buddyx_learndash_fontawesome_icons()

Get array of available FontAwesome icons for course features.

$icons = buddyx_learndash_fontawesome_icons();
// Returns array of icon class names like 'fas fa-book', 'fab fa-youtube', etc.

Return: Array - List of FontAwesome icon class names

AJAX Endpoints

buddyx_learndash_lms_get_course_participants

AJAX handler for loading more course participants.

Request Parameters:

course (int) - Course ID
total (int) - Total number of users
page (int) - Current page number
nonce (string) - Security nonce

Response:

{
    "success": true,
    "data": {
        "html": "<li>...</li>",
        "show_more": "true",
        "page": 2
    }
}

Customizer Settings

Getting Customizer Values

// Category filter enabled
$cat_filter = get_theme_mod( 'ld_category_filter', buddyx_defaults( 'ld-category-filter' ) );

// Instructor filter enabled
$inst_filter = get_theme_mod( 'ld_instructors_filter', buddyx_defaults( 'ld-instructors-filter' ) );

// Course columns
$columns = get_theme_mod( 'ld_cousse_columns', 'default' );
// Values: 'ld_column_1', 'ld_column_2', 'ld_column_3', 'default' (4 columns)

// LearnDash sidebar layout
$sidebar = get_theme_mod( 'ld_sidebar_option', buddyx_defaults( 'ld-sidebar-option' ) );

Post Meta Reference

Course Meta

Meta Key	Type	Description
`buddyx_ld_ccf_enable`	string	'yes' or empty
`buddyx_ld_features`	array	Icon/text pairs
`_course_image_id`	int	Cover image ID

Group Meta

Meta Key	Type	Description
`_group_image_id`	int	Cover image ID

CSS Classes

Course Header Classes

Class	Element
`.learndash-single-course-header`	Main header container
`.course-cover-image`	When cover image is set
`.learndash-single-course-header-inner-wrap`	Content wrapper
`.course-header-short-description`	Description text
`.learndash-course-info`	Enrollment info
`.learndash-course-instructor`	Instructor section
`.instructor-avatar`	Avatar container
`.instructor-name`	Name links
`.last-update-date`	Update date

Instructor Header Classes

Class	Element
`.buddyx-learndash-author-info`	Main container
`.lm-course-author-info-tab`	Content wrapper
`.lm-course-author-avatar`	Avatar container
`.lm-author-bio`	Bio section
`.lm-author-title`	Name heading
`.lm-author-social`	Social links list
`.lm-author-description`	Bio text

Focus Mode Classes

Class	Element
`.learndash-dark-mode`	Dark mode icon
`.learndash-light-mode`	Light mode icon
`.ld-focus-sidebar-trigger`	Sidebar toggle button

Template Overrides

Create buddyx_ld_course_searchform.php in your child theme to override the search form.

// child-theme/buddyx_ld_course_searchform.php
<form role="search" method="get" class="my-search-form" action="<?php echo esc_url( get_post_type_archive_link( 'sfwd-courses' ) ); ?>">
    <!-- Your custom form HTML -->
</form>

Custom Group Template

Create single-sfwd-groups.php in your child theme for custom group single template.

README - Technical overview
Customer Guide - Setup instructions
Developer Hooks - All theme hooks

LearnDash Dashboard

The LearnDash student dashboard is the central hub where learners track their progress, access courses, view certificates, and manage their learning journey. BuddyX Pro enhances this dashboard with modern styling and seamless BuddyPress integration.

What You Can Do

Transform the student learning experience with:

Track Course Progress - Visual progress bars and completion status
View Enrolled Courses - Quick access to active and completed courses
Download Certificates - Easy access to earned certificates
See Quiz Results - Detailed quiz scores and history
Access Course Materials - Direct links to lessons and topics
Manage Profile - Update profile and preferences (with BuddyPress)
View Achievements - Badges, points, and gamification (with GamiPress)
Connect with Peers - See course participants and interact

Dashboard Overview

The LearnDash user dashboard displays when students visit their profile or dedicated dashboard page.

Dashboard Components

Section	Description	Customizable
Enrolled Courses	Active courses with progress	Layout only
Completed Courses	Finished courses with completion date	Layout only
Course Progress	Visual progress indicators	Colors via theme
Certificates	Downloadable completion certificates	Template design
Quiz Results	Scores and quiz history	Via LearnDash
Points & Achievements	Gamification elements	Via GamiPress

Dashboard Access Points

Students can access their dashboard via:

User Profile Link
- URL: yoursite.com/profile/username/courses/
- With BuddyPress: Integrated tab
Dashboard Shortcode
- [ld_profile] - Shows current user's dashboard
- [ld_course_list] - Shows enrolled courses only
Menu Link
- Add to navigation menu
- Links to profile/dashboard page

Setting Up the Dashboard

Creating a Dashboard Page

Method 1: Using Shortcode

Create New Page
- Go to Pages → Add New
- Title: "My Courses" or "Learning Dashboard"
Add Shortcode
- In content editor, add:
```
[ld_profile]
```
Configure Page
- Template: Default or Full Width
- Sidebar: Recommended - No Sidebar
- Publish page
Add to Menu
- Go to Appearance → Menus
- Add page to navigation
- Save menu

Method 2: Using LearnDash Settings

Configure Registration URLs
- Go to LearnDash LMS → Settings → Registration & Profile
- Set Profile URL to your dashboard page
- Save settings
LearnDash Links
- LearnDash automatically links to this page
- "My Courses" buttons go here
- User profile links point here

BuddyPress Integration

If using BuddyPress, the dashboard integrates automatically:

What Happens:

Courses Tab added to member profiles
Shows enrolled courses
Displays course progress
Visible to profile owner only (by default)

Accessing via BuddyPress:

User logs in
Clicks their avatar/name
Views profile
Clicks Courses tab

Making Courses Tab Public: Use a plugin like BuddyPress Profile Tabs Visibility to control tab privacy.

Dashboard Layout Options

BuddyX Pro provides several layout options for the dashboard.

Recommended: No Sidebar

Why:

Dashboard is full-width for better course card display
More courses visible at once
Cleaner, app-like interface

To Change:

Go to Appearance → Customize → Sidebar
Find Page Sidebar setting
Select sidebar layout
Publish

Alternative: Use right sidebar with:

Course search widget
Course categories widget
Recent courses widget

Grid Layout

Enrolled courses display in a grid similar to course archive.

Default Layout:

3-4 columns on desktop
2 columns on tablet
1 column on mobile
Progress bars on each card
"Continue" or "Start" buttons

Customizing Grid: Controlled by LearnDash Course Grid plugin settings:

Install LearnDash Course Grid
Go to LearnDash → Course Grid
Configure:
- Columns per row
- Show/hide progress
- Button text
- Card elements

Course Progress Tracking

BuddyX Pro enhances how progress is displayed in the dashboard.

Progress Bar Styling

Visual Elements:

Web Development Fundamentals
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
████████████░░░░░░░░░░░░░ 45%

12 of 24 lessons completed

Color Coding:

In Progress: Theme primary color
Not Started: Light gray
Completed: Success green
Failed/Locked: Warning red

Progress Calculation

LearnDash calculates progress based on:

Method	Calculation	Use Case
Lesson-Based	Completed lessons ÷ total lessons	Standard courses
Quiz-Based	Passed quizzes ÷ total quizzes	Test-focused courses
Assignment-Based	Approved assignments ÷ total	Project courses
Mixed	Average of all methods	Comprehensive courses

Set in Course Settings:

Edit course
Course Settings meta box
Find Course Progression
Choose calculation method
Update course

Completion Status Badges

Each course card shows status:

Badge	Meaning	Color
Not Started	0% complete	Gray
In Progress	1-99% complete	Blue/Primary
Completed	100% complete	Green
Expired	Access period ended	Red

Certificate Display

Certificates appear in the dashboard after course completion.

Certificate Section

Location: Below completed courses

What Shows:

Certificate thumbnail/icon
Course name
Completion date
Download PDF button
Print button

Layout Example:

Certificates
┌──────────────────────────────────────┐
│ 📜 Web Development Fundamentals      │
│    Completed: January 25, 2026       │
│    [Download PDF] [Print]            │
├──────────────────────────────────────┤
│ 📜 Advanced JavaScript               │
│    Completed: January 20, 2026       │
│    [Download PDF] [Print]            │
└──────────────────────────────────────┘

Creating Certificate Templates

Add New Certificate
- Go to LearnDash → Certificates
- Click Add New
Design Certificate
- Use visual editor
- Add shortcodes for dynamic content:
  - {user_name} - Student name
  - {course_title} - Course name
  - {completion_date} - Date completed
  - {course_points} - Points earned
Style Certificate
- Background image
- Fonts and colors
- Logo and signature
- Border and decorations
Assign to Course
- Edit course
- Course Settings → Associated Certificate
- Select certificate template
- Update course

Certificate Verification

Making Certificates Verifiable:

Install LearnDash Certificate Verification plugin
Generates unique certificate IDs
Public verification page
Prevents fraud

Verification Process:

Student shares certificate PDF
Employer/school visits verification page
Enters certificate ID
System confirms authenticity

Quiz Results & History

The dashboard provides detailed quiz performance tracking.

Quiz History Display

Location: Dashboard quiz results section

What Shows:

Quiz name
Course association
Score percentage
Pass/fail status
Date taken
Number of attempts
Time spent

Layout Example:

Quiz Results
┌───────────────────────────────────────────┐
│ JavaScript Basics Quiz                    │
│ Course: Web Development Fundamentals      │
│ Score: 85% (17/20 correct) ✓ PASSED      │
│ Date: January 24, 2026                    │
│ Time: 15 minutes                          │
│ [View Answers] [Retake]                   │
└───────────────────────────────────────────┘

Quiz Statistics

If using LearnDash Course Grid or LearnDash ProPanel:

Available Stats:

Average quiz score across all courses
Total quizzes taken
Total quizzes passed
Success rate percentage
Best and worst performing quizzes

Viewing Quiz Answers

If Enabled in Quiz Settings:

Student clicks View Answers button
See all questions
View correct/incorrect answers
See explanations (if provided)
Review missed questions

Enabling Answer Review:

Edit quiz
Quiz Settings → Quiz Results Display
Enable View Quiz Questions
Update quiz

Course Participants Display

See other students enrolled in your courses.

Participant Section

Location: Single course page (when enrolled)

What Shows:

Student avatars (40×40px)
Display names
Profile links (if BuddyPress active)
Load more button (if >5 participants)

Privacy: Participants are only visible to enrolled students, not public visitors.

Customizing Participant Display

Number of Participants Per Page:

Default: 5 participants

To Change (requires code): Add to child theme functions.php:

add_filter( 'buddyx_learndash_lms_get_course_participants_per_page', function( $per_page ) {
    return 10; // Show 10 participants
});

Hiding Participants: Use CSS in child theme:

.learndash-course-participants {
    display: none;
}

Gamification Integration

Enhance the dashboard with badges, points, and achievements using GamiPress.

What GamiPress Adds

Dashboard Elements:

Points balance
Earned badges
Achievement progress
Leaderboards
Ranks

Setting Up GamiPress with LearnDash

Install GamiPress
- Install base GamiPress plugin
- Install GamiPress - LearnDash integration
- Activate both plugins
Create Achievement Types
- Go to GamiPress → Achievement Types
- Add types like "Course Completion Badges"
- Configure display settings
Set Up Awards
- Create achievements
- Set triggers:
  - Complete a course
  - Pass a quiz with X%
  - Complete X lessons
  - Earn X points

Add to Dashboard

Use shortcodes:

[gamipress_achievements]
[gamipress_points type="points"]
[gamipress_ranks]

GamiPress Dashboard Layout

Example Integration:

My Learning Dashboard

┌─────────────────────────────┐
│ 🏆 Points: 1,250            │
│ 🎖️  Badges: 12 earned       │
│ 📊 Rank: Gold Learner       │
└─────────────────────────────┘

My Courses
┌──────────┬──────────┬──────────┐
│ Course 1 │ Course 2 │ Course 3 │
│ 45% ████ │ 80% ████ │ 100% ✓   │
└──────────┴──────────┴──────────┘

Recent Achievements
┌────────────────────────────┐
│ 🎓 First Course Complete   │
│ 📚 5 Lessons in One Day    │
│ 💯 Quiz Master (100%)      │
└────────────────────────────┘

BuddyPress Profile Integration

When BuddyPress is active, the learning dashboard integrates with social profiles.

Profile Tabs

Courses Tab:

Shows enrolled courses
Displays progress
Public or private (configurable)

Activity Tab:

Course enrollments posted
Quiz completions shared
Achievements displayed
Certificate announcements

Badges Tab (with GamiPress):

All earned badges
Badge progress
Badge showcases

Profile Widgets

Add to BuddyPress profile sidebars:

Widget	Shows	Source
Course Progress	Current course status	LearnDash
Recent Certificates	Latest completions	LearnDash
Achievements	Badges and points	GamiPress
Learning Streak	Consecutive days	Custom plugin

Activity Stream Integration

Automatic Activity Posts:

Course enrollments
Course completions
Quiz passes
Certificate earnings
Achievements unlocked

Customizing Activity:

Go to Settings → BuddyPress → Activity
Find LearnDash activity types
Enable/disable types
Save settings

Dashboard Shortcodes

Use these shortcodes to build custom dashboard pages.

LearnDash Shortcodes

Shortcode	Description	Attributes
`[ld_profile]`	Full user profile dashboard	`user_id`, `per_page`
`[ld_course_list]`	Enrolled courses only	`user_id`, `course_id`
`[ld_course_resume]`	Resume last lesson button	`user_id`, `course_id`
`[learndash_user_status]`	Course progress status	`user_id`, `course_id`
`[ld_certificate]`	Certificate download link	`user_id`, `course_id`

GamiPress Shortcodes

Shortcode	Description	Attributes
`[gamipress_achievement]`	Single achievement	`id`, `user_id`
`[gamipress_achievements]`	Achievement list	`type`, `columns`
`[gamipress_points]`	Points balance	`type`, `user_id`
`[gamipress_leaderboard]`	Top users	`type`, `limit`

Example Custom Dashboard

Create a page with:

<h2>My Learning Progress</h2>
[ld_profile]

<h2>My Achievements</h2>
[gamipress_achievements type="course-badges" columns="3"]

<h2>My Points</h2>
[gamipress_points]

<h2>Leaderboard</h2>
[gamipress_leaderboard limit="10"]

Mobile Dashboard Experience

BuddyX Pro ensures the dashboard works beautifully on all devices.

Mobile Optimizations

Responsive Grid:

Desktop: 3-4 columns
Tablet: 2 columns
Mobile: 1 column stacked

Touch-Friendly:

Large buttons (44px minimum)
Adequate spacing
Swipeable course cards (if using carousel)

Mobile Navigation:

Sticky dashboard menu
Tab-based sections
Collapsible course lists

Mobile-Specific Features

Progressive Web App (PWA): Install a plugin like Super Progressive Web Apps to:

Add to home screen
Offline course access
Push notifications
App-like experience

Customizing Dashboard Appearance

Using the Customizer

Available Settings:

Colors
- Go to Customizer → Skin
- Primary color affects progress bars
- Success color affects completion badges
Typography
- Go to Customizer → Typography
- Heading fonts affect course titles
- Body font affects descriptions
Sidebar
- Go to Customizer → Sidebar
- Control dashboard sidebar
- Widget areas

Custom CSS

Add to Customizer → Additional CSS or child theme:

Change Progress Bar Colors:

.ld-progress-bar .ld-progress-bar-percentage {
    background-color: #your-color;
}

Adjust Card Spacing:

.ld_course_grid {
    gap: 30px; /* Increase spacing */
}

Customize Button Styles:

.ld-course-list-items .ld-status-action a {
    background: #your-color;
    border-radius: 5px;
    padding: 12px 24px;
}

Dashboard Widgets

Add functionality to dashboard sidebars.

Recommended Widgets

For Student Dashboard:

Course Search
- Allows quick course lookup
- Filters by title, instructor, category
Course Categories
- Browse courses by topic
- Shows course counts
Recent Courses
- Displays newly added courses
- Encourages exploration
Course Progress Summary
- Overall completion percentage
- Total lessons completed
- Total courses enrolled
Upcoming Lessons (requires plugin)
- Next scheduled lessons
- Due dates for assignments

Creating Custom Dashboard Widgets

Using WordPress Widget API:

class My_Dashboard_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'my_dashboard_widget',
            'My Dashboard Widget',
            array( 'description' => 'Custom dashboard info' )
        );
    }

    public function widget( $args, $instance ) {
        // Widget output
        echo $args['before_widget'];
        echo '<h3>My Progress</h3>';
        // Custom progress display
        echo $args['after_widget'];
    }
}

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

Common Questions

How do I change the dashboard page URL?

Method 1: Change Page Slug

Edit dashboard page
Click Edit next to permalink
Change slug (e.g., "my-learning")
Update page

Method 2: Set in LearnDash

Go to LearnDash → Settings → Registration & Profile
Set Profile URL to new page
Save settings

Can students see other students' dashboards?

Default: No, only their own

To Allow:

Install BP Profile Visibility plugin
Allow "Courses" tab to be public
Students can view each other's enrolled courses

Privacy Note: Quiz scores and detailed progress remain private unless specifically shared.

How do I hide completed courses?

Using Shortcode Attribute:

[ld_course_list show="enrolled"]

Using LearnDash Settings:

Go to LearnDash → Course Grid
Find Completed Courses option
Set to "Hide"
Save settings

Can I export dashboard data?

Yes, using plugins:

LearnDash Reports
- Built into LearnDash Pro
- Export user progress
- CSV format
Uncanny Toolkit
- Advanced reporting
- PDF exports
- Custom reports
WP All Export
- Export all LearnDash data
- Scheduled exports
- Multiple formats

How do I add a course search to the dashboard?

Method 1: Widget

Go to Appearance → Widgets
Find dashboard widget area
Add Search widget
Configure to search courses only

Method 2: Shortcode Add to dashboard page:

[learndash_course_search]

(Requires LearnDash Course Grid plugin)

Can I customize the certificate download button?

Yes, with CSS:

.ld-certificate-link a {
    background: #your-color;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}
.ld-certificate-link a:hover {
    background: #darker-color;
}

Recommended Configurations by User Type

K-12 Students

Dashboard Features:

Simplified layout (1-2 columns)
Large, colorful buttons
Heavy gamification (badges, points)
Parent access/reports
Reduced text, more visuals

Adult Learners

Dashboard Features:

Professional design
Detailed progress metrics
Certificate prominence
LinkedIn integration
Career-focused layout

Corporate Training

Dashboard Features:

Manager oversight
Compliance tracking
Deadline indicators
Completion reports
Team leaderboards

Hobby/Interest Learners

Dashboard Features:

Visual, Pinterest-style
Social features
Community integration
Flexible pacing
Achievement showcases

LearnDash Setup - Initial configuration
Course Layouts - Course design options
BuddyPress Integration - Social features
Sidebar Settings - Dashboard sidebars

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: BuddyX Pro version, LearnDash version, and dashboard screenshots

LearnDash Setup

BuddyX Pro provides custom styling and Customizer options for LearnDash.

Quick Setup

1. Install LearnDash

Purchase from learndash.com
Plugins > Add New > Upload Plugin
Upload ZIP and activate
Enter license key when prompted

2. Set Template

Required: LearnDash 3.0 (LD30) template

LearnDash LMS > Settings > General
Set Active Template to LearnDash 3.0
Save

3. Configure BuddyX Settings

Appearance > Customize > LearnDash

That's it - BuddyX Pro handles course styling automatically.

BuddyX Pro Settings

Course Archive

Customize > LearnDash

Setting	Options	Default
Course Columns	1, 2, 3, 4	4
Categories Filter	Yes/No	Yes
Instructors Filter	Yes/No	Yes

Customize > Sidebar

Page Type	Setting
Course Archive	Default, Left, Right, None
Single Course	Default, Left, Right, None
Lessons	Default, Left, Right, None

Tip: Use "None" for lessons to maximize content area.

What BuddyX Pro Adds

Course Archive

Grid layout with configurable columns
Category and instructor filters
Responsive design (stacks on mobile)

Single Course

Styled course content
Progress tracking display
Enrollment buttons

Focus Mode

BuddyX Pro enhances LearnDash Focus Mode with:

Dark mode toggle in header
Improved mobile sidebar
Theme color integration

Focus Mode Setup

Enable Focus Mode

LearnDash LMS > Settings > Courses

Set Course Navigation to Focus Mode
Save

Or enable per-course in course settings.

When to Use

Good for: Video courses, long content, certification programs

Skip for: Short courses, heavy community integration

Common Issues

Course pages look wrong

Verify using LearnDash 3.0 template
LearnDash LMS > Settings > General > Active Template
Clear cache

Customize > LearnDash > Categories Filter - Enable
Create course categories at LearnDash > Courses > Course Categories
Assign categories to courses

Customize > Sidebar > Single Course Sidebar
Select Left or Right
Add widgets at Appearance > Widgets > LearnDash Course Sidebar

Course Layouts - Layout customization
LearnDash Dashboard - Student dashboard
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Other LMS Plugins

LifterLMS, TutorLMS, LearnPress, Sensei LMS integrations.

LearnPress LMS Integration

Create engaging online courses with LearnPress and BuddyX Pro. This free, lightweight LMS plugin integrates seamlessly with BuddyX Pro to deliver professional course experiences with community features.

What You Can Do

With BuddyX Pro's LearnPress integration, you can:

Beautiful Course Archives - Display courses in customizable grid layouts
Enhanced Course Pages - Show course features, lectures, quizzes, and student counts
Progress Tracking - Visual progress bars and completion status
Quiz Management - Styled quiz interfaces with results display
Student Dashboards - Clean profile pages with course progress
Instructor Profiles - Showcase course creators and their offerings
BuddyPress Integration - Connect students through community features
Certificate Display - Award and display course completion certificates

Prerequisites

Before setting up LearnPress, ensure you have:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
LearnPress	4.0+	Free from wordpress.org
PHP	7.4+	Required by LearnPress

Optional But Recommended:

LearnPress Collections - Course bundles and packages
LearnPress Certificates - Award completion certificates
LearnPress Prerequisites - Set course dependencies
BuddyPress - Community features and student profiles

Initial Setup

Step 1: Install LearnPress

Go to Plugins → Add New
Search for "LearnPress"
Click Install Now next to LearnPress by ThimPress
Click Activate

Step 2: Complete LearnPress Setup Wizard

After activation, LearnPress launches a setup wizard:

Sample Course
- Choose Yes to create sample course
- Helps you understand course structure
- Can delete later
Pages Setup
- LearnPress creates required pages:
  - Courses (course archive)
  - Profile (student dashboard)
  - Checkout (course purchase)
  - Become a Teacher (instructor registration)
- Click Continue
Currency Settings
- Set your currency (USD, EUR, etc.)
- Choose currency position
- Set decimal separator
- Click Continue
Payment Methods
- Enable PayPal or Stripe (if selling courses)
- Configure for free courses later
- Click Continue
Ready
- Click Create Your First Course or
- Click Return to Dashboard

Step 3: Verify BuddyX Pro Integration

After installing LearnPress, verify the integration:

Go to Appearance → Customize
Check for BuddyX Pro styling on LearnPress pages
Visit your Courses page to see theme styling

If styling looks off:

Clear any caching plugins
Check that LearnPress is active
Verify BuddyX Pro theme is active

LearnPress Settings Overview

Configure core LearnPress settings before creating courses.

General Settings

Go to LearnPress → Settings → General

Setting	Recommendation	Why
Course Slug	courses (default)	Clean URLs for courses
Lesson Slug	lessons	Clean lesson URLs
Quiz Slug	quizzes	Clean quiz URLs
Profile Slug	profile	Student dashboard URL

Courses Settings

Go to LearnPress → Settings → Courses

Setting	Recommendation
Archive Page Limit	12 courses
Enable Review	Yes
Review Guests	No (require login)
Enable Course Duration	Yes

Profile Settings

Go to LearnPress → Settings → Profile

Setting	Recommendation
Enable Public Profile	Yes
Enable Login Form	Yes
Enable Register Form	Yes
Profile Avatar	WordPress or BuddyPress

Payment Settings

Go to LearnPress → Settings → Payments

Only configure if selling courses:

Setting	Description
Currency	Your currency (USD, EUR, etc.)
PayPal	Enable and add PayPal email
Stripe	Add API keys
Offline Payment	Manual payment processing

Course Display Settings

Control how courses display on your site.

Course Archive Layout

Default Display:

Responsive grid layout
Course thumbnail
Title and excerpt
Price badge
Instructor info
Student count and lesson count

Course Information Displayed: The theme automatically shows:

Number of lectures
Number of quizzes
Number of enrolled students
Assessment type (Self or Instructor)

Control sidebar layouts for LearnPress pages.

Go to Appearance → Customize → Sidebar

Page Type	Setting Available	Recommended
Course Archive	Global sidebar	Right sidebar
Single Course	Global sidebar	Right sidebar
Lesson Pages	Global sidebar	No sidebar

BuddyX Pro displays a "Course Features" widget on single course pages:

Features Shown:

Lectures count
Quizzes count
Students enrolled
Assessment type

This appears automatically in the course sidebar (if enabled).

Single Course Page

Course Header

The course header displays:

Course title
Course category
Instructor name with avatar
Course rating (if reviews enabled)
Price or "Free" badge

Course Curriculum

Layout:

Sections/chapters with expand/collapse
Lessons listed under each section
Quiz indicators
Lock icons for locked content
Progress indicators

Default Elements:

Course Features box
Price and enrollment button
Course Meta:
- Duration
- Skill level
- Language
- Students enrolled
- Last updated

Lesson Pages

Lesson Layout

Components:

Lesson title
Lesson content area
Previous/Next navigation
Lesson completion button
Course curriculum sidebar (collapsible)

Sidebar Navigation:

Full course curriculum
Current lesson highlighted
Progress percentage
Quick jump to any lesson

Lesson Completion

Students complete lessons by:

Reading/viewing lesson content
Clicking "Complete Lesson" button
Progress updates automatically
Next lesson unlocks (if sequential)

Quiz Interface

Quiz Display

BuddyX Pro styles LearnPress quizzes with:

Quiz Header:

Quiz title
Time limit (if set)
Number of questions
Passing grade
Attempts remaining

Question Types Supported:

True/False
Single choice
Multiple choice
Fill in the blanks
Essay (manual grading)

Quiz Results

After submission, students see:

Score achieved
Passing status
Correct/incorrect answers
Question review
Option to retake (if allowed)

Student Dashboard

Profile Page

Students access their dashboard at /profile/ (or your custom slug).

Dashboard Sections:

Courses
- In progress courses
- Completed courses
- Course progress bars
- Continue learning buttons
Quizzes
- Quiz results
- Grades achieved
- Review quiz attempts
Orders (if selling courses)
- Purchase history
- Order details
- Download receipts
Settings
- Profile information
- Avatar upload
- Password change

Progress Tracking

Visual Indicators:

Course progress percentage
Lesson completion checkmarks
Quiz scores
Overall completion status

Certificate Display

With LearnPress Certificates add-on:

Enabling Certificates

Install LearnPress Certificates add-on
Go to LearnPress → Certificates
Click Add New
Design certificate template
Assign to courses

Certificate Settings

Setting	Description
Template	Certificate design
Orientation	Portrait or Landscape
Paper Size	A4, Letter, etc.
Completion Required	100% or custom

Student Certificate View

Students can:

View certificates in dashboard
Download as PDF
Share certificate link
Print certificates

Instructor Features

Instructor Profile

With LearnPress Instructor add-on:

Profile Displays:

Instructor bio
Instructor courses
Rating and reviews
Contact information
Social links

Instructor Dashboard

Instructors can:

Create and manage courses
View student enrollment
Grade essay questions
Download student reports
Reply to course questions

BuddyPress Integration

Connecting Students

When BuddyPress is active:

Features:

Student profiles link to BuddyPress profiles
Activity stream shows course progress
Private messaging between students
Course discussion groups
Student directory filtering

Course Groups

Create BuddyPress groups for courses:

Create group in BuddyPress → Groups
Name after course
Set as private or public
Link in course description

Group Activities:

Course discussions
Study groups
Peer support
File sharing

Customization Options

Theme Customizer

Go to Appearance → Customize

Available Settings:

Sidebar layouts
Color scheme (applies to LearnPress)
Typography (applies to course content)
Dark mode toggle

Custom CSS

Add custom styling:

Go to Appearance → Customize → Additional CSS
Add LearnPress-specific styles
Target class .learnpress

Example CSS:

/* Change course grid spacing */
.course-summary-content {
    padding: 20px;
}

/* Customize course button */
.course-readmore a {
    background: #2563eb;
    color: white;
}

Common Questions

How do I change the Courses page URL?

Go to LearnPress → Settings → General
Find Course Slug
Change "courses" to your preferred slug
Click Save Changes
Go to Settings → Permalinks
Click Save Changes to refresh permalinks

Can I sell course bundles?

Yes, install LearnPress Collections add-on:

Install LearnPress Collections
Go to LearnPress → Collections
Create collection
Add multiple courses
Set collection price

How do I create drip content?

Install LearnPress Prerequisites add-on:

Install Prerequisites add-on
Edit a course
Set lesson unlock schedule
Lessons release on schedule
Students see countdown timer

Can students download course materials?

Yes, several options:

Method 1: Add Download Links

Add download links in lesson content
Use WordPress Media Library
Or link to external files

Method 2: Install Materials Add-on

Install LearnPress Course Materials
Add materials in course settings
Students download from sidebar

How do I enable course reviews?

Go to LearnPress → Settings → Courses
Enable Enable Review option
Choose Review Guests setting
Click Save Changes
Reviews appear on course pages

Why can't students see quiz results?

Common causes:

Review not enabled:
- Edit quiz
- Enable Review option
- Save quiz
Manual grading required:
- Quiz contains essay questions
- Instructor must grade manually
- Results show after grading
Attempts remaining:
- Student may need to complete all attempts
- Check quiz settings

How do I add instructors to courses?

Method 1: Change Author

Edit course
Change Author in sidebar
Update course

Method 2: Install Co-Instructors Add-on

Install LearnPress Co-Instructors
Edit course
Add multiple instructors
All appear on course page

Can I create course categories?

Yes, built-in support:

Go to LearnPress → Course Categories
Click Add New Category
Enter category name
Add description
Click Add New Course Category
Assign when editing courses

Best LMS Choice by Use Case

LearnPress vs Other LMS Platforms

Use Case	Best Choice	Why
Free/Budget Projects	LearnPress	100% free, no upsells
Simple Courses	LearnPress or Sensei	Easy setup, minimal features
Professional Training	LearnDash or LifterLMS	Advanced features, better support
School/University	LearnDash	Group management, prerequisites
Membership Courses	LifterLMS	Built-in memberships
Marketplaces	Tutor LMS	Multi-instructor features

LearnPress Strengths

Best For:

Budget-conscious projects
Simple course structures
Beginners to LMS
Sites with basic needs
Free course delivery

Limitations:

Fewer add-ons than competitors
Basic reporting
Limited automation
Smaller community

Recommended Configurations by Course Type

Educational Institution

Best Settings:

Enable Reviews: Yes
Course Slug: classes
Profile Public: Yes
BuddyPress: Active
Certificates: Enabled

Why: Schools need student interaction, reviews, and certificates for accreditation.

Professional Training

Best Settings:

Enable Reviews: Yes
Course Duration: Yes
Prerequisites: Enabled
Certificates: Enabled
Collections: For bundles

Why: Professional learners need structured paths and recognized certificates.

Hobby/Personal Development

Best Settings:

Enable Reviews: Yes
Profile Public: Optional
Course Duration: Yes
Simple structure

Why: Hobbyists prefer easy-to-follow courses without complex features.

Corporate Training

Best Settings:

Review Guests: No
Profile Public: No
Prerequisites: Enabled
Collections: For training paths

Why: Corporate training requires privacy and structured learning paths.

LearnDash Setup - Alternative LMS option
Tutor LMS - Multi-instructor platform
Sidebar Layouts - Sidebar configuration
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: BuddyX Pro version, LearnPress version, and screenshots

LifterLMS Integration

Create powerful membership sites and online courses with LifterLMS and BuddyX Pro. Build engaging learning experiences with built-in memberships, advanced quizzing, and comprehensive student management.

What You Can Do

With BuddyX Pro's LifterLMS integration, you can:

Membership Management - Built-in membership system without extra plugins
Course Bundles - Group courses into memberships and packages
Advanced Quizzes - Multiple question types with conditional logic
Gamification - Achievements, badges, and certificates
Drip Content - Schedule lesson releases automatically
Student Analytics - Detailed progress tracking and reporting
Email Automation - Triggered emails for engagement
BuddyPress Integration - Connect learners through community features

What BuddyX Pro Adds vs. What LifterLMS Does

It helps to know which side owns what:

LifterLMS provides the courses, memberships, quizzes, certificates, drip content, payments, and student dashboard - all the learning functionality described in this guide.

BuddyX Pro adds the theme-level presentation:

A dedicated stylesheet (assets/css/lifterlms.min.css) that loads automatically when LifterLMS is active, so course and lesson pages match the theme (dark mode included).
Two registered widget areas for the course catalog - Course Archive Lift Sidebar (left) and Course Archive Right Sidebar - which you populate under Appearance → Widgets.
A Customizer control, LifterLMS Archive Sidebar (Appearance → Customize → Sidebar), to choose Left, Right, Both, or None for the course archive, plus the has-lifterlms-sidebar-* body classes that drive the layout.

Everything else (single course, lesson, membership page structure) is rendered by LifterLMS and inherits the theme's global styling.

Prerequisites

Before setting up LifterLMS, ensure you have:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
LifterLMS	7.0+	Free from wordpress.org
PHP	7.4+	Required by LifterLMS

Optional But Recommended:

LifterLMS Advanced Quizzes - Enhanced quiz features
LifterLMS Assignments - Student submissions
LifterLMS Social Learning - Community features
BuddyPress - Social networking and profiles
WooCommerce - Additional payment options

Initial Setup

Step 1: Install LifterLMS

Go to Plugins → Add New
Search for "LifterLMS"
Click Install Now next to LifterLMS by LifterLMS
Click Activate

Step 2: Complete Setup Wizard

After activation, LifterLMS launches a setup wizard:

Welcome Screen
- Click Get Started to begin
- Or skip to dashboard
Pages Setup
- LifterLMS creates required pages:
  - Courses (archive)
  - Memberships (archive)
  - Student Dashboard
  - Checkout
- Click Continue
Currency Settings
- Select currency (USD, EUR, etc.)
- Set currency position
- Set thousands/decimal separator
- Click Continue
Payment Gateways
- Enable Manual Payment (test orders)
- Configure PayPal (if selling)
- Stripe requires add-on
- Click Continue
Starter Courses
- Choose Import Sample Course (recommended)
- Or Start Fresh
- Click Continue
Add-ons
- Review available add-ons
- Install if desired
- Click Finish

Step 3: Verify Integration

After installing LifterLMS, verify theme integration:

Visit your Courses page
Check BuddyX Pro styling is applied
Go to Appearance → Customize
Verify sidebar settings work

If styling looks incorrect:

Clear cache plugins
Deactivate/reactivate theme
Check LifterLMS is active

LifterLMS Settings Overview

Configure core settings before creating courses.

General Settings

Go to LifterLMS → Settings → General

Setting	Recommendation	Why
Course Catalog	Enable	Shows all courses
Membership Catalog	Enable	Shows memberships
Lesson Comments	Optional	Student discussions
Shop Pages	Set permalinks	Clean URLs

Accounts Settings

Go to LifterLMS → Settings → Accounts

Setting	Recommendation
Open Registration	Yes (for public sites)
Required Fields	Email, Name, Password
Account Erasure	Yes (GDPR compliance)
User Login	Email or Username

Checkout Settings

Go to LifterLMS → Settings → Checkout

Setting	Recommendation
Confirm Payment	Yes
Free Enrollment	Automatic
Checkout Fields	Customize as needed
Terms and Conditions	Add page link

Membership Settings

Go to LifterLMS → Settings → Memberships

Setting	Recommendation
Auto-enroll	Configure per membership
Restriction Behavior	Custom message
Sitewide Membership	Optional

Email Settings

Go to LifterLMS → Settings → Emails

Configure automated emails:

Purchase receipts
Enrollment confirmations
Achievement earned
Quiz passed/failed
Lesson complete

Course Archive Display

Control how courses appear on your course catalog page.

Archive Layout

Default Display:

Grid layout (3 columns on desktop)
Course featured image
Course title and excerpt
Instructor name
Course progress (if enrolled)
Price or membership badge
Enrollment button

Course Meta Displayed:

Course difficulty level
Lesson count
Total course length
Student count (if enabled)
Average rating

LifterLMS provides filtering options:

Filter By:

Course category
Course tag
Difficulty level
Instructors

Sort Options:

Date (newest/oldest)
Title (A-Z)
Popularity
Price (low to high)

Course Categories & Tags

Organize courses effectively:

Categories:

Go to Courses → Course Categories
Add categories (e.g., Business, Design, Technology)
Assign when editing courses

Tags:

Go to Courses → Course Tags
Add tags (e.g., beginner, advanced, video-based)
Assign multiple tags per course

Single Course Page

Course Header

The course page displays:

Title Section:

Course title
Course tagline/subtitle
Course category breadcrumb
Difficulty level badge

Course Image:

Featured image or video
Full-width or contained

Sidebar (Right):

Price or "Free" badge
Enrollment/purchase button
Course includes:
- Lessons count
- Quizzes count
- Course length
- Difficulty level
- Certificate availability
- Membership requirement

Course Content Sections

Syllabus:

Sections and lessons
Lesson titles
Lesson previews (if enabled)
Quiz indicators
Free preview badges
Lock icons for restricted content

About:

Course description
What you'll learn
Course requirements
Target audience

Instructor:

Instructor bio
Profile photo
Courses taught
Student count
Contact/social links

Reviews:

Overall rating
Star breakdown
Student reviews
Review submission form

FAQs (if configured):

Common questions
Expandable answers

Membership Integration

Creating Memberships

LifterLMS includes built-in memberships:

Go to LifterLMS → Memberships
Click Add New
Set membership name
Configure access:
- Auto-enroll courses
- Restrict pages/posts
- Bundle multiple courses
Set pricing:
- One-time
- Recurring (monthly/yearly)
- Free
Publish membership

Membership Features

Access Control:

Grant access to specific courses
Restrict content site-wide
Custom restriction messages
Drip content scheduling

Pricing Plans:

Single payment
Recurring subscriptions
Payment plans (installments)
Free trial periods

Member Dashboard:

Enrolled courses
Membership status
Renewal dates
Upgrade options

Lesson Interface

Lesson Layout

Components:

Lesson title
Lesson content area
Video player (if video lesson)
Text/mixed content
Navigation sidebar (right)
Previous/Next buttons
Mark Complete button

Navigation Elements:

Course outline/syllabus
Current lesson highlighted
Overall progress bar
Section titles
Expandable lesson lists
Quiz indicators
Lock icons

Lesson Types

Content Formats:

Video lessons (embedded)
Text lessons
Audio lessons
Downloadable materials
External resources
Presentations

Lesson Progression

Controls:

Drip content (time-based release)
Prerequisites (complete before next)
Quiz requirements
Manual advancement
Automatic completion

Quiz System

Quiz Creation

Create powerful quizzes:

Add quiz to course
Configure quiz settings
Add questions
Set grading options

Question Types

Standard Types:

True/False
Multiple Choice (single)
Multiple Choice (multiple)
Fill in the Blank
Scale (1-5 rating)
Free Response/Essay

Advanced Types (with add-on):

Image Choice
Matching
Ordering
Code snippets
Math equations

Quiz Settings

Setting	Options
Attempts	Unlimited or limited
Passing Grade	Set percentage
Time Limit	Optional countdown
Question Randomization	Shuffle questions
Show Correct Answers	After attempt or never
Question Bank	Random from pool

Quiz Results

Student View:

Score achieved
Percentage
Pass/Fail status
Correct answers (if enabled)
Instructor feedback
Certificate earned (if passed)
Retake button

Instructor View:

All attempts
Grade essay questions
Provide feedback
Manual grading

Assignments

With LifterLMS Assignments add-on:

Student Submissions

Students can:

Read assignment instructions
Upload files (PDFs, docs, images)
Add text response
Submit for grading
View instructor feedback

Instructor Grading

Instructors can:

View all submissions
Download submitted files
Add comments
Assign grade
Mark complete/incomplete

Grading Options:

Points/percentage
Pass/Fail
Custom rubric
Written feedback

Achievements & Certificates

Achievements System

Create Achievements:

Go to LifterLMS → Achievements
Click Add New
Design achievement badge
Set earning criteria
Configure notification email

Achievement Triggers:

Complete course
Pass quiz
Complete section
Earn points
Custom actions

Certificate System

Create Certificates:

Go to LifterLMS → Certificates
Click Add New
Design certificate template:
- Add merge codes (student name, date, course)
- Upload background image
- Set fonts and styling
Assign to courses

Certificate Features:

Personalized for each student
Downloadable PDF
Unique verification URL
Award date tracking
Sequential numbering

Student Dashboard

Students access dashboard at /dashboard/ (or custom slug).

Dashboard Sections

My Courses:

Enrolled courses
Course progress bars
Continue learning buttons
Completion percentage
Course certificates

My Achievements:

Earned achievements
Achievement gallery
Share on social media

My Certificates:

Earned certificates
Download as PDF
View and share

My Memberships:

Active memberships
Renewal dates
Upgrade options
Payment history

Edit Account:

Profile information
Email preferences
Password change
Delete account

Orders:

Purchase history
Order details
Receipts
Refund requests

Notifications:

System notifications
Course updates
Achievement alerts

Reporting & Analytics

Student Reports

View individual student data:

Go to LifterLMS → Reporting → Students
Select student
View:
- Enrolled courses
- Course progress
- Quiz attempts
- Certificates earned
- Time spent learning

Course Reports

Track course performance:

Go to LifterLMS → Reporting → Courses
Select course
View:
- Enrollment numbers
- Completion rates
- Average quiz scores
- Student engagement
- Revenue generated

Quiz Reports

Analyze quiz performance:

Average scores
Pass/fail rates
Question difficulty
Time to complete
Most missed questions

Sales Reports

Track revenue (if selling courses):

Total sales
Revenue by course
Revenue by membership
Payment gateway breakdown
Refund tracking

Engagement Tools

Email Notifications

Automated emails for:

Course enrollment
Lesson completion
Quiz results
Achievement earned
Certificate earned
Membership expiring
Payment received

Customize Emails:

Go to LifterLMS → Settings → Emails
Select email type
Edit subject and content
Use merge codes for personalization
Save changes

Engagement Triggers

Set up automatic actions:

Award achievement on quiz pass
Send email after lesson complete
Grant certificate on course finish
Enroll in next course automatically

BuddyPress Integration

When BuddyPress is active:

Profile Integration:

Course progress on profiles
Achievements display
Certificates showcase
Instructor badges

Activity Stream:

"Jane enrolled in Course X"
"John earned Achievement Y"
"Sarah completed Course Z"
Course discussions

Groups Integration:

Create course groups
Group enrollments
Private group courses
Study groups

Setting Up Course Groups

Install BuddyPress
Create group for each course
Auto-add enrolled students (with Social Learning add-on)
Enable group discussions
Share course materials

Monetization Options

Built-in Payment Processing

Manual Payment:

Invoice-based
Admin approval required
Good for corporate training

PayPal Standard:

One-time payments
Subscriptions
Free with LifterLMS

Add-on Payment Gateways

Stripe:

Credit card processing
Subscription support
SCA compliance

Authorize.net:

Credit card processing
Recurring billing

WooCommerce Integration:

Use WooCommerce for payments
Advanced payment options
Existing WooCommerce setup

Pricing Options

Course Pricing:

Free
One-time payment
Recurring subscription
Payment plan (installments)
Members-only (via membership)

Membership Pricing:

Free membership
Monthly subscription
Yearly subscription
Lifetime access
Free trial period

Advanced Features

Drip Content

Schedule content release:

Options:

Specific date
Days after enrollment
Days after prerequisite
Immediately

Per Lesson:

Edit lesson
Set Drip Method
Configure timing
Save lesson

Prerequisites

Control lesson access:

Edit lesson
Set Prerequisite Lesson
Student must complete prerequisite first
Save lesson

Also Works For:

Quiz prerequisites
Course prerequisites (via membership)
Section prerequisites

Groups & Team Access

With Groups add-on:

Features:

Bulk enrollments
Team licenses
Corporate training
Progress tracking per group
Group administrators

Customization Options

BuddyX Pro adds one LifterLMS-specific sidebar control - for the course archive (catalog):

Go to Appearance → Customize → Sidebar
Set LifterLMS Archive Sidebar to Left, Right, Both, or None
Populate the Course Archive Lift Sidebar and Course Archive Right Sidebar widget areas under Appearance → Widgets

Single course, lesson, and membership pages follow the theme's global styling rather than a per-page sidebar control.

Custom Colors

BuddyX Pro theme colors apply to LifterLMS:

Primary color for buttons
Link colors
Progress bars
Badges

Custom CSS

Add custom styling:

/* Customize course card */
.llms-course-list .llms-loop-item {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Change enroll button */
.llms-button-primary {
    background: #2563eb;
    border-radius: 8px;
}

/* Style progress bars */
.llms-progress {
    background: #2563eb;
}

Common Questions

How do I change the course URL?

Go to LifterLMS → Settings → General
Click Catalog & Shop
Find Course Permalink Base
Change slug
Save changes
Go to Settings → Permalinks and save

Can I create course bundles?

Yes, two methods:

Method 1: Memberships

Create membership
Auto-enroll multiple courses
Sell membership access

Method 2: Access Plans

Add multiple courses to membership
Single purchase price

How do I enable course previews?

Edit course
Go to Syllabus tab
Edit a lesson
Enable Free Lesson
Save lesson
Lesson viewable before enrollment

Can students download certificates?

Yes, students can:

Go to Dashboard → My Certificates
View certificate
Click Download or Print
Certificate saves as PDF

How do I create recurring subscriptions?

Edit course or membership
Go to Access Plans
Click Add Access Plan
Set Billing Frequency:
- Monthly
- Yearly
- Custom interval
Set subscription price
Save plan

Why aren't quiz results showing?

Common causes:

Quiz not completed:
- Student must submit quiz
- All questions must be answered
Manual grading required:
- Essay questions need grading
- Instructor must review
Quiz settings:
- Check "Show correct answers" setting
- May be disabled by instructor

How do I add instructors to courses?

Edit course
Find Author dropdown in sidebar
Select instructor (must be WordPress user)
Update course

For multiple instructors:

Use third-party plugin
Or list in course description

Can I import courses from other LMS?

Not directly, but:

Manually recreate course structure
Copy/paste content
Use third-party migration services
Hire developer for bulk import

Best LMS Choice by Use Case

LifterLMS vs Other Platforms

Use Case	Best Choice	Why
Membership Sites	LifterLMS	Built-in memberships
Course Bundles	LifterLMS	Native bundling
Gamification	LifterLMS	Achievements system
Course Marketplace	Tutor LMS	Multi-instructor features
Budget Projects	LearnPress	Free, lightweight
Advanced Quizzing	LearnDash or LifterLMS	Both excellent

LifterLMS Strengths

Best For:

Membership-based learning
Course subscriptions
Gamified learning
Corporate training
Email automation
Detailed analytics

Limitations:

Expensive add-ons
No multi-instructor (marketplace)
Steeper learning curve
Resource intensive

Recommended Configurations by Use Case

Membership Learning Platform

Best Settings:

Create memberships (not individual courses)
Recurring subscriptions
Drip content enabled
Multiple access tiers
Achievements for engagement

Why: Memberships provide recurring revenue and encourage long-term engagement.

Corporate Training

Best Settings:

Groups add-on
Manual payment processing
Assignments enabled
Detailed reporting
Certificates required

Why: Corporate needs bulk enrollments, tracking, and completion certificates.

Online School/University

Best Settings:

Prerequisites enabled
Advanced quizzes
Assignments enabled
Certificates
BuddyPress for community

Why: Academic settings need structured progression and student interaction.

Professional Certification

Best Settings:

Single course access
High passing grade (80%+)
Certificates with verification
Time-limited quizzes
Prerequisites

Why: Certification requires rigor and verified completion.

LearnDash Setup - Alternative LMS platform
Tutor LMS - Marketplace-focused LMS
Sidebar Layouts - Sidebar configuration
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: BuddyX Pro version, LifterLMS version, and screenshots

Sensei LMS Integration

Build simple, effective online courses with Sensei LMS and BuddyX Pro. Created by Automattic (makers of WordPress.com), Sensei offers a straightforward approach to e-learning without overwhelming features.

What You Can Do

With BuddyX Pro's Sensei LMS integration, you can:

Simple Course Creation - No-fuss course building with intuitive interface
WooCommerce Integration - Native integration for selling courses
Clean Course Layouts - Minimalist, distraction-free learning
Student Progress Tracking - Visual progress bars and completion status
Quiz Management - Essential quiz types without complexity
Student Profiles - Track enrolled courses and achievements
Mobile Responsive - Optimized for learning on any device
BuddyPress Compatible - Add community features to learning

Prerequisites

Before setting up Sensei LMS, ensure you have:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
Sensei LMS	4.0+	Free from wordpress.org
PHP	7.4+	Required by Sensei

Optional But Recommended:

WooCommerce - Required for selling courses
Sensei Pro - Advanced features and support
BuddyPress - Community features and student networking
Sensei Content Drip - Schedule lesson releases

Initial Setup

Step 1: Install Sensei LMS

Go to Plugins → Add New
Search for "Sensei LMS"
Click Install Now next to Sensei LMS by Automattic
Click Activate

Step 2: Complete Setup Wizard

After activation, Sensei launches a setup wizard:

Welcome Screen
- Click Let's Go to start
- Or skip wizard
Purpose Selection
- Choose your use case:
  - Share knowledge
  - Generate income
  - Educate students
  - Train employees
- Click Continue
Features Setup
- Select features to enable:
  - Course themes
  - Learning mode
  - Course progress
- Click Continue
Pages Setup
- Sensei creates required pages:
  - Courses (archive)
  - My Courses (student dashboard)
- Click Continue
WooCommerce
- Install WooCommerce (if selling courses)
- Skip if offering free courses
- Click Continue
Sample Content
- Import sample course (recommended)
- Skip if starting fresh
- Click Continue
Newsletter
- Subscribe to Sensei newsletter (optional)
- Click Finish Setup

Step 3: Verify Integration

After installing Sensei, verify theme integration:

Visit your Courses page
Check BuddyX Pro styling is applied
Navigate to a course
Verify the theme's global sidebar and layout apply

If styling looks incorrect:

Clear caching plugins
Refresh permalinks: Settings → Permalinks → Save
Verify both Sensei and BuddyX Pro are active

Sensei Settings Overview

Configure core Sensei settings before creating courses.

General Settings

Go to Sensei LMS → Settings → General

Setting	Recommendation	Why
Course Page	Auto-created page	Central course listing
My Courses Page	Auto-created page	Student dashboard
Course Completion	Manual	Student control
Lesson Comments	Enable	Student engagement

Course Settings

Go to Sensei LMS → Settings → Courses

Setting	Recommendation
Course Author	Display
Course Prerequisite	Enable
Featured Courses	Enable
Course Archive	Grid layout

Lesson Settings

Go to Sensei LMS → Settings → Lessons

Setting	Recommendation
Auto-complete Lessons	No
Lesson Prerequisites	Enable
Video Embeds	YouTube, Vimeo

Learner Settings

Go to Sensei LMS → Settings → Learners

Setting	Recommendation
Public Profiles	Yes
Learner Dashboard	My Courses page

WooCommerce Settings

Go to Sensei LMS → Settings → WooCommerce

Only configure if selling courses:

Setting	Description
Enable WooCommerce	Turn on integration
Course Products	Auto-create products
Add to Cart Button	Show on courses

Course Archive Display

Control how courses appear on your course catalog page.

Archive Layout Options

Default Display:

Grid layout (3 columns desktop, 2 tablet, 1 mobile)
Course featured image
Course title
Short description
Instructor/author
Lesson count
Category
Price or "Free" badge

Course Meta Shown:

Number of lessons
Course category
Course difficulty (if set)
Student count (optional)

Course Filtering

Filter Options:

All courses
Active courses (student enrolled)
Completed courses
Featured courses

Search Functionality:

Search by course title
Search by instructor
Filter by category

Course Categories

Organize courses with categories:

Go to Sensei LMS → Course Categories
Click Add New Category
Enter category name
Add description (appears on category archive)
Click Add New Course Category
Assign categories when editing courses

Category Display:

Category archive pages
Filter dropdown on course archive
Breadcrumb navigation

Single Course Page

Course Header

The course page header displays:

Title Section:

Course title
Course category
Breadcrumb navigation
Featured image/video

Course Meta:

Instructor name and avatar
Number of lessons
Course length/duration
Difficulty level
Prerequisite courses (if any)

Enrollment Section:

Price or "Free"
"Start Course" or "Add to Cart" button
Already enrolled status
Completion percentage (if enrolled)

Course Lessons List

Lessons Display:

Lesson titles
Lesson numbers
Preview badges (if enabled)
Completion checkmarks (if enrolled)
Lock icons (if prerequisite not met)

Lesson Organization:

Listed in order
Expandable modules (with Sensei Pro)
Clear progression path

Course Description

Sections:

About this course
What you'll learn
Course requirements
Target audience
Instructor bio

Learning Mode

Sensei's distraction-free learning interface.

Enabling Learning Mode

Go to Sensei LMS → Settings → General
Enable Learning Mode
Save changes
Students see full-screen learning interface

Learning Mode Features

Interface:

Full-screen lesson content
Minimal distractions
Progress sidebar
Previous/Next navigation
Exit to course button

Progress Sidebar:

Course outline
Current lesson highlighted
Overall progress percentage
Quick lesson navigation
Completion checkmarks

Lesson Layout (Learning Mode)

Components:

Lesson title
Lesson content
Video player (if video lesson)
Text content
Downloadable files
Complete lesson button
Lesson navigation

Quiz System

Creating Quizzes

Sensei includes essential quiz functionality:

Add quiz to lesson
Configure quiz settings
Add questions
Set passing grade
Publish quiz

Question Types

Available Types:

Multiple Choice (single answer)
Multiple Choice (multiple answers)
True/False
Gap Fill (fill in the blank)
Single Line (short answer)
Multi Line (essay)
File Upload

Quiz Settings

Setting	Options
Passing Grade	Set percentage (default: 100%)
Enable Quiz Reset	Allow retakes
Randomize Questions	Shuffle order
Show Answers	After completion
Auto-grade	Except essays

Quiz Results

Student View:

Score achieved
Pass/fail status
Correct answers (if enabled)
Explanation for answers
Retake button (if enabled)
Next lesson button (if passed)

Teacher View:

All student attempts
Grade essays manually
View submission details
Reset student quiz

Student Dashboard

Students access their dashboard at /my-courses/ (or custom page).

Dashboard Sections

Active Courses:

Currently enrolled courses
Progress percentage per course
Continue learning button
Course thumbnails
Last accessed date

Completed Courses:

Finished courses
Completion date
Final grade/score
Certificate (if available)
Review course option

Course Progress:

Visual progress bars
Lessons completed / Total lessons
Quizzes passed
Overall percentage

Course Progression

Lesson Completion

Completion Methods:

Student reads/watches lesson
Clicks "Complete Lesson" button
System marks as complete
Next lesson unlocks (if sequential)

Auto-completion:

Optional setting
Completes when student leaves page
Not recommended for most courses

Prerequisites

Course Prerequisites:

Edit course
Set Prerequisite Course
Students must complete prerequisite first
Prerequisite shows on course page

Lesson Prerequisites:

Edit lesson
Set Prerequisite Lesson
Lesson locked until prerequisite complete
Lock icon shows in course outline

WooCommerce Integration

Selling Courses

Sensei integrates natively with WooCommerce:

Setup:

Install WooCommerce
Enable in Sensei → Settings → WooCommerce
Sensei creates products automatically

How It Works:

Each course becomes a WooCommerce product
Students add to cart
Complete checkout
Auto-enrolled after purchase

Course Pricing

Setting Price:

Edit course
Find WooCommerce Product section
Set price
Choose Simple or Variable product
Configure WooCommerce options
Update course

Pricing Options:

Free courses (no product)
One-time payment
Subscription (with WooCommerce Subscriptions)
Course bundles (WooCommerce Grouped Products)

Payment Gateways

Use WooCommerce payment gateways:

Stripe
PayPal
Square
Other WooCommerce gateways

Grading & Certificates

Manual Grading

For essay questions and file uploads:

Go to Sensei LMS → Grading
View student submissions
Click Grade
Review submission
Add grade and feedback
Save grading

Grading Interface:

View submitted answers
Add points/percentage
Provide written feedback
Mark as graded

Certificates (Sensei Pro)

With Sensei Pro:

Create Certificates:

Go to Sensei LMS → Certificates
Design certificate template
Add merge codes (name, date, course)
Assign to courses

Certificate Awards:

Automatic on course completion
Based on passing grade
Downloadable PDF
Student dashboard display

Reporting & Analytics

Student Reports

View individual learner progress:

Go to Sensei LMS → Learners
Select student
View:
- Enrolled courses
- Course progress
- Quiz results
- Completion dates

Course Reports

Track course performance:

Go to Sensei LMS → Courses
Select course
Click Learners tab
View:
- Total enrollments
- Active learners
- Completed students
- Average grade

Lesson Analytics

View lesson data:

Lessons completed
Average time spent
Completion rate
Drop-off points

Quiz Analytics

Track quiz performance:

Average score
Pass/fail rate
Question difficulty
Most missed questions

BuddyPress Integration

When BuddyPress is active:

Profile Integration:

Courses on member profiles
Display enrolled courses
Show course progress
Achievement badges

Activity Stream:

"John enrolled in Course X"
"Sarah completed Course Y"
"Mike passed Quiz Z"
Course updates

Private Messaging:

Message instructors
Student-to-student messaging
Group messaging

Course Groups

Create BuddyPress groups for courses:

Install BuddyPress
Create group per course
Add enrolled students
Enable discussions
Share course materials

Group Features:

Course discussions
Study groups
Peer support
Additional resources

Sensei Pro Features

Content Drip

Schedule lesson releases:

Drip Options:

Specific date
Days after enrollment
Days after previous lesson
Immediately

Benefits:

Paced learning
Reduces overwhelm
Increases engagement
Better completion rates

Interactive Blocks

Enhanced Gutenberg blocks:

Blocks Available:

Flashcards
Hotspots
Interactive video
Tasklist
Question blocks

Priority Support

Sensei Pro Benefits:

Priority email support
Live chat support
Documentation access
Feature requests

Advanced Features

Pro Add-ons:

Certificates
Content drip
Interactive blocks
WooCommerce Subscriptions integration
Groups (cohort learning)

Customization Options

How BuddyX Pro styles Sensei

Sensei integration in BuddyX Pro is styling only. The theme ships a dedicated stylesheet (assets/css/sensei.min.css) that loads automatically whenever Sensei is active, so course archives, single courses, lessons, quizzes, and the learner dashboard inherit the theme's look. There are no Sensei-specific Customizer controls.

What this means:

Sensei pages use the theme's global Sidebar setting (Appearance → Customize → Sidebar), the same as any other page - there is no separate Sensei sidebar option.
Sensei's own Learning Mode renders full-width regardless of the sidebar setting.
Theme colors from Appearance → Customize → Colors & Skin flow through to Sensei buttons, links, progress bars, and badges via the shipped CSS.
Dark mode is supported through the same stylesheet.

For anything beyond this, use the custom CSS below.

Theme Colors

BuddyX Pro theme colors apply to Sensei through the shipped stylesheet:

Button colors
Link colors
Progress bars
Badges

Adjust them via Appearance → Customize → Colors & Skin.

Custom CSS

Add custom styling:

/* Customize course card */
.sensei-course-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Style start course button */
.sensei-course-enroll {
    background: #2563eb;
    border-radius: 8px;
}

/* Progress bar color */
.sensei-progress-bar {
    background: #10b981;
}

Common Questions

How do I change the Courses page URL?

Go to Sensei LMS → Settings → General
Create new page with preferred slug
Set as Course Page
Save settings
Go to Settings → Permalinks and save

Can I create course bundles?

Yes, using WooCommerce:

Method 1: Grouped Products

Create grouped product in WooCommerce
Add course products to group
Set bundle price
Students get all courses

Method 2: Subscriptions

Install WooCommerce Subscriptions
Create subscription product
Grant access to multiple courses
Recurring billing

How do I enable course previews?

Edit course
Edit a lesson
Find Lesson Preview option
Enable preview
Save lesson
Lesson viewable before enrollment

Can students download lessons?

Not built-in, but you can:

Method 1: Add Download Links

Add links in lesson content
Link to PDF, docs, files
Use WordPress Media Library

Method 2: Use Plugin

Install download manager plugin
Embed downloads in lessons
Restrict to enrolled students

How do I add multiple instructors?

Sensei shows course author as instructor:

Change Instructor:

Edit course
Change Author in sidebar
New author becomes instructor

For Multiple Instructors:

Not supported natively
List additional instructors in course description
Or use third-party plugin

Why can't students access lessons?

Common causes:

Not enrolled:
- Student must enroll or purchase
- Check enrollment status
Prerequisite not met:
- Check prerequisite course
- Verify prerequisite lesson completion
Course not published:
- Course must be published
- Check course status
Payment not complete:
- Verify WooCommerce order status
- Check payment received

How do I reset student progress?

Go to Sensei LMS → Learners
Find student
Click student name
Find course
Click Reset Progress
Confirm reset

This removes:

All lesson completion
Quiz attempts
Course progress

Can I import courses from other LMS?

Not directly supported:

Options:

Manually recreate courses
Copy/paste content
Hire developer for migration
Use third-party migration service

Best LMS Choice by Use Case

Sensei vs Other Platforms

Use Case	Best Choice	Why
Simple Courses	Sensei	Easy, no bloat
WooCommerce Sites	Sensei	Native integration
Budget Projects	LearnPress or Sensei	Both free, simple
Advanced Features	LearnDash or LifterLMS	More functionality
Course Marketplace	Tutor LMS	Multi-instructor
Memberships	LifterLMS	Built-in memberships

Sensei Strengths

Best For:

WordPress beginners
Simple course structures
WooCommerce integration
Minimalist approach
Automattic ecosystem users
Clean, modern UI

Limitations:

Fewer features than competitors
Limited customization
No built-in memberships
Basic reporting
Requires Pro for advanced features

Recommended Configurations by Use Case

Educational Institution

Best Settings:

Learning Mode: Enabled
Prerequisites: Enabled
Lesson Comments: Yes
Public Profiles: Yes
BuddyPress: Active

Why: Schools need structured learning paths and student interaction.

Professional Training

Best Settings:

Learning Mode: Yes
Prerequisites: Yes
Passing Grade: 80%+
Quiz Reset: Limited attempts
Certificates: Yes (Pro)

Why: Professional courses need rigor and verified completion.

Hobby/Personal Development

Best Settings:

Learning Mode: Optional
Prerequisites: Optional
Lesson Comments: Yes
Free courses
Simple structure

Why: Hobbyists prefer easy, flexible learning without pressure.

Corporate Training

Best Settings:

Learning Mode: Yes
Prerequisites: Yes
Private courses
Manual enrollment
Detailed reporting

Why: Corporate needs controlled access and compliance tracking.

LearnDash Setup - Advanced LMS option
LearnPress - Another free LMS
Tutor LMS - Marketplace platform
Sidebar Layouts - Sidebar configuration
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: BuddyX Pro version, Sensei LMS version, and screenshots

Tutor LMS Integration

Build a comprehensive online learning platform with Tutor LMS and BuddyX Pro. Create courses, manage students, and monetize your knowledge with this feature-rich, modern LMS solution.

What You Can Do

With BuddyX Pro's Tutor LMS integration, you can:

Multi-Instructor Platform - Allow multiple teachers to create and sell courses
Beautiful Course Layouts - Modern, card-based course displays
Interactive Learning - Video lessons, quizzes, assignments, and live classes
Advanced Analytics - Track student progress and course performance
Course Marketplace - Create Udemy-style course marketplaces
Certification System - Award verified certificates on completion
Monetization Options - Sell courses with WooCommerce or Easy Digital Downloads
BuddyPress Integration - Build learning communities with social features

Prerequisites

Before setting up Tutor LMS, ensure you have:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
Tutor LMS	2.0+	Free from wordpress.org
PHP	7.4+	Required by Tutor LMS

Optional But Recommended:

Tutor LMS Pro - Advanced features and add-ons
WooCommerce - For selling courses
BuddyPress - Community features and student networking
Elementor - Visual course page building (Pro feature)

Initial Setup

Step 1: Install Tutor LMS

Go to Plugins → Add New
Search for "Tutor LMS"
Click Install Now next to Tutor LMS by Themeum
Click Activate

Step 2: Complete Setup Wizard

After activation, Tutor LMS launches a setup wizard:

Welcome Screen
- Click Let's Start to begin
- Or skip to dashboard
Basic Configuration
- Set course permalink base (default: courses)
- Set lesson permalink base (default: lessons)
- Click Continue
Instructor Setup
- Enable Public Course (anyone can create)
- Or Instructor Only (admin approval required)
- Click Continue
Monetization
- Choose Free Courses or
- Select WooCommerce or Easy Digital Downloads
- Install if not present
- Click Continue
Email Notifications
- Configure instructor notifications
- Set student notifications
- Click Continue
Finish
- Click Go to Dashboard
- Or Create First Course

Step 3: Verify BuddyX Pro Integration

After installing Tutor LMS, verify the integration:

Go to your site's course page
Verify BuddyX Pro styling is applied
Check that custom colors work properly

Note: BuddyX Pro automatically detects Tutor LMS color settings. If you use Tutor's default color preset, the theme applies custom styling for better consistency.

Tutor LMS Settings Overview

Configure core Tutor LMS settings before creating courses.

General Settings

Go to Tutor LMS → Settings → General

Setting	Recommendation	Why
Students per page	20	Balanced for performance
Enable Public Course	Your choice	Open or instructor-only
Hide Course Price	No	Show pricing clearly
Course Archive Filter	Yes	Helps students find courses

Course Settings

Go to Tutor LMS → Settings → Course

Setting	Recommendation
Display Course Instructors	Yes
Course Enrollment Limit	Optional
Enable Course Duration	Yes
Enable Course Level	Yes
Enable Course Benefits	Yes
Enable Course Requirements	Yes

Lesson Settings

Go to Tutor LMS → Settings → Lesson

Setting	Recommendation
Video Source	YouTube, Vimeo, HTML5
Autoplay	No (user preference)
Auto-complete Video	Yes
Hide Lesson Duration	No

Quiz Settings

Go to Tutor LMS → Settings → Quiz

Setting	Recommendation
Quiz Per Page	10 questions
Hide Quiz Time	No
Quiz Attempts	Unlimited
Passing Grade	80%

Instructor Settings

Go to Tutor LMS → Settings → Instructor

Setting	Recommendation
Instructor Registration	Yes (for marketplaces)
Instructor Approval	Manual (quality control)
Public Profile	Yes
Instructor Commission	Set % for marketplace

Course Archive Display

Control how courses display on your course listing page.

Archive Layout Options

Default Display:

Responsive grid layout (3 columns on desktop)
Course thumbnail/featured image
Course title and excerpt
Instructor info with avatar
Rating and review count
Price or "Free" badge
Student enrollment count
Lesson count

Archive Filters

Tutor LMS provides built-in filtering:

Filter Options:

Search by keyword
Filter by category
Filter by difficulty level
Filter by price (Free/Paid)
Sort by (Popular, Newest, Price)

Enabling Filters:

Go to Tutor LMS → Settings → General
Enable Course Archive Filter
Save changes
Filters appear above course grid

Course Categories

Organize courses with categories:

Go to Tutor LMS → Course Categories
Click Add New Category
Enter category name and slug
Add description (optional)
Upload category image (optional)
Click Add New Course Category

Category Display:

Category archive pages
Filter dropdown on course archive
Course single page breadcrumb

Single Course Page

Course Header Section

The course page header displays:

Left Side:

Course title
Short description/tagline
Rating and review count
Student enrollment count
Last updated date
Course category

Right Side (Sidebar):

Course preview video/image
Price or "Free" badge
Add to Cart / Enroll button
Course includes:
- Duration
- Lessons count
- Quizzes count
- Skill level
- Language
- Certificate availability

Course Content Tabs

Overview Tab:

Full course description
What you'll learn (benefits)
Course requirements
Target audience

Curriculum Tab:

Sections and lessons
Lesson duration
Lesson previews (if enabled)
Quiz indicators
Assignment markers

Instructor Tab:

Instructor bio
Instructor rating
Total students taught
Total courses
Other courses by instructor

Reviews Tab:

Course rating breakdown
Student reviews
Review submission form

Q&A Tab:

Student questions
Instructor answers
Community discussions

Lesson Interface

Lesson Player

Components:

Video player (top)
Lesson content below video
Lesson navigation sidebar (right)
Previous/Next buttons
Mark complete button

Video Features:

Autoplay option
Playback speed control
Quality selection
Fullscreen mode
Auto-complete on video end

Navigation Elements:

Full course curriculum
Current lesson highlighted
Progress percentage
Section expand/collapse
Quick jump to any lesson
Lock icons for locked content

Lesson Types

Supported Formats:

Video lessons (YouTube, Vimeo, HTML5)
Text lessons
Mixed content (video + text)
Downloadable materials
External resources

Quiz System

Quiz Interface

Quiz Header:

Quiz title and description
Time limit display
Total questions
Total marks
Passing grade
Attempts remaining

Question Types:

True/False
Multiple Choice (single answer)
Multiple Choice (multiple answers)
Fill in the Blanks
Short Answer
Essay/Open Ended
Matching
Image Matching
Image Answering
Ordering

Quiz Taking Experience

Features:

Question navigation
Mark for review
Time remaining countdown
Auto-submit on time end
Save progress
Review before submit

Quiz Results

Results Display:

Score achieved
Percentage
Pass/Fail status
Correct answers (if enabled)
Question review
Instructor feedback
Retake option

Assignment System

Assignment Submission

Students can:

View assignment instructions
Upload files (PDF, DOC, images)
Add text submission
Submit for review
Track submission status

Assignment Grading

Instructors can:

View submissions
Download files
Add comments
Assign grade/marks
Approve or reject

Grading Options:

Pass/Fail
Points/Marks
Percentage
Letter grade

Student Dashboard

Dashboard Sections

Students access dashboard at /my-dashboard/ (or custom slug).

1. My Profile

Profile photo
Bio and description
Social links
Edit profile button

2. Enrolled Courses

Active courses
Course progress bars
Continue learning buttons
Completion percentage
Course thumbnails

3. Active Courses

Currently learning
Recent activity
Next lessons

4. Completed Courses

Finished courses
Completion date
Certificate download

5. My Quiz Attempts

Quiz history
Scores achieved
Review attempts
Retake quizzes

6. My Assignments

Submitted assignments
Grading status
Instructor feedback
Pending submissions

7. Purchase History (if selling)

Order history
Course purchases
Download invoices

8. Settings

Profile settings
Password change
Notification preferences
Social profiles

Instructor Dashboard

Instructor Features

Instructors access features at /instructor-dashboard/.

Dashboard Overview:

Total courses
Total students
Total earnings (if selling)
Ratings overview

Create Course:

Course builder
Drag-and-drop curriculum
Add lessons, quizzes, assignments
Course settings
Publish or draft

My Courses:

View all courses
Edit courses
Course analytics
Student enrollment

Earnings (Pro):

Revenue reports
Payout history
Commission tracking
Withdrawal requests

Students:

Enrolled students list
Student progress
Course-wise students
Export student data

Reviews:

Course reviews
Reply to reviews
Rating analytics

Quiz Attempts:

View attempts
Grade essay questions
Send feedback

Assignments:

View submissions
Grade assignments
Provide feedback
Download submissions

Withdrawals (Pro):

Request payouts
View payout history
Set payment method

Settings:

Profile settings
Social links
Payment info
Notification preferences

Certificate System

Enabling Certificates

Go to Tutor LMS → Settings → Course
Enable Certificate System
Save changes

Creating Certificates

Go to Tutor LMS → Certificates
Click Add New
Design certificate:
- Add course title
- Add student name
- Add completion date
- Add instructor signature
- Customize styling
Publish template

Assigning Certificates

Per Course:

Edit course
Go to Course Settings
Select certificate template
Save course

Requirements:

Student completes 100% of course
Passes all required quizzes
Submits all assignments

Student Certificate Access

Students can:

View in dashboard
Download as PDF
Share certificate URL
Print certificate

BuddyPress Integration

When BuddyPress is active:

Student Connections:

View classmate profiles
Send friend requests
Private messaging
Activity streams

Course Activities:

"John enrolled in Course X"
"Jane completed Course Y"
"Mike achieved 95% in Quiz Z"

Study Groups:

Create course groups
Group discussions
Peer support
File sharing

Setting Up Course Groups

Install and activate BuddyPress
Create group: BuddyPress → Groups → Add New
Name group after course
Set as Public/Private/Hidden
Link in course description
Invite enrolled students

Monetization Options

WooCommerce Integration

Setup:

Install WooCommerce
Go to Tutor LMS → Settings → Monetization
Select WooCommerce
Save changes

Features:

Course products in WooCommerce
Cart and checkout
Payment gateways
Order management
Tax support
Coupons and discounts

Easy Digital Downloads

Setup:

Install Easy Digital Downloads
Select EDD in monetization settings
Configure payment gateways

Subscription Courses (Pro)

With Tutor LMS Pro:

Monthly/yearly subscriptions
Recurring revenue
Membership integration
Drip content

Marketplace Features

Multi-Instructor Platform

Enable Marketplace:

Go to Tutor LMS → Settings → Instructor
Enable Instructor Registration
Set Commission Rate (e.g., 80% to instructor)
Enable Withdrawal Method

Instructor Commissions:

Set global commission rate
Or per-instructor rates (Pro)
Automated payout calculations
Withdrawal requests

Withdrawal Methods:

PayPal
Bank transfer
Stripe Connect (Pro)
Custom methods

Advanced Features (Pro)

Course Bundles

Group courses into bundles:

Create bundle products
Discounted pricing
Sell multiple courses together

Prerequisites

Set course dependencies:

Edit course
Go to Course Settings
Add prerequisite courses
Students must complete prerequisites first

Drip Content

Schedule content release:

Unlock lessons on schedule
Days after enrollment
Specific dates
Sequential unlocking

Live Classes (Pro)

Integrate with Zoom:

Schedule live sessions
Automatic Zoom links
Recording access
Attendance tracking

Gradebook (Pro)

Track student performance:

Overall grades
Course-wise grades
Export reports
Grade analytics

Customization Options

Color Customization

BuddyX Pro integrates with Tutor's color settings:

Go to Tutor LMS → Settings → Design
Choose Color Preset Type:
- Tutor Default - Uses Tutor colors
- BuddyX Custom - Uses theme colors

If using Tutor Default:

Set primary color
Set secondary color
Customize button colors
Set hover states

Typography Settings

Go to Appearance → Customize → Typography

Theme typography applies to:

Course titles
Lesson content
Quiz questions
Dashboard elements

Custom CSS

Add custom styling:

Go to Appearance → Customize → Additional CSS
Add Tutor-specific styles

Example CSS:

/* Customize course card */
.tutor-course-card {
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Change enroll button */
.tutor-btn-primary {
    background: #2563eb;
    border-radius: 8px;
}

Common Questions

How do I change the course page URL?

Go to Tutor LMS → Settings → General
Find Course Permalink Base
Change to your preferred slug
Save changes
Go to Settings → Permalinks
Click Save Changes

Can I import courses from other LMS?

Yes, with Tutor LMS Pro:

Go to Tutor LMS → Tools
Select Import
Choose source (LearnPress, LearnDash, LifterLMS)
Map fields
Import courses

How do I enable instructor payouts?

Go to Tutor LMS → Settings → Instructor
Enable Withdrawal
Set minimum withdrawal amount
Configure payout methods (PayPal, Stripe)
Save settings

Instructors request payouts from their dashboard.

Can students ask questions on lessons?

Yes, built-in Q&A system:

Students click Q&A tab on course page
Submit question
Instructors receive notification
Instructor answers
Other students see Q&A

How do I create a course preview?

Edit course
Edit a lesson
Enable Preview This Lesson
Save lesson
Lesson is viewable before enrollment

Why aren't certificates generating?

Common causes:

Certificates not enabled:
- Go to Settings → Course
- Enable Certificate System
No certificate assigned:
- Edit course
- Assign certificate template
- Save course
Course not 100% complete:
- Student must complete all content
- Check completion requirements
Quiz not passed:
- Student must pass required quizzes
- Check quiz passing grades

How do I allow guest reviews?

By default, only enrolled students can review:

This prevents spam
Ensures authentic reviews
Cannot be changed (Tutor design choice)

Can I sell courses without plugins?

No, Tutor requires WooCommerce or EDD:

Free Tutor = Free courses only
Paid courses require e-commerce plugin
WooCommerce recommended
Or use Tutor LMS Pro subscriptions

Best LMS Choice by Use Case

Tutor LMS vs Other Platforms

Use Case	Best Choice	Why
Course Marketplace	Tutor LMS	Multi-instructor, commissions
Single Instructor	LearnDash or LearnPress	Simpler, fewer features
Budget Projects	LearnPress	100% free
Advanced Features	Tutor LMS Pro or LearnDash	Most features
Live Classes	Tutor LMS Pro	Zoom integration
Membership Sites	LifterLMS	Built-in memberships

Tutor LMS Strengths

Best For:

Multi-instructor platforms
Course marketplaces
Modern UI/UX requirements
Video-based courses
Community learning
Instructor payouts

Limitations:

Requires Pro for advanced features
Resource intensive
Complex for simple needs

Recommended Configurations by Platform Type

Course Marketplace (Udemy-style)

Best Settings:

Instructor Registration: Yes
Instructor Approval: Manual
Commission: 70-80% to instructor
Public Profiles: Yes
Reviews: Enabled
Q&A: Enabled
Certificates: Yes

Why: Marketplaces need instructor management, revenue sharing, and trust features.

School/Educational Institution

Best Settings:

Public Course: No
Instructor Only: Yes
Free Courses: Yes
BuddyPress: Active
Assignments: Enabled
Gradebook: Yes (Pro)

Why: Schools need controlled access, free content, and student tracking.

Professional Training

Best Settings:

Course Duration: Yes
Prerequisites: Yes
Certificates: Yes
Live Classes: Yes (Pro)
Assignments: Yes

Why: Professional training requires structured paths and verified completion.

Membership Learning Platform

Best Settings:

WooCommerce Subscriptions
Drip Content: Yes
Course Bundles: Yes
Prerequisites: Yes

Why: Memberships need recurring revenue and content scheduling.

LearnDash Setup - Alternative LMS platform
LearnPress - Free LMS option
Sidebar Layouts - Sidebar configuration
BuddyPress Integration - Community features

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email Support: support@wbcomdesigns.com
Include: BuddyX Pro version, Tutor LMS version, and screenshots

WooCommerce

Shop layouts, cart, checkout, and WooCommerce hooks.

Cart & Checkout

Complete guide to customizing your shopping cart and checkout experience in BuddyX Pro.

Overview

BuddyX Pro enhances the WooCommerce cart and checkout experience with a modern cart icon, optional mini cart sidebar, and optimized checkout layouts. This guide covers all cart and checkout customization options.

What You Can Do

With BuddyX Pro's cart and checkout features, you can:

Add Cart Icon to Header - Live-updating cart counter in navigation
Enable Mini Cart Sidebar - Slide-out cart preview without leaving the page
Customize Checkout Layout - Optimize the checkout flow
Configure Cross-Sells - Display related products in cart
Style Payment Gateways - Professional payment method display
Optimize for Conversion - Reduce cart abandonment

Header Cart Icon

The header cart icon shows customers their cart status at a glance.

What It Shows

Default State (Empty Cart):

Shopping cart icon
No badge counter

Active State (Items in Cart):

Shopping cart icon
Badge with item count (e.g., "3")
Changes color to indicate active cart

On Click:

Links to cart page
Or opens mini cart sidebar (if enabled)

How It Works

Real-Time Updates:

Counter updates when items added
Updates via AJAX (no page reload)
Changes reflect immediately
Works with WooCommerce AJAX add to cart

Visual Feedback:

Badge appears with first item
Number increases with each item
Icon remains visible in header
Mobile-friendly responsive design

Setting Up Header Cart

Step 1: Enable Cart Icon

Go to Appearance → Customize
Navigate to Site Header → Header Cart
Enable "Show Cart Icon in Header"
Click Publish

Step 2: Choose Cart Behavior

Cart Page: Icon links to full cart page
Mini Cart: Icon opens slide-out cart (if enabled)

Customization Options:

Setting	Location	What It Does
Cart Icon Color	Colors section	Changes icon color
Badge Color	Colors section	Changes counter badge color
Icon Position	Header layout	Left, center, or right header

The mini cart sidebar provides a quick cart preview without leaving the current page.

Mini Cart Side Panel The mini cart sidebar slides in from the right showing cart contents, subtotal, and checkout options

What It Includes

Cart Preview:

Product thumbnails
Product names and quantities
Individual prices
Subtotal
Remove item buttons
View Cart button
Checkout button

Interactive Features:

Quantity adjustment (with some plugins)
Remove items directly
Coupon code entry (with extensions)
Free shipping progress bar (with extensions)

User Experience

Opening the Cart:

Customer adds product to cart
Mini cart automatically slides in from right
Shows added product with confirmation
Customer can continue shopping or checkout

Closing the Cart:

Click "Close" button
Click outside cart area
Press Escape key
Automatically closes after action

Setting Up Mini Cart

Step 1: Enable Feature

The mini cart is automatically available with BuddyX Pro when WooCommerce is active. No setup required!

Step 2: Customize Appearance

Add to child theme style.css:

/* Mini cart width */
.buddyx-cart-widget-side {
    width: 400px;
}

/* Background color */
.buddyx-cart-widget-side {
    background-color: #ffffff;
}

/* Heading style */
.buddyx-cart-widget-side .widget-title {
    font-size: 18px;
    color: #333;
}

Step 3: Test Functionality

Add product to cart
Click cart icon in header
Verify sidebar opens
Test remove item
Test checkout button

Cart Page Features

The main cart page displays full cart details and allows quantity updates.

Standard Features

Product Display:

Product thumbnail images
Product names (linked)
Individual prices
Quantity selectors with +/- buttons
Line totals
Remove item buttons

Cart Totals:

Subtotal
Shipping options and costs
Tax calculations
Coupon discount display
Total amount

Actions:

Update cart button
Continue shopping link
Proceed to checkout button
Apply coupon field

BuddyX Pro Enhancements

Quantity Buttons:

Plus (+) and minus (-) buttons
Replaces default input field
Easier for customers to adjust quantities
Mobile-friendly
Automatic cart update

Cross-Sells Relocated:

Moved after cart form (from sidebar)
Better visibility
More prominent display
Increased cross-sell effectiveness

Responsive Layout:

Table layout on desktop
Card layout on mobile
Touch-friendly buttons
Optimized spacing

Customizing Cart Page

Enable/Disable Coupon Field:

Go to WooCommerce → Settings → General
Check/uncheck "Enable coupons"
Save changes

Customize Cross-Sells:

Edit product
Scroll to "Linked Products"
Add cross-sell products
Save product

Change Quantity Button Style:

Add to child theme style.css:

/* Larger quantity buttons */
.quantity .plus,
.quantity .minus {
    width: 35px;
    height: 35px;
    font-size: 18px;
}

Checkout Page Optimization

The checkout page is critical for conversions. BuddyX Pro optimizes layout and user experience.

Default Checkout Layout

Two-Column Layout:

Left Column (Billing & Shipping):

Billing details form
Shipping address (if different)
Order notes field

Right Column (Order Review):

Product list with thumbnails
Prices and quantities
Shipping method selection
Payment method options
Order total
Place Order button

BuddyX Pro Checkout Features

Clean Form Design:

Clearly labeled fields
Logical field ordering
Helpful placeholder text
Required field indicators
Validation messages

Mobile-Optimized:

Single column on mobile
Large touch-friendly buttons
Simplified form layout
Progress indicators
Easy payment selection

Security Indicators:

SSL badge (if SSL active)
Secure checkout messaging
Privacy policy link
Terms and conditions

Checkout Customization

Simplify Checkout Fields:

Add to child theme functions.php:

// Remove phone field
add_filter('woocommerce_billing_fields', function($fields) {
    unset($fields['billing_phone']);
    return $fields;
});

// Make company field optional
add_filter('woocommerce_billing_fields', function($fields) {
    $fields['billing_company']['required'] = false;
    return $fields;
});

Customize Button Text:

Install "WooCommerce Customizer" plugin
Go to Customizer → WooCommerce → Checkout
Change "Place Order" button text
Customize other checkout text

Add Trust Badges:

Add after checkout form using hook:

add_action('woocommerce_review_order_before_submit', function() {
    echo '<div class="trust-badges">';
    echo '<img src="/path/to/ssl-badge.webp" alt="Secure Checkout">';
    echo '<img src="/path/to/money-back.webp" alt="Money Back Guarantee">';
    echo '</div>';
});

Payment Gateway Display

How payment methods appear on checkout page.

Standard Payment Display

Default WooCommerce:

Radio buttons for each gateway
Gateway logos (if provided)
Description text below each option
Payment form appears below selection

BuddyX Pro Enhancements:

Styled radio buttons
Prominent gateway logos
Clear payment descriptions
Smooth transitions when switching
Mobile-optimized layout

Popular Payment Gateways

Stripe:

Credit card fields
Apple Pay / Google Pay buttons
3D Secure support
Inline validation

PayPal:

PayPal button
Credit card option
Express checkout
Pay Later messaging

Cash on Delivery:

Simple selection
Custom instructions
Confirmation message

Customizing Payment Display

Reorder Payment Methods:

Add to child theme functions.php:

add_filter('woocommerce_available_payment_gateways', function($gateways) {
    // Move PayPal to top
    if(isset($gateways['paypal'])) {
        $paypal = $gateways['paypal'];
        unset($gateways['paypal']);
        $gateways = array('paypal' => $paypal) + $gateways;
    }
    return $gateways;
});

Style Gateway Buttons:

Add to child theme style.css:

/* Stripe payment button */
.wc-stripe-elements-field {
    padding: 15px;
    border: 2px solid #635bff;
    border-radius: 5px;
}

/* PayPal button */
.payment_method_paypal img {
    max-width: 100px;
}

Reducing Cart Abandonment

Strategies to improve checkout completion rates.

Enable Guest Checkout

Why: Requiring account creation increases abandonment

How to Enable:

Go to WooCommerce → Settings → Accounts & Privacy
Check "Allow customers to place orders without an account"
Save changes

Impact: Can reduce abandonment by 20-30%

Display Shipping Costs Early

Why: Surprise shipping costs cause abandonment

Solutions:

Show shipping calculator on product pages
Display estimated shipping in cart
Offer free shipping threshold
Show all costs before checkout

Implementation:

// Add shipping calculator to cart
add_action('woocommerce_before_cart_table', 'woocommerce_shipping_calculator');

Simplify Form Fields

Why: Long forms discourage completion

What to Remove:

Company name (unless B2B)
Secondary address line
Phone number (if not essential)
Unnecessary custom fields

What to Keep:

Name and email
Primary address
Payment information
Required legal fields

Add Progress Indicators

Why: Shows customers how far along they are

Implementation Options:

Checkout steps plugin
Custom progress bar
Step numbers
Breadcrumb navigation

Offer Multiple Payment Options

Why: Customers have preferred payment methods

Recommended Methods:

Credit/debit cards (Stripe)
PayPal
Apple Pay / Google Pay
Buy Now, Pay Later (Afterpay, Klarna)
Bank transfer for large orders

Show Security Badges

Why: Builds trust during payment

What to Display:

SSL certificate badge
Payment gateway logos
Money-back guarantee
Privacy policy link
Secure checkout message

Recommended Cart Configurations by Store Type

Fashion & Lifestyle Store

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Related accessories
Quantity Buttons: Enabled
Guest Checkout: Enabled
Shipping Calculator: On cart page

Checkout Features:
- Simplified form (remove company field)
- Multiple payment options
- Size guide link
- Return policy link

Why: Fashion customers browse multiple items, need quick cart access and reassurance.

Digital Products Store

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Complementary downloads
Quantity Buttons: Hidden (single qty)
Guest Checkout: Enabled
Shipping: Disabled

Checkout Features:
- Minimal form fields
- Instant payment options
- Downloadable after payment notice
- License terms link

Why: Digital sales should be fast and frictionless with instant access.

High-Ticket Items (Furniture, Electronics)

Cart Features:

Header Cart: Enabled
Mini Cart: Optional
Cross-Sells: Warranties, accessories
Quantity Buttons: Enabled
Guest Checkout: Optional
Shipping Calculator: Prominent

Checkout Features:
- Detailed shipping options
- White glove delivery option
- Phone support number
- Installation service upsell

Why: High-value purchases need more information and support options.

Subscription Products

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Higher tier plans
Quantity Buttons: Disabled
Guest Checkout: Disabled (account required)
Shipping: Based on subscription

Checkout Features:
- Subscription summary
- Billing schedule clear
- Easy upgrade options
- Cancel policy visible

Why: Subscriptions need clear recurring billing information and account management.

B2B/Wholesale Store

Cart Features:

Header Cart: Enabled
Mini Cart: Optional
Cross-Sells: Bulk discounts
Quantity Buttons: Large increments
Guest Checkout: Disabled
Shipping Calculator: Detailed

Checkout Features:
- Company field required
- Purchase order number
- Tax ID field
- Invoice option
- Net payment terms

Why: B2B needs company information and purchasing workflow.

Advanced Features

Cart Notices and Messages

Add Custom Cart Notices:

// Free shipping progress
add_action('woocommerce_before_cart', function() {
    $threshold = 50; // $50 for free shipping
    $current = WC()->cart->get_cart_contents_total();

    if($current < $threshold) {
        $remaining = $threshold - $current;
        wc_print_notice(
            sprintf('Add %s more to get free shipping!',
            wc_price($remaining)),
            'notice'
        );
    } else {
        wc_print_notice('You have free shipping!', 'success');
    }
});

Cart Expiration

Set Cart Expiration Time:

// Expire cart after 24 hours
add_filter('wc_session_expiring', function() {
    return 60 * 60 * 24; // 24 hours in seconds
});

Sticky Checkout Button

Keep Checkout Button Visible:

Add to child theme style.css:

/* Sticky cart totals on checkout */
@media (min-width: 768px) {
    .woocommerce-checkout .order-review {
        position: sticky;
        top: 20px;
    }
}

One-Click Checkout

Enable with Plugin:

WooCommerce Amazon Pay (Amazon Pay button)
WooCommerce Stripe (Apple Pay / Google Pay)
PayPal for WooCommerce (PayPal Express)

Troubleshooting

Cart icon not updating

Symptoms:

Counter doesn't change when items added
Number stays at 0 or old count

Solutions:

Clear browser cache
Clear WordPress cache
Check JavaScript console for errors
Disable conflicting plugins
Test with default theme
Regenerate cart fragments

Code Fix:

// Force cart refresh
add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    woocommerce_mini_cart();
    $fragments['.widget_shopping_cart_content'] = ob_get_clean();
    return $fragments;
});

Mini cart not opening

Symptoms:

Click cart icon, nothing happens
Sidebar doesn't slide in

Solutions:

Check browser console for JavaScript errors
Ensure jQuery is loading
Clear JavaScript cache
Test without other plugins
Check z-index conflicts

CSS Fix:

/* Ensure mini cart is on top */
.buddyx-cart-widget-side {
    z-index: 9999;
}

Checkout page layout broken

Symptoms:

Fields overlap
Columns stack incorrectly
Buttons misaligned

Solutions:

Check page template (should be default)
Verify checkout shortcode exists
Clear all caches
Disable page builder plugins
Test with default theme

Fix Checkout Template:

Go to Pages → Checkout
Ensure content is: [woocommerce_checkout]
Template should be "Default Template"
No other page builder elements

Payment gateway not showing

Symptoms:

Expected gateway missing
Only some gateways visible

Solutions:

Verify gateway is enabled: WooCommerce → Settings → Payments
Check gateway requirements (SSL, currency, country)
Review gateway account status
Check for PHP errors
Test with sandbox mode

Cross-sells not displaying

Symptoms:

No related products in cart
Cross-sells section empty

Solutions:

Verify products have cross-sells assigned
Check theme removes/adds cross-sell action
Ensure products are in stock
Verify products are published
Clear transient cache

Performance Optimization

Optimize Cart AJAX

Enable AJAX Cart Updates: Most modern themes include this, but ensure:

// Support AJAX add to cart
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');

Cache Exclusions

Don't Cache These Pages:

Cart page (/cart/)
Checkout page (/checkout/)
My Account page (/my-account/)

WP Rocket Example:

Go to Settings → WP Rocket → Advanced Rules
Add to "Never cache" URLs:

/cart/(.*)
/checkout/(.*)
/my-account/(.*)

Minimize Checkout Scripts

Defer Non-Essential Scripts:

add_filter('script_loader_tag', function($tag, $handle) {
    if(is_checkout() && !in_array($handle, ['jquery', 'woocommerce'])) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

Accessibility Best Practices

Ensure accessible:

Tab through cart items
Enter to update quantities
Space to select payment methods
Tab to Place Order button

Label Elements Properly:

<button aria-label="Remove item from cart">×</button>
<input aria-label="Quantity" type="number">
<label for="payment_method_stripe">Credit Card</label>

Color Contrast

Check these elements:

Button text on button background
Error messages visibility
Required field indicators
Price text readability

Focus Indicators

/* Visible focus styles */
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

Common Questions

Can I customize the cart icon?

Yes! Use custom CSS to change the icon or upload your own via child theme. The icon uses Font Awesome by default.

How do I add estimated delivery dates?

Use a plugin like "Order Delivery Date" or "WooCommerce Estimated Delivery Date" to add delivery estimates.

Can I have a sticky cart button?

Yes, use CSS to make the checkout button sticky (see "Sticky Checkout Button" above).

How do I remove the Continue Shopping button?

Add to child theme functions.php:

remove_action('woocommerce_cart_actions', 'woocommerce_button_proceed_to_checkout');

Can I set a minimum order amount?

Yes, go to WooCommerce → Settings → Advanced and set minimum order amount.

How do I enable cart expiration?

See "Cart Expiration" in Advanced Features section above.

WooCommerce Setup Guide - Initial configuration
WooCommerce Customizer Settings - Theme settings
Shop Page Layouts - Product display options

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Cart Optimization Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com

WooCommerce Hooks Reference

Developer documentation for customizing BuddyX Pro's WooCommerce integration.

Filter Hooks

buddyx_off_canvas_filter_button_output

Customize the off-canvas filter button HTML output.

add_filter( 'buddyx_off_canvas_filter_button_output', 'my_custom_filter_button' );

function my_custom_filter_button( $output ) {
    return '<button class="my-custom-filter-btn">
        <i class="fas fa-filter"></i> Filter Products
    </button>';
}

Parameters:

$output (string) - Default button HTML

Return: String - Modified button HTML

woocommerce_add_to_cart_fragments

BuddyX Pro uses this WooCommerce filter to update cart elements via AJAX.

add_filter( 'woocommerce_add_to_cart_fragments', 'my_custom_fragments' );

function my_custom_fragments( $fragments ) {
    // Add custom fragment
    $fragments['.my-custom-cart-element'] = '<div class="my-custom-cart-element">' .
        WC()->cart->get_cart_contents_count() . ' items</div>';

    return $fragments;
}

Theme-registered fragments:

.menu-icons-wrapper .cart a - Header cart icon with count
.buddyx-mini-cart - Mini cart contents
.buddyx-cart-count - Cart item count
.buddyx-cart-contents - Cart summary text

woocommerce_sale_flash

Customize the sale badge output when percentage display is enabled.

add_filter( 'woocommerce_sale_flash', 'my_sale_badge', 10, 3 );

function my_sale_badge( $badge, $post, $product ) {
    // Custom sale badge with different styling
    return '<span class="my-sale-badge">SALE!</span>';
}

Note: Theme only modifies this when buddyx_woo_sale_badge_content is set to 'percent'.

post_class

BuddyX Pro adds WooCommerce-specific classes to products.

add_filter( 'post_class', 'my_product_classes', 50, 3 );

function my_product_classes( $classes, $class, $post_id ) {
    if ( ! function_exists( 'wc_get_product' ) ) {
        return $classes;
    }

    $product = wc_get_product( $post_id );
    if ( ! $product ) {
        return $classes;
    }

    // Add custom class for products on sale
    if ( $product->is_on_sale() ) {
        $classes[] = 'my-custom-sale-class';
    }

    return $classes;
}

Theme-added classes:

square-sale - When sale badge style is square
circle-sale - When sale badge style is circle
left-position - When sale badge position is left

loop_shop_per_page

Control products displayed per page.

add_filter( 'loop_shop_per_page', 'my_products_per_page', 30 );

function my_products_per_page( $count ) {
    // Show 24 products per page
    return 24;
}

Note: Theme sets this based on buddyx_woo_product_per_page customizer setting.

Action Hooks

woocommerce_before_shop_loop

BuddyX Pro adds the filter button here (priority 10).

// Add custom element before shop loop
add_action( 'woocommerce_before_shop_loop', 'my_shop_intro', 5 );

function my_shop_intro() {
    if ( is_shop() ) {
        echo '<div class="shop-intro">Welcome to our shop!</div>';
    }
}

woocommerce_after_cart_form

Cross-sell products are moved here from their default location.

// Add custom content after cart
add_action( 'woocommerce_after_cart_form', 'my_cart_message', 5 );

function my_cart_message() {
    echo '<div class="cart-message">Free shipping on orders over $50!</div>';
}

wp_footer

Theme adds quantity button scripts here.

// Add custom WooCommerce scripts
add_action( 'wp_footer', 'my_woo_scripts', 20 );

function my_woo_scripts() {
    if ( ! is_woocommerce() && ! is_cart() ) {
        return;
    }
    ?>
    <script>
    // Custom WooCommerce JavaScript
    jQuery(document).ready(function($) {
        // Your code here
    });
    </script>
    <?php
}

Theme Functions

buddyx_render_cart_icon()

Renders the shopping cart icon with item count.

// Use in custom template
if ( function_exists( 'buddyx_render_cart_icon' ) ) {
    buddyx_render_cart_icon();
}

Output:

<div class="cart cart-widget-opener">
    <a href="[cart_url]" title="View Shopping Cart">
        <span class="fas fa-shopping-cart"></span>
        <sup>3</sup>
    </a>
</div>

buddyx_cart_widget_side()

Outputs the mini cart sidebar widget.

// Use in custom template
if ( function_exists( 'buddyx_cart_widget_side' ) ) {
    buddyx_cart_widget_side();
}

buddyx_filters_widget_side()

Outputs the off-canvas filter sidebar.

// Use in custom template
if ( function_exists( 'buddyx_filters_widget_side' ) ) {
    buddyx_filters_widget_side();
}

buddyx_is_woo_shop()

Check if current page is the WooCommerce shop page.

if ( buddyx_is_woo_shop() ) {
    // We're on the shop page
}

Returns: Boolean

buddyx_is_woo_tax()

Check if current page is a WooCommerce taxonomy archive.

if ( buddyx_is_woo_tax() ) {
    // We're on a product category/tag page
}

Returns: Boolean

Customizer Settings

Getting Customizer Values

// Sale badge style
$sale_style = get_theme_mod( 'buddyx_woo_sale_badge_style', 'default' );

// Sale badge position
$sale_position = get_theme_mod( 'buddyx_woo_sale_badge_position', 'right' );

// Sale badge content type
$sale_content = get_theme_mod( 'buddyx_woo_sale_badge_content', 'text' );

// Product style
$product_style = get_theme_mod( 'woocommerce_product_style', 'default' );

// Show sorting dropdown
$show_sort = get_theme_mod( 'buddyx_woo_shop_sort', true );

// Show result count
$show_count = get_theme_mod( 'buddyx_woo_shop_result_count', true );

// Products per page
$per_page = get_theme_mod( 'buddyx_woo_product_per_page', 16 );

// Off canvas filter enabled
$filter_enabled = get_theme_mod( 'buddyx_woo_off_canvas_filter', false );

// Filter button text
$filter_text = get_theme_mod( 'buddyx_woo_off_canvas_filter_text', 'Filter' );

Removing Theme Modifications

Restore WooCommerce Breadcrumbs

add_action( 'init', function() {
    add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
}, 15 );

add_action( 'init', function() {
    add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}, 15 );

Restore Cross-Sells Location

add_action( 'init', function() {
    remove_action( 'woocommerce_after_cart_form', 'woocommerce_cross_sell_display', 10 );
    add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
}, 15 );

Restore Default Sort/Count

add_action( 'init', function() {
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
    add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
}, 15 );

CSS Classes

Sale Badge Classes

Class	Applied When
`.onsale`	Default WooCommerce sale badge
`.square-sale`	Sale badge style is "Square"
`.circle-sale`	Sale badge style is "Circle"
`.left-position`	Sale badge position is "Left"

Cart Classes

Class	Element
`.cart-widget-opener`	Cart icon container
`.buddyx-cart-widget-side`	Mini cart sidebar
`.buddyx-mini-cart`	Mini cart contents
`.buddyx-cart-count`	Cart count badge
`.buddyx-cart-contents`	Cart summary

Filter Classes

Class	Element
`.buddyx-woo-canvas-filter`	Filter button
`.buddyx-filter-widget-side`	Filter sidebar
`.woo-off-canvas-sidebar`	Filter sidebar content

Shop Classes

Class	Applied When
`.infinite-loader-active`	Infinite Loader plugin is active

JavaScript Events

Mini Cart Open/Close

jQuery(document).ready(function($) {
    // Cart widget opened
    $(document).on('click', '.cart-widget-opener', function(e) {
        console.log('Mini cart opened');
    });

    // Cart widget closed
    $(document).on('click', '.widget-close', function(e) {
        console.log('Mini cart closed');
    });
});

Quantity Button Events

jQuery(document).ready(function($) {
    // Quantity changed via +/- buttons
    $(document.body).on('click', '.plus, .minus', function() {
        console.log('Quantity changed');
    });
});

README - Technical overview
Customer Guide - Setup instructions
Developer Hooks - All theme hooks

Shop Page Layouts

Complete guide to customizing your shop page display, product grids, and catalog layouts in BuddyX Pro.

Overview

BuddyX Pro gives you complete control over how products display on your shop page, category archives, and search results. Choose from multiple layout options, adjust grid spacing, and optimize for different product types.

What You Can Do

With BuddyX Pro's shop layout options, you can:

Choose Product Card Styles - Select from 4 pre-designed product layouts
Control Grid Layout - Adjust products per row and spacing
Manage Sidebars - Show filters on left, right, both sides, or hide them
Set Products Per Page - Control pagination and scroll length
Enable Mobile Filters - Add off-canvas filter sidebar for mobile users
Customize Product Info - Show/hide ratings, prices, descriptions

Product Card Styles

BuddyX Pro includes four distinct product card designs. Each style is optimized for different store types.

WooCommerce Shop Page Settings Shop Page settings in the Customizer showing Product Style options, Products Per Page, and Filter Button settings

Default Style

Appearance:

Standard WooCommerce layout
Product image with hover zoom
Title and price clearly visible
Add to Cart button always shown
Star ratings (if enabled)

Best For:

General merchandise stores
First-time WooCommerce users
Traditional e-commerce look
Stores with diverse product types

Features:

Maximum compatibility with plugins
Clean, familiar design
Fast loading
Mobile-optimized

How to Enable:

Go to Appearance → Customize
Navigate to WooCommerce → Shop
Find "Product Style"
Select "Default"
Click Publish

Style 1: Modern with Hover Effects

WooCommerce Shop Style 1 Style 1 with "ADD TO CART" text links and clean product presentation

Appearance:

Elegant product cards
Image hover effects with smooth transitions
Quick action buttons appear on hover
Subtle shadows and animations
Modern spacing and typography

Best For:

Fashion and apparel stores
Beauty and cosmetics
Home décor
Lifestyle products
Brands with strong visual identity

Features:

Eye-catching hover animations
Modern card design with shadows
Quick view button integration (with plugin)
Add to wishlist support (with plugin)
Social sharing icons (with plugin)

Hover Actions: When customers hover over products:

Add to Cart button animates in
Quick view icon appears
Wishlist icon shows (if plugin active)
Image slightly zooms

How to Enable:

Go to Appearance → Customize → WooCommerce → Shop
Select "Style 1" for Product Style
Click Publish

Pro Tip: Combine with Circle sale badges for maximum visual impact.

Style 2: Minimal & Clean

WooCommerce Shop Style 2 Style 2 with cart icon buttons and product info outside cards

Appearance:

Minimal design with focus on images
Reduced visual clutter
Compact spacing
Clean typography
Large product images

Best For:

Photography stores
Art galleries
Digital products
Portfolio-style shops
Premium brands
Minimalist aesthetics

Features:

Maximum image prominence
Reduced border and shadow usage
Clean, uncluttered layout
Fast rendering
Perfect for high-quality photos

Design Philosophy:

"Less is more" approach
Product images tell the story
Minimal text overlay
Plenty of white space

How to Enable:

Go to Appearance → Customize → WooCommerce → Shop
Select "Style 2" for Product Style
Click Publish

Recommendation: Combine with full-width layout (no sidebar) for maximum impact.

Style 3: Information-Dense

WooCommerce Shop Style 3 Style 3 with minimal layout showing product name and price only

Appearance:

Detailed product cards
Specifications visible upfront
Category badges shown
More text content
Information hierarchy

Best For:

Electronics and tech products
Books and educational materials
Tools and equipment
B2B stores
Products with complex specifications

Features:

Short description visible
Category labels displayed
Stock status shown
Multiple product attributes
Compare-ready layout

What's Displayed:

Product image with zoom
Full product title
Price and sale price
Star ratings
Short description (excerpt)
Category badges
Stock status
Add to Cart button

How to Enable:

Go to Appearance → Customize → WooCommerce → Shop
Select "Style 3" for Product Style
Click Publish

Pro Tip: Use left sidebar with attribute filters for best results with this style.

Grid Layout Options

Control how products arrange on your shop page.

Products Per Row

WooCommerce typically displays 4 products per row on desktop. You can customize this with code or page builders.

Standard Layouts:

Layout	Products/Row Desktop	Products/Row Tablet	Products/Row Mobile
Default	4	2-3	1-2
Wide	5-6	3	1-2
Spacious	3	2	1

Width Calculations:

For 4-column layout:

Each product: ~25% width
With spacing: ~23% width + 2% margin

For 3-column layout:

Each product: ~33% width
With spacing: ~31% width + 2% margin

How to Change (Requires Code):

Add to child theme functions.php:

// Change to 3 columns
add_filter('loop_shop_columns', function() {
    return 3;
});

Page Builder Options:

Elementor: Use WooCommerce Products widget with columns setting
WPBakery: Use WooCommerce products element
Gutenberg: Use Products block with column controls

Products Per Page

Control how many products show before pagination.

Current Setting: Controlled via Customizer (#woocommerce-settings-bxpro))

Optimal Settings by Store Size:

Store Size	Products	Products Per Page	Why
Small (1-50)	All on one page	24-50	No pagination needed
Medium (50-200)	Multiple pages	16-24	Balanced loading
Large (200-1000)	Many pages	12-16	Performance focus
Huge (1000+)	Very many pages	12	Load time critical

SEO Considerations:

More products per page = fewer pages for Google to crawl
Fewer products per page = faster loading = better ranking
Balance: 16-20 products per page

Choose where sidebars display on shop pages.

Layout: Products span full content area

Benefits:

Maximum space for products
Modern, clean appearance
Focus on products, not filters
Mobile-friendly by default

Best For:

Small catalogs (under 50 products)
Curated collections
Minimal stores
Landing pages
Flash sales

How to Set Up:

Go to Appearance → Customize → Sidebars
Find "WooCommerce Sidebar"
Select "None"
Click Publish

Layout: Sidebar on left, products on right

Benefits:

Filters visible first (LTR languages)
Traditional layout
Category-first navigation
Good for desktop users

Best For:

Category-heavy stores
Electronics and tech
Stores with many attributes
B2B catalogs

How to Set Up:

Go to Appearance → Customize → Sidebars
Find "WooCommerce Sidebar"
Select "Left"
Click Publish
Add widgets to WooCommerce Left Sidebar

Recommended Widgets:

WooCommerce Product Categories
WooCommerce Layered Nav (Attributes)
WooCommerce Price Filter

Layout: Products on left, sidebar on right

Benefits:

Standard e-commerce layout
Products visible first
Familiar to customers
Most common configuration

Best For:

Most store types
General merchandise
Fashion stores
Default recommendation

How to Set Up:

Go to Appearance → Customize → Sidebars
Find "WooCommerce Sidebar"
Select "Right"
Click Publish
Add widgets to WooCommerce Right Sidebar

Recommended Widgets:

WooCommerce Layered Nav (Price)
WooCommerce Product Search
WooCommerce Recent Products
WooCommerce Top Rated Products

Both Sidebars

Layout: Sidebars on both sides, products in center

Benefits:

Maximum filter options
Advanced navigation
Multiple widget areas
Power-user focused

Best For:

Large catalogs (500+ products)
Stores with many categories
Advanced filtering needs
B2B marketplaces

How to Set Up:

Go to Appearance → Customize → Sidebars
Find "WooCommerce Sidebar"
Select "Both"
Click Publish
Add widgets to both sidebar areas

Layout Strategy:

Left Sidebar: Categories, brands, main filters
Right Sidebar: Price range, ratings, recent products

BuddyX Pro includes a special off-canvas filter sidebar for mobile devices.

What It Does

Desktop Behavior:

Filter button hidden on desktop
Regular sidebars display normally

Mobile Behavior:

"Filter" button appears above products
Clicking opens slide-in sidebar
Filters accessible without scrolling
Smooth animation
Close button included

Benefits:

Mobile-optimized filtering
Doesn't clutter mobile layout
Standard e-commerce pattern
Improves conversion on mobile

Setting Up Mobile Filters

Step 1: Enable Filter Button

Go to Appearance → Customize
Navigate to WooCommerce → Shop
Enable "Display Filter Button"
Customize "Filter Button Text" if desired
Click Publish

Step 2: Add Filter Widgets

Go to Appearance → Widgets
Find Off Canvas Sidebar widget area
Add these widgets:
- WooCommerce Product Categories
- WooCommerce Layered Nav (Color, Size, etc.)
- WooCommerce Price Filter
- WooCommerce Product Search

Step 3: Test on Mobile

Visit shop page on mobile device
Look for "Filter" button above products
Tap to open filter sidebar
Verify all filters work correctly

Recommended Layouts by Store Type

Fashion & Apparel Store

Layout Configuration:

Product Style: Style 1 (hover effects)
Products Per Page: 12
Sidebar: Right
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Size)
- Layered Nav (Color)
- Price Filter

Why This Works:

Visual products need modern presentation
Size and color are primary filters
12 products balance browsing and performance
Right sidebar is familiar pattern

Electronics Store

Layout Configuration:

Product Style: Style 3 (info-dense)
Products Per Page: 16
Sidebar: Left
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Brand)
- Layered Nav (Screen Size)
- Price Filter
- Top Rated Products

Why This Works:

Specifications are important
Brand filtering is critical
More products per page for comparison
Left sidebar emphasizes categories

Digital Products Store

Layout Configuration:

Product Style: Style 2 (minimal)
Products Per Page: 24
Sidebar: None (full width)
Products Per Row: 5-6
Filter Button: Disabled

No sidebars needed

Why This Works:

Digital products need less visual space
More products visible at once
Minimal design for clean presentation
No physical attributes to filter

Furniture & Home Décor

Layout Configuration:

Product Style: Default
Products Per Page: 9
Sidebar: Right
Products Per Row: 3
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Color)
- Layered Nav (Style)
- Price Filter
- Recent Products

Why This Works:

Large products need space (3 columns)
Visual presentation is key
Fewer products allow larger images
Style and color are important filters

Books & Educational Materials

Layout Configuration:

Product Style: Style 3 (info-dense)
Products Per Page: 20
Sidebar: Left
Products Per Row: 4
Filter Button: Enabled

Sidebar Widgets:
- Product Categories
- Layered Nav (Author)
- Layered Nav (Genre)
- Price Filter
- Recent Reviews

Why This Works:

Details matter (descriptions visible)
Many products per page for browsing
Category navigation is primary
Author and genre filters essential

Customization Tips

Creating Custom Product Grids

Using CSS (Child Theme):

/* 3 columns on desktop */
@media (min-width: 768px) {
    .woocommerce ul.products li.product {
        width: 31.33%;
        margin-right: 2%;
    }
}

/* 2 columns on tablet */
@media (min-width: 481px) and (max-width: 767px) {
    .woocommerce ul.products li.product {
        width: 48%;
        margin-right: 4%;
    }
}

Adding Custom Spacing

/* More space between products */
.woocommerce ul.products li.product {
    margin-bottom: 3em;
}

/* Tighter spacing */
.woocommerce ul.products li.product {
    margin-bottom: 1em;
}

Changing Image Aspect Ratios

/* Square images (1:1) */
.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Portrait images (3:4) */
.woocommerce ul.products li.product a img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

Troubleshooting Layouts

Products displaying in single column

Cause: Theme or plugin CSS conflict

Solution:

Check for CSS conflicts in browser inspector
Temporarily disable plugins one by one
Verify WooCommerce CSS is loading
Clear all caches

Cause: No widgets added to sidebar area

Solution:

Go to Appearance → Widgets
Add at least one widget to the sidebar
Make sure sidebar position is not "None"
Check if WooCommerce pages are using correct template

Mobile layout broken

Cause: Theme not responsive or CSS conflict

Solution:

Test on different mobile devices
Check viewport meta tag exists
Verify responsive CSS is loading
Test with default WordPress theme

Products too wide/narrow

Cause: Custom CSS or theme conflict

Solution:

Inspect element in browser
Check for custom CSS overrides
Remove conflicting CSS
Adjust container width settings

Filter button not appearing

Cause: Setting not enabled or JavaScript error

Solution:

Enable "Display Filter Button" in Customizer
Check browser console for errors
Add widgets to Off Canvas Sidebar
Clear JavaScript cache

Performance Optimization

Image Loading

Recommendations:

Use 600×600px for product thumbnails
Enable lazy loading
Compress images before upload
Use WebP format when possible

Implementation:

// Add to child theme functions.php
add_filter('wp_lazy_loading_enabled', '__return_true');

Limiting Products Per Page

Impact on Performance:

Products	Page Load	Memory	Best For
12	~1-2s	Low	Small servers
16	~1.5-2.5s	Medium	Balanced
24	~2-3s	High	Strong servers
50+	~3-5s	Very High	Avoid

Recommendation: Keep under 24 products per page for best performance.

Caching Strategies

Enable Page Caching
- Cache shop page
- Don't cache cart/checkout
- Use WP Rocket or W3 Total Cache
Enable Object Caching
- Reduces database queries
- Speeds up repeated page loads
- Use Redis or Memcached
Use CDN for Images
- Offload product images
- Faster delivery worldwide
- Cloudflare or StackPath

Accessibility Best Practices

Ensure customers can navigate with keyboard:

Tab through products
Enter to open product pages
Arrow keys for grid navigation (optional)

Product images have descriptive alt text
Prices are properly labeled
Add to Cart buttons are clear
Sale badges are announced

Color Contrast

Ensure text meets WCAG AA standards
Price text clearly visible
Sale badges readable
Link colors distinguishable

Focus Indicators

/* Visible focus for keyboard users */
.woocommerce ul.products li.product a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

Common Questions

Can I show different layouts on different categories?

Not natively through Customizer. You would need custom code or a plugin like "WooCommerce Category Page Customizer".

How do I change the number of columns?

Use custom code (see "Creating Custom Product Grids" above) or a page builder widget.

Can I hide prices from non-logged-in users?

Yes, use a plugin like "WooCommerce Catalog Mode" or add custom code to your child theme.

Will changing layout affect mobile?

BuddyX Pro layouts are responsive and adjust automatically for mobile devices.

Can I mix product styles?

Not on the same page. Product style applies globally to all shop pages.

Use the WooCommerce shop page hook or add content to the page itself using a page builder.

WooCommerce Setup Guide - Initial installation
WooCommerce Customizer Settings - Detailed settings guide
Cart & Checkout - Payment page configuration

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Custom Layout Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com

WooCommerce Customizer Settings

Complete guide to customizing your WooCommerce store appearance using BuddyX Pro's Customizer settings.

Overview

BuddyX Pro provides extensive WooCommerce customization options through the WordPress Customizer. You can change product layouts, sale badges, filters, and more without touching any code.

Accessing WooCommerce Settings

Method 1: Through Customizer

Log in to WordPress dashboard
Go to Appearance → Customize
Look for the WooCommerce section
You'll see two sub-sections:
- General - Sale badges and global settings
- Shop - Product display and layout options

Method 2: Quick Access

Visit your Shop page while logged in
Click the Customize button in the admin bar
Navigate to WooCommerce section

General Settings

Located at: Customize → WooCommerce → General

These settings affect all WooCommerce pages including product archives and single product pages.

Sale Badge Style

Control how sale badges appear on product images.

Option	Appearance	Best For
Default	Small rectangular badge	Clean, minimal stores
Square	Square badge with sharp corners	Modern, bold designs
Circle	Circular badge	Fashion, premium brands

How to Change:

Go to Customize → WooCommerce → General
Find "Sale Badge Style"
Select your preferred style
Click Publish

Visual Preview: The Customizer shows live preview on your shop page.

Sale Badge Position

Choose where sale badges appear on product images.

Position	Location	Best For
Right	Top-right corner (default)	Most stores, RTL friendly
Left	Top-left corner	LTR languages, unique layouts

How to Change:

Go to Customize → WooCommerce → General
Find "Sale Badge Position"
Select Left or Right
Preview changes in Customizer
Click Publish

Sale Badge Content

Display either text or percentage discount on sale badges.

Content Type	Display	Example	Best For
Sale Text	Shows "Sale!" text	"Sale!"	Simple sales, flat discounts
Percentage	Shows discount %	"-25%"	Competitive pricing, variable discounts

How to Change:

Go to Customize → WooCommerce → General
Find "Sale Badge Content"
Select "Sale Text" or "Percentage"
Click Publish

Note: Percentage calculation works for both simple and variable products. For variable products, it shows the maximum discount percentage.

Shop Settings

Located at: Customize → WooCommerce → Shop

These settings control your main shop page and product archive pages (categories, tags).

Product Style

Choose from four different product card designs.

Default Style

Clean, standard WooCommerce layout
Product image on top
Title and price below
Add to Cart button visible

Best for: Traditional e-commerce stores, general merchandise

Style 1

Hover effects on product images
Quick actions appear on hover
Smooth transitions
Modern card design

Best for: Fashion stores, visual products, modern brands

Style 2

Minimal design with emphasis on images
Compact information display
Reduced spacing
Quick view integration ready

Best for: Photography stores, art galleries, portfolio-style shops

Style 3

Detailed product information visible
Specifications shown upfront
Category labels displayed
Information-dense layout

Best for: Electronics, books, technical products

How to Change:

Go to Customize → WooCommerce → Shop
Find "Product Style"
Select your preferred style
Preview different options
Click Publish

Product Sort

Show or hide the product sorting dropdown.

When Enabled:

Customers can sort by: Popularity, Average rating, Latest, Price (Low to High), Price (High to Low)
Dropdown appears above product grid
Helpful for large catalogs

When Disabled:

Sorting dropdown is hidden
Products display in default order
Cleaner interface for small catalogs

How to Change:

Go to Customize → WooCommerce → Shop
Find "Product Sort" checkbox
Check to enable, uncheck to disable
Click Publish

Recommendation: Enable for stores with 20+ products, disable for smaller catalogs.

Product Result Count

Show or hide the product count text (e.g., "Showing 1-12 of 50 results").

When Enabled:

Customers see total results
Pagination context is clear
Professional appearance

When Disabled:

Cleaner header area
More space for products
Simpler interface

How to Change:

Go to Customize → WooCommerce → Shop
Find "Product Result Count" checkbox
Check to enable, uncheck to disable
Click Publish

Recommendation: Enable for stores with multiple pages of products.

Products Per Page

Control how many products display on shop and archive pages.

Default: 16 products per page

Recommended Settings:

Store Type	Products Per Page	Reason
Fashion	12-16	Large images need space
Electronics	16-20	Smaller images, more comparisons
Digital Products	20-24	Minimal space needed
Furniture	8-12	Large products, detailed viewing
General Store	16	Balanced layout

How to Change:

Go to Customize → WooCommerce → Shop
Find "Products Per Page" slider
Drag slider to desired number (0-100)
Preview the layout
Click Publish

Performance Note: More products per page = longer load times. Balance user experience with performance.

Display Filter Button

Enable a mobile-friendly off-canvas filter sidebar.

When Enabled:

"Filter" button appears above products
Clicking opens sidebar with filter widgets
Mobile-optimized interface
Smooth slide-in animation

When Disabled:

No filter button
Regular sidebar layout (if sidebar is active)
Traditional desktop experience

How to Change:

Go to Customize → WooCommerce → Shop
Find "Display Filter Button" checkbox
Check to enable
Click Publish
Add filter widgets: Widgets → Off Canvas Sidebar

Note: When enabled, a new widget area "Off Canvas Sidebar" appears in Appearance → Widgets.

Filter Button Text

Customize the text on the filter button.

Default: "Filter"

Popular Alternatives:

"Filter Products"
"Refine Search"
"Shop By Category"
"Find Products"

How to Change:

Go to Customize → WooCommerce → Shop
Find "Filter Button Text"
Enter your custom text
Click Publish

Note: This setting only appears when "Display Filter Button" is enabled.

Located at: Customize → Sidebars → WooCommerce Sidebar

Control sidebar position for WooCommerce pages.

Position	Layout	Best For
None	Full-width, no sidebar	Modern stores, focus on products
Left	Sidebar on left, products on right	Categories-heavy stores
Right	Sidebar on right, products on left	Most common layout
Both	Sidebars on both sides	Advanced filtering needs

How to Change:

Go to Customize → Sidebars
Find "WooCommerce Sidebar" option
Select desired position
Click Publish

Go to Appearance → Widgets
Find WooCommerce Left Sidebar or WooCommerce Right Sidebar
Add filter widgets:
- WooCommerce Layered Nav - Filter by attributes
- WooCommerce Price Filter - Filter by price range
- WooCommerce Product Categories - Category navigation
- WooCommerce Recent Products - Show recent items
- WooCommerce Top Rated Products - Social proof

What You Can Do

Create Visual Hierarchy

Combine these settings for impact:

Highlight Sales:
- Badge Style: Circle
- Badge Content: Percentage
- Badge Position: Right
Minimal Modern Look:
- Product Style: Style 2
- Sidebar: None
- Sort: Disabled
- Result Count: Disabled
Information-Rich Layout:
- Product Style: Style 3
- Sidebar: Right
- Sort: Enabled
- Result Count: Enabled
- Filter Button: Enabled

Optimize for Mobile

Mobile-Friendly Settings:

Enable "Display Filter Button"
Keep "Products Per Page" at 12-16
Use Simple sale badge styles
Consider disabling sidebars on mobile (CSS)

A/B Testing Ideas

Test these combinations to find what works best:

Test 1: Sale Badge Effectiveness

Version A: Text-based badges
Version B: Percentage badges
Measure: Click-through rate on sale items

Test 2: Product Density

Version A: 12 products per page
Version B: 24 products per page
Measure: Time on site, pages viewed

Test 3: Sorting Options

Version A: Sort enabled
Version B: Sort disabled, curated order
Measure: Conversion rate

Recommended Shop Configurations by Store Type

Boutique Fashion Store

General Settings:
- Sale Badge Style: Circle
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Style 1
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 12
- Filter Button: Enabled
- Filter Text: "Refine"

Sidebar: Right with categories

Why: Fashion customers browse visually and appreciate elegant design.

Electronics & Tech Store

General Settings:
- Sale Badge Style: Square
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Style 3
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 16
- Filter Button: Enabled
- Filter Text: "Filter"

Sidebar: Left with specifications

Why: Tech buyers compare specs and need robust filtering.

Digital Downloads Store

General Settings:
- Sale Badge Style: Default
- Sale Badge Position: Right
- Sale Badge Content: Text

Shop Settings:
- Product Style: Style 2
- Product Sort: Enabled
- Result Count: Disabled
- Products Per Page: 24
- Filter Button: Disabled

Sidebar: None

Why: Digital products need less visual space, maximize content.

Premium Jewelry Store

General Settings:
- Sale Badge Style: Circle
- Sale Badge Position: Left
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Default
- Product Sort: Disabled (curated order)
- Result Count: Disabled
- Products Per Page: 8
- Filter Button: Disabled

Sidebar: None

Why: Premium products need space to breathe, curated presentation.

Large Multi-Category Store

General Settings:
- Sale Badge Style: Square
- Sale Badge Position: Right
- Sale Badge Content: Percentage

Shop Settings:
- Product Style: Default
- Product Sort: Enabled
- Result Count: Enabled
- Products Per Page: 16
- Filter Button: Enabled
- Filter Text: "Filter Products"

Sidebar: Right with multiple filters

Why: Large catalogs need comprehensive navigation and filtering.

Advanced Customization Tips

Using Child Theme

For CSS customizations beyond Customizer options:

Create child theme
Add custom CSS to override product styles
Keep parent theme updates safe

Example: Custom badge colors

/* In child theme style.css */
.onsale {
    background-color: #ff6b6b !important;
    color: white !important;
}

Filter Hook Customization

Developers can use theme filters for advanced changes. See WooCommerce Hooks Reference.

Troubleshooting Settings

Settings not saving

Solution:

Check browser console for JavaScript errors
Disable other plugins temporarily
Try different browser
Clear browser cache

Changes not visible on frontend

Solution:

Clear WordPress cache (if using caching plugin)
Clear browser cache
Try incognito/private browsing
Regenerate CSS: Customize → Publish

Filter button not showing

Solution:

Verify "Display Filter Button" is enabled
Visit shop page (not homepage)
Check for JavaScript conflicts
Add widgets to Off Canvas Sidebar

Sale badge showing wrong percentage

Solution:

Verify product has regular price set
Verify sale price is lower than regular price
For variable products, check all variations
Clear transients: WooCommerce → Status → Tools

Common Questions

Can I customize badge colors?

Customizer doesn't include color options for badges. Use custom CSS in child theme or Appearance → Customize → Additional CSS.

Will changing products per page affect SEO?

No, it's a display setting only. Search engines crawl all products regardless of pagination.

Can I hide prices for certain customers?

Not through Customizer. Use a plugin like "WooCommerce Catalog Mode" or custom code.

How do I change product grid columns?

WooCommerce displays 4 columns by default. Change via code in child theme functions.php or use the "Products Per Row" option in some page builders.

Can I have different settings for categories?

Not natively. All settings apply globally. Consider using category-specific sidebar widgets for customization.

Best Practices

Performance

Don't show too many products per page (max 24 for performance)
Enable caching to speed up repeated page loads
Optimize images before uploading
Use lazy loading for product images

User Experience

Enable sort options for catalogs with 20+ products
Show result counts for clarity on large catalogs
Use filter buttons for mobile-friendly filtering
Test on mobile devices before going live

Accessibility

Use descriptive filter button text ("Filter Products" vs. "Filter")
Ensure badge text has good contrast
Test keyboard navigation on shop pages
Include alt text on all product images

Design Consistency

Match badge style to your overall brand
Keep product styles consistent across all archives
Use sidebars consistently (don't mix left and right)
Maintain visual hierarchy with proper spacing

WooCommerce Setup Guide - Initial installation and configuration
Shop Page Layouts - Product display and grid options
Cart & Checkout - Cart and payment page settings

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Customization Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com

WooCommerce Setup

BuddyX Pro automatically styles WooCommerce when activated.

Quick Setup

1. Install WooCommerce

Plugins > Add New
Search "WooCommerce"
Click Install Now then Activate
Complete WooCommerce setup wizard

2. Verify Integration

After activating WooCommerce:

Visit your Shop page (/shop/)
You should see product grid with BuddyX styling
Add item to cart - cart icon appears in header with count

That's it - BuddyX Pro handles the styling automatically.

BuddyX Pro Settings

All WooCommerce theme settings are in Appearance > Customize > WooCommerce.

Shop Page Settings

Setting	Options	Default
Products Per Page	Number	12
Products Per Row	2, 3, 4	4
Product Style	Style 1, 2, 3	Style 1
Show Result Count	Yes/No	Yes
Show Sorting Dropdown	Yes/No	Yes

Sale Badge

Setting	Options
Badge Content	Percentage, Text
Badge Style	Circle, Square

Cart Icon

Enable at: Customize > Site Header > Header Elements > Site Cart

Features:

Live-updating item count
Click to open mini-cart panel
Links to cart and checkout

Customize > Sidebar > Shop Sidebar

Options: Left, Right, None

Essential WooCommerce Pages

WooCommerce creates these automatically:

Page	URL	Purpose
Shop	`/shop/`	Product catalog
Cart	`/cart/`	Shopping cart
Checkout	`/checkout/`	Payment
My Account	`/my-account/`	Customer dashboard

Missing pages? Go to WooCommerce > Status > Tools > Create default pages

Common Issues

Shop page 404

WooCommerce > Settings > Products
Verify Shop Page is assigned
Settings > Permalinks > Click Save

Cart icon not showing

Verify WooCommerce is active
Customize > Site Header > Header Elements
Toggle Site Cart to On

Product images wrong size

WooCommerce > Settings > Products > Display
Adjust image dimensions
Use Regenerate Thumbnails plugin

Mini-cart not opening

Clear all caches
Disable JS minification temporarily
Check browser console for errors

Shop Layouts - Product display styles
Cart & Checkout - Cart customization
WooCommerce Settings - All Customizer options

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

FluentCart

FluentCart setup and theming.

FluentCart E-Commerce Setup

BuddyX Pro provides complete FluentCart integration, turning your WordPress site into a modern e-commerce platform with native theme styling, cart functionality, and seamless checkout experience.

What is FluentCart?

FluentCart is a lightweight e-commerce plugin for WordPress. Combined with BuddyX Pro, you get:

Product catalog with categories and brands
Shopping cart with real-time updates
Secure checkout process
Order management
Payment gateway integration
Digital and physical product support
Subscription products (with FluentCart Pro)
Header cart icon with live count
Mobile-optimized shopping experience

Requirements

Requirement	Minimum	Recommended
FluentCart	1.2.4	Latest
PHP	8.0	8.2+
WordPress	6.0	Latest

Optional: FluentCart Pro for subscriptions, memberships, and advanced features.

Installation & Setup

Step 1: Install FluentCart

Go to Plugins > Add New
Search for "FluentCart"
Click Install Now then Activate

Step 2: Run Setup Wizard

FluentCart setup wizard launches automatically
Configure basic settings:
- Store name and location
- Currency settings
- Checkout pages (auto-created)
Click through wizard steps
Finish setup

Step 3: Add Your First Product

Navigate to FluentCart > Products
Click Add New Product
Enter product details:
- Product name
- Description
- Price
- Product image
- Inventory
Click Publish

Step 4: Configure Payment Gateways

Go to FluentCart > Settings > Payment
Enable payment methods:
- Stripe
- PayPal
- Other gateways
Enter API credentials
Test payment processing
Save settings

What You Can Do

Product Management

Feature	Description
Create Products	Add unlimited products with images
Product Variants	Size, color, style options
Product Categories	Organize by category
Product Brands	Filter by brand
Digital Products	Sell downloads
Physical Products	Manage inventory and shipping
Pricing Options	Regular, sale, subscription pricing
Product Gallery	Multiple product images

Store Features

Feature	Description
Shop Page	Main product catalog
Category Pages	Browse by category
Brand Pages	Browse by brand
Product Search	Find products quickly
Product Filters	Filter by price, category, etc.
Cart Drawer	Slide-out shopping cart
Checkout Page	Secure purchase process
Order Confirmation	Receipt and order details

Customer Experience

Feature	Description
Guest Checkout	Buy without account
User Accounts	Save addresses, view orders
Order History	Past purchase tracking
Cart Persistence	Cart saved between visits
Real-time Cart Updates	Instant cart count changes
Mobile Responsive	Optimized for all devices

BuddyX Pro Theme Features

Header Cart Icon

BuddyX Pro integrates a cart icon directly into your site header:

Feature	Description
Cart Icon	Shopping cart icon in header menu
Live Count Badge	Shows number of items in cart
Cart Drawer Toggle	Click to open FluentCart drawer
Real-time Updates	Badge updates when cart changes
Mobile Optimized	Responsive on all screen sizes

Enable/Disable: Customize > Site Header > Site Cart

Shop Page Styling

Layout Element	Description
Full Width Layout	Product grid spans full width
Product Grid	Responsive card-based layout
Category Filters	Styled filter sidebar
Search Bar	Custom search interface
Breadcrumbs	Navigation path
Sort Options	Price, name, date sorting

Single Product Pages

Component	BuddyX Pro Enhancement
Product Gallery	Responsive image gallery with zoom
Product Info	Clean price, description layout
Add to Cart Button	Styled call-to-action
Product Meta	Category, brand, SKU display
Related Products	"You May Also Like" section
Product Tabs	Description, specs, reviews

Checkout Experience

Feature	Description
Clean Layout	Full-width checkout template
Step Indicators	Visual checkout progress
Form Styling	Styled checkout fields
Order Summary	Cart review sidebar
Payment Options	Styled payment method selection
No Distractions	Header/footer simplified

Customizer Settings

Navigate to Appearance > Customize to configure FluentCart integration.

Cart Icon Setting

Location: Customize > Site Header

Setting	Options	Default
Site Cart	Yes/No	Yes

Note: Cart icon only appears when WooCommerce and SureCart are not active.

Location: Customize > Sidebar > Sidebar Layout

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

Layout Options:

None - Full-width product display (recommended)
Right - Product content with right sidebar
Left - Product content with left sidebar
Both - Product content with two sidebars

Widget Area	Description
FluentCart Left Sidebar	Appears on product pages with left sidebar
FluentCart Right Sidebar	Appears on product pages with right sidebar

Product Sidebar:

Product Search
Product Categories
Popular Products
Recent Products
Product Tags

Page Templates

BuddyX Pro automatically applies optimal templates for FluentCart pages:

Shop Pages

Page Type	Template Used	Layout
Main Shop	`archive-fluent-products.php`	Full width
Category Archive	`taxonomy-product-categories.php`	Full width
Brand Archive	`taxonomy-product-brands.php`	Full width
Single Product	FluentCart default + theme styling	Customizable sidebar

Special Pages

Page	Auto-Applied Template	Customizable
Checkout	Full Width	Yes
Cart	Full Width	Yes
Receipt	Full Width	Yes

To change page template:

Edit the page
Find Page Attributes box
Select Template dropdown
Choose desired template
Update page

FluentCart Settings

Configure FluentCart at FluentCart > Settings.

General Settings

Setting	Description	Default
Store Name	Your shop name	Site title
Store Address	Business location	(empty)
Currency	Price currency	USD
Currency Position	Before/after price	Before

Product Settings

Setting	Description	Default
Products Per Page	Shop page display count	12
Product Image Size	Gallery dimensions	800x800
Enable Reviews	Product reviews	No
Stock Management	Inventory tracking	Yes

Checkout Settings

Setting	Description	Default
Guest Checkout	Allow non-registered purchases	Yes
Account Creation	Create account during checkout	Optional
Checkout Fields	Required customer info	Name, email, address
Terms & Conditions	Require acceptance	No

Cart Settings

Setting	Description	Default
Enable Cart	Shopping cart functionality	Yes
Cart Persistence	Save cart between sessions	Yes
Empty Cart Button	Clear all items option	Yes
Continue Shopping URL	Return to shop link	Shop page

Recommended Configurations by Use Case

Digital Products Store

Best For: Courses, ebooks, software, memberships

Settings:

Product sidebar: None (full width)
Products per page: 16
Guest checkout: Yes (faster conversions)
Inventory management: Off (digital products)
Cart icon: Enabled

Homepage Setup:

Use page builder for hero section
Add product grid shortcode
Feature bestsellers
Include testimonials

Physical Products Store

Best For: Retail, merchandise, handmade goods

Settings:

Product sidebar: Right (categories widget)
Products per page: 12
Guest checkout: Yes
Stock management: On
Shipping zones: Configured

Features to Enable:

Product variations (size, color)
Shipping calculator
Tax settings by region
Low stock notifications

Membership/Subscription Site

Best For: Recurring products, clubs, services

Requirements: FluentCart Pro required

Settings:

Product sidebar: None
Subscription products: Enabled
Recurring payments: Configured
Account creation: Required

Integration:

Connect with LearnDash for course access
Use BuddyPress for member community
Enable FluentCart subscription features

Hybrid Content + Commerce

Best For: Blog/magazine with shop section

Settings:

Product sidebar: Right (blog-style)
Products per page: 9
Cart icon: Enabled (prominent)
Featured products: On homepage

Setup:

Create shop menu item
Add product widget to blog sidebar
Feature products in blog posts
Use shortcodes in content

FluentCart vs WooCommerce

If you're familiar with WooCommerce, here are key differences:

Feature	WooCommerce	FluentCart
Plugin Size	Large (many features)	Lightweight, focused
Performance	Can be heavy	Fast, optimized
Setup Complexity	More options	Simpler setup
Extensions	Massive ecosystem	Growing marketplace
BuddyX Pro Support	Full support	Full support
Cart Experience	Page-based	Drawer-based
Admin Interface	WordPress native	Custom React UI

When to Use FluentCart:

You want lightweight, fast e-commerce
You're starting a new store
You need simple, focused features
You prefer modern drawer-based cart

When to Use WooCommerce:

You need extensive third-party plugins
You have complex requirements
You're migrating existing WooCommerce store
You need specific WooCommerce extensions

Common Questions

Does the cart icon work on mobile?

Yes! The cart icon is fully responsive and works on all devices. On mobile, it remains in the mobile header menu.

Can I customize product layouts?

Yes. BuddyX Pro provides:

Sidebar options via Customizer
Full-width or sidebar layouts per product
Custom CSS for styling
Child theme for template overrides

How do I change the number of products displayed?

Go to FluentCart > Settings > Products
Find Products Per Page setting
Enter desired number (e.g., 12, 16, 20)
Save settings

Can I hide the cart icon?

Yes:

Go to Appearance > Customize
Navigate to Header > Primary Header
Find Enable Cart Icon setting
Toggle to No
Click Publish

Why is my checkout page full width?

BuddyX Pro automatically applies full-width template to checkout for optimal experience. This is intentional and recommended.

To change:

Edit checkout page
Find Page Attributes
Select different template
Update page (not recommended)

Can I add product reviews?

FluentCart doesn't include reviews by default. Options:

Use review plugin
- Install "FluentCart Reviews" (if available)
- Or use generic WordPress review plugin
Use comment system
- Enable WordPress comments on products
- Style via custom CSS
Third-party integration
- Integrate Judge.me or similar service

How do I organize products by category?

Go to FluentCart > Categories
Create new category (e.g., "Electronics")
When creating/editing product:
- Find Product Categories box
- Check desired categories
Save product

Category pages: Automatically created at /product-categories/category-name/

Can I integrate with BuddyPress?

Yes! FluentCart works alongside BuddyPress:

Members can view their order history
Purchase notifications appear in activity
Orders link to member profiles
Group leaders can sell to members

Requirements:

Products must share same category or tag
Must have at least 2+ products published
Related products feature must be enabled

To enable:

Go to FluentCart > Settings > Products
Find Related Products option
Set to Enabled
Configure number to display
Save settings

How do I create product variations?

Edit or create product
Select Product Type: Variable Product
Add Attributes (e.g., Size: Small, Medium, Large)
Go to Variations tab
Click Add Variation
Set price/SKU for each variation
Save product

Can I sell subscriptions?

Yes, with FluentCart Pro:

Install FluentCart Pro
Create new product
Select Product Type: Subscription
Configure billing cycle (weekly, monthly, yearly)
Set subscription price
Save product

Troubleshooting

Cart Icon Not Appearing

Problem: Cart icon missing from header.

Solutions:

Go to Customize > Site Header
Verify Site Cart is set to Yes
Ensure WooCommerce/SureCart are not active (conflict)
Clear browser and server cache
Check that FluentCart is active

Products Not Displaying

Problem: Shop page empty or products missing.

Solutions:

Verify products are published (not drafts)
Check product visibility settings
Flush permalinks (Settings > Permalinks > Save)
Ensure shop page is configured correctly
Check for theme conflicts

Checkout Page Errors

Problem: Checkout doesn't load or shows errors.

Solutions:

Verify checkout page exists and has FluentCart shortcode
Check that payment gateway is configured
Enable WordPress debug to see error messages
Test with default theme to rule out theme conflict
Clear all caching

Cart Count Not Updating

Problem: Badge shows wrong number or doesn't update.

Solutions:

Clear browser cache
Check for JavaScript errors in console
Ensure FluentCart JS is loading
Disable conflicting plugins
Re-save theme customizer settings

Problem: Product pages missing sidebar even when enabled.

Solutions:

Add widgets to FluentCart sidebar widget areas
Check Customize > Sidebar product setting
Verify sidebar isn't set to "None"
Ensure widgets are in correct widget area
Clear theme cache

Payment Gateway Not Working

Problem: Cannot process payments.

Solutions:

Verify gateway credentials are correct
Check that gateway is enabled
Test with Stripe/PayPal test mode first
Review gateway documentation
Check for SSL certificate (required for live payments)

Performance Optimization

Speed Recommendations

Use caching: Enable WordPress object cache
Optimize images: Compress product images
CDN: Use CDN for product gallery
Lazy loading: Enable for product images
Minify assets: Combine CSS/JS files

Best Practices

Limit products per page to 12-20
Use appropriately sized product images
Enable browser caching
Use lazy load for product galleries
Optimize database regularly

Header Cart Icon - Configure cart display
Sidebar Layouts - Product page sidebars
Page Templates - Full-width layouts

Additional Resources

FluentCart Documentation - Official docs
FluentCart HOOKS Reference - Developer hooks
FluentCart README - Technical details

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Marketplace

Dokan, WC Vendors, and other multivendor integrations.

Dokan Hooks Reference

Developer documentation for customizing BuddyX Pro's Dokan integration.

Action Hooks

buddyx_store_container_open

Opens the container wrapper for store pages.

add_action( 'buddyx_store_container_open', 'my_store_container_open', 5 );

function my_store_container_open() {
    echo '<div class="my-custom-wrapper">';
}

Default behavior: Outputs <div class="container">

Priority: 10

buddyx_store_container_close

Closes the container wrapper for store pages.

add_action( 'buddyx_store_container_close', 'my_store_container_close', 15 );

function my_store_container_close() {
    echo '</div><!-- .my-custom-wrapper -->';
}

Default behavior: Outputs </div>

Priority: 10

dokan_store_profile_frame_after

Dokan action hook - BuddyX Pro templates trigger this after the store header.

add_action( 'dokan_store_profile_frame_after', 'my_after_store_header', 10, 2 );

function my_after_store_header( $store_user_data, $store_info ) {
    // Add content after store header
    echo '<div class="store-announcement">';
    echo 'Free shipping on orders over $50!';
    echo '</div>';
}

Parameters:

$store_user_data (object) - Vendor user data
$store_info (array) - Store information array

Theme Functions

buddyx_store_container_open()

Outputs the opening container div for store pages.

// Override in child theme
function buddyx_store_container_open() {
    ?>
    <div class="container wide-container">
    <?php
}

Usage: Called via action hook, typically in store templates.

buddyx_store_container_close()

Outputs the closing container div for store pages.

// Override in child theme
function buddyx_store_container_close() {
    ?>
    </div><!-- .wide-container -->
    <?php
}

render_store_header_on_top()

Renders the store header in the "top" position.

// Check header position and render
$position = get_theme_mod( 'store_header_position', 'top' );
if ( 'top' === $position ) {
    render_store_header_on_top();
}

Output:

<div class="dokan-single-store dokan-single-store-top">
    <div class="store-page-wrap" role="main">
        <!-- Store header template -->
    </div>
</div>

Customizer Settings

Getting Customizer Values

// Store header position
$position = get_theme_mod( 'store_header_position', 'top' );
// Values: 'top' or 'inner'

// Store layout (sidebar position)
$layout = get_theme_mod( 'store_layout', 'left' );
// Values: 'left' or 'right'

Template Variables

Store Page (store.php)

Variable	Type	Description
`$store_user`	object	Dokan vendor object
`$store_info`	array	Store information
`$map_location`	string	Store location
`$layout`	string	Sidebar layout
`$position`	string	Header position

// Example: Access store user in template
$store_user = dokan()->vendor->get( get_query_var( 'author' ) );
$store_name = $store_user->get_shop_name();
$store_url = $store_user->get_shop_url();

CSS Classes

Store Layout Classes

Class	Applied When
`.layout-left`	Left sidebar layout
`.layout-right`	Right sidebar layout
`.dokan-single-store`	Main store container
`.dokan-single-store-top`	Store header at top

Container Classes

Class	Element
`.container`	Main container wrapper
`.dokan-store-wrap`	Store content wrapper
`.store-page-wrap`	Store page inner wrapper

Template Overrides

Available Templates

Override these templates in your child theme:

child-theme/dokan/
├── store.php              # Main store page
├── store-sidebar.php      # Store sidebar
├── store-toc.php          # Table of contents
├── store-reviews.php      # Store reviews
└── vendor-biography.php   # Vendor biography

Override Example

Child theme: dokan/store.php

<?php
/**
 * Custom store template
 */

$store_user = dokan()->vendor->get( get_query_var( 'author' ) );
$store_info = $store_user->get_shop_info();

get_header( 'shop' );

// Your custom store layout here

get_footer( 'shop' );

Removing Theme Modifications

Use Default Store Container

// Remove theme container
remove_action( 'buddyx_store_container_open', 'buddyx_store_container_open' );
remove_action( 'buddyx_store_container_close', 'buddyx_store_container_close' );

// Add your own
add_action( 'buddyx_store_container_open', function() {
    echo '<div class="my-container">';
});

add_action( 'buddyx_store_container_close', function() {
    echo '</div>';
});

Dokan API Reference

Get Vendor Object

// By author query var (on store page)
$vendor = dokan()->vendor->get( get_query_var( 'author' ) );

// By user ID
$vendor = dokan()->vendor->get( $user_id );

Vendor Methods

$vendor->get_shop_name();       // Store name
$vendor->get_shop_url();        // Store URL
$vendor->get_shop_info();       // All store info array
$vendor->get_location();        // Store location
$vendor->get_banner();          // Banner URL
$vendor->get_gravatar();        // Avatar URL
$vendor->is_featured();         // Is featured vendor
$vendor->get_rating();          // Store rating

WooCommerce Hooks Used

The store template uses these WooCommerce hooks:

// Before main content
do_action( 'woocommerce_before_main_content' );

// Product loop
woocommerce_product_loop_start();
wc_get_template_part( 'content', 'product' );
woocommerce_product_loop_end();

// After main content
do_action( 'woocommerce_after_main_content' );

Yoast SEO Integration

The store template supports Yoast breadcrumbs:

if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}

README - Technical overview
Customer Guide - Setup instructions
WooCommerce Hooks - WooCommerce customization
Developer Hooks - All theme hooks

Dokan Multi-Vendor Marketplace Setup

Learn how to create a multi-vendor marketplace with Dokan and BuddyX Pro theme where multiple sellers can manage their own stores.

Overview

BuddyX Pro provides complete integration with Dokan Multi-Vendor, transforming your WordPress site into a fully functional marketplace like Etsy or Amazon. Vendors get their own storefronts, dashboards, and product management tools while you earn commissions on every sale.

What You Can Do

With Dokan and BuddyX Pro, you can create:

Multi-Vendor Marketplace - Allow unlimited vendors to sell products
Individual Vendor Stores - Each vendor gets a custom storefront with unique URL
Vendor Registration - Simple signup process for new sellers
Vendor Dashboards - Sellers manage products, orders, and earnings independently
Commission System - Automatically collect commissions from vendor sales
Store Directories - Display all vendors in searchable, filterable lists
Vendor Reviews & Ratings - Customers can rate vendor performance
Social Integration - Connect vendor profiles with BuddyPress member pages

Installation Steps

Step 1: Install Required Plugins

You need both WooCommerce and Dokan:

Go to Plugins → Add New
Search for "WooCommerce" and click Install Now, then Activate
Search for "Dokan Lite" and click Install Now, then Activate
(Optional) Install Dokan Pro for advanced features

Step 2: Run WooCommerce Setup

Complete the WooCommerce setup wizard (#woocommerce-setup-bxpro))
Configure payment gateways and shipping methods
These settings apply to all vendor products

Step 3: Configure Dokan Settings

Navigate to Dokan → Settings to configure your marketplace:

General Settings

Setting	Recommended Value	Description
Admin Commission	20%	Percentage you earn from each sale
Admin Commission Type	Percentage	How commissions are calculated
Vendor Store URL	`store`	URL slug for vendor stores (example.com/store/vendor-name)
Selling Status	Enable	Allow vendors to sell products

Withdrawal Settings

Setting	Recommended Value	Description
Withdraw Methods	PayPal, Bank Transfer	How vendors receive payments
Minimum Withdraw Amount	$50	Prevent small, frequent withdrawals
Withdraw Threshold	7 days	Days before vendors can withdraw earnings

Vendor Registration

Setting	Recommended Value	Description
Enable Registration	Yes	Allow new vendor signups
Enable Terms & Conditions	Yes	Vendors must agree to your terms
Enable Vendor Verification	Recommended	Manually approve new vendors

Step 4: Configure the BuddyX Pro Store Header

Navigate to Appearance → Customize → Dokan Store. BuddyX Pro adds one Dokan-specific control here:

Option	Choices	Default	Description
Store Header Position	Top, Inner	Top	Where the store banner and info sit on vendor stores

Pro Tip: Use "Top" header position for prominent vendor branding with large banner images. Choose "Inner" to place the store info inside the content column.

Note: BuddyX Pro renders vendor stores with a left sidebar layout; sidebar position is not a Customizer option. The number of products per row and other grid settings are controlled by Dokan itself under Dokan → Settings, not by the theme.

Vendor Store Features

Store Header & Branding

Each vendor store includes:

Store Banner - Full-width header image (1920×400px recommended)
Store Logo - Vendor brand logo displayed prominently
Store Name - Customizable business name
Store Tagline - Brief description or slogan
Store Rating - Average rating based on customer reviews
Store Address - Physical location (if provided)
Social Media Links - Connect Facebook, Twitter, Instagram, etc.

The store sidebar automatically displays:

Vendor profile picture
Store rating and review count
Contact button (email/message)
Store address with map
Business hours
Recent products
Product categories

Store Layout

BuddyX Pro renders vendor stores with a left sidebar layout:

[Sidebar] [Products Grid]

What this gives you:

Vendor info and filters always visible on the left
Good for category-heavy stores
Consistent storefront across every vendor

Sidebar position is fixed by the theme and is not a Customizer option. The only theme-level Dokan control is Store Header Position (Top / Inner) under Appearance → Customize → Dokan Store. To change the store grid or turn the sidebar off on a specific store, use Dokan's own settings or custom CSS targeting the .buddyx-dokan body class.

Vendor Registration & Onboarding

Enable Vendor Registration

Go to Dokan → Settings → General
Enable "Enable Vendor Registration"
Choose registration page location
Set Terms & Conditions page

Registration Form Fields

Default fields collected:

First Name & Last Name
Store Name (auto-generated URL slug)
Store URL Preview
Email Address
Phone Number (optional)
Terms & Conditions Agreement

Vendor Verification Options

Option 1: Automatic Approval

Vendors can sell immediately after registration
Best for: Low-risk products, trusted communities

Option 2: Manual Approval

Admin reviews each vendor before activation
Best for: High-value products, quality control needed

Set in: Dokan → Settings → General → Enable Vendor Verification

Vendor Dashboard Features

Vendors access their dashboard at: yoursite.com/dashboard/

Dashboard Sections

Section	What Vendors Can Do
Dashboard	View sales overview, recent orders, earnings
Products	Add, edit, delete products
Orders	View and manage customer orders
Earnings	Track revenue and commissions
Withdraw	Request payment withdrawals
Store Settings	Customize store appearance, bio, social links
Reviews	View and respond to customer reviews
Reports	View sales analytics and statistics

BuddyPress Integration

Vendor Profile Widgets

BuddyX Pro includes a special widget to display vendor stores on BuddyPress member profiles:

Go to Appearance → Widgets
Find Vendor Profile Widget
Add to Member Profile Sidebar widget area
Configure display options:
- Show store banner
- Display product count
- Show recent products
- Show store rating

Connect Member Profiles to Stores

Vendors automatically get:

Link to their store on their BuddyPress profile
Activity feed updates for new products
Store badge on member directory
Integration with social features

Enable in: Dokan → Settings → BuddyPress Integration

Store Directory & Listings

Enable Store List Page

Create a page to display all vendors:

Go to Pages → Add New
Name it "Vendors" or "Stores"
Add the shortcode: [dokan-stores]
Publish the page

Store List Customization

Configure how stores appear in listings:

Shortcode Options:

[dokan-stores per_page="12" search="yes" per_row="3"]

Parameter	Values	Description
`per_page`	Number (12, 24, 36)	Stores displayed per page
`search`	yes/no	Show search box
`per_row`	2, 3, 4	Stores per row in grid

Store Card Information

Each store card displays:

Store logo/avatar
Store name and rating
Number of products
Store location
"Visit Store" button
Featured products preview

Commission Settings

Global Commission

Set default commission for all vendors:

Go to Dokan → Settings → General
Set Admin Commission percentage
Choose Commission Type:
- Percentage - Fixed percentage of sale price (e.g., 20%)
- Flat - Fixed amount per sale (e.g., $5)
- Combine - Both percentage + flat fee

Per-Vendor Commission (Dokan Pro)

Override global settings for specific vendors:

Go to Dokan → Vendors
Edit vendor profile
Set custom commission rate
Save changes

Example Use Cases:

Premium vendors: Lower commission (15%)
New vendors: Higher commission during trial (30%)
High-volume vendors: Reduced rate (10%)

Vendor Verification & Trust

Verification Badge

Enable verified vendor badges:

Go to Dokan → Settings → Selling Options
Enable "Show Verified Badge"
Manually verify vendors in Dokan → Vendors

Trust Elements

BuddyX Pro displays these trust signals:

⭐ Store Rating (1-5 stars)
✓ Verified Vendor Badge
📊 Total Sales Count
💬 Review Count
📅 Member Since Date
🏆 Featured Vendor Badge (Pro)

Store Reviews & Ratings

Customers can rate vendors based on:

Product Quality - How good are the products?
Customer Service - How responsive is the vendor?
Shipping Speed - How fast do orders arrive?
Communication - How well does vendor communicate?

Enable in: Dokan → Settings → General → Enable Vendor Rating

Recommended Configurations by Marketplace Type

Fashion & Apparel Marketplace

Settings:

Store Header Position: Top (prominent branding)
Products Per Row: 4 (set in Dokan settings)
Commission: 20-25%
Minimum Withdraw: $100
Verification: Manual (quality control)

Why: Fashion requires filtering by size, color, style. Higher commission justified by competitive market.

Handmade & Crafts Marketplace (like Etsy)

Settings:

Store Header Position: Inner (content-focused)
Products Per Row: 3 (set in Dokan settings)
Commission: 15-20%
Minimum Withdraw: $50
Verification: Automatic with review

Why: Handmade items need visual prominence. Lower commission supports artisans. Quick onboarding encourages signups.

Digital Products Marketplace

Settings:

Store Header Position: Top (banner-forward)
Products Per Row: 4 (set in Dokan settings)
Commission: 25-35%
Minimum Withdraw: $25
Verification: Manual (prevent piracy)

Why: Digital products have no shipping costs, higher margins support higher commissions. Manual verification prevents illegal content.

Electronics & Tech Marketplace

Settings:

Store Header Position: Top (brand trust)
Products Per Row: 3 (set in Dokan settings)
Commission: 10-15%
Minimum Withdraw: $200
Verification: Manual (authenticity checks)

Why: High-value items need lower commission. Strong verification prevents counterfeit products.

Food & Local Goods Marketplace

Settings:

Store Header Position: Inner (content-focused)
Products Per Row: 3 (set in Dokan settings)
Commission: 15-20%
Minimum Withdraw: $50
Verification: Manual (health compliance)

Why: Food safety requires verification. Moderate commission balances platform costs with vendor margins.

Advanced Features (Dokan Pro)

Product Subscription

Allow vendors to pay monthly/yearly fees:

Free Plan - Limited products (e.g., 5 products)
Basic Plan - Medium products (e.g., 50 products)
Premium Plan - Unlimited products + featured listing

Geolocation

Enable location-based vendor discovery:

Show nearby vendors to customers
Filter stores by distance
Display vendor location on map

Follow Store

Let customers follow their favorite vendors:

Email notifications for new products
Updates in customer dashboard
Build vendor loyalty

Store SEO

Vendors can optimize their stores:

Custom meta titles & descriptions
Social media previews
SEO-friendly store URLs

Vendor Analytics

Advanced reporting for vendors:

Sales by product
Revenue trends
Customer demographics
Best-selling items

Customization Options

Store Header Customization

Vendors can customize:

Banner Image:

Recommended size: 1920×400px
Formats: JPG, PNG
Upload in: Dashboard → Settings → Store

Store Logo:

Recommended size: 300×300px
Square format works best
Displays on store page and listings

Color Scheme (Pro):

Primary store color
Button colors
Banner overlay

Store Information

Vendors can add:

Store biography (about page)
Business hours
Shipping policies
Return policies
Terms of Service
Privacy policy
FAQ section

Payment & Withdrawal

Payment Flow

Customer Purchases → Payment goes to admin account
Commission Calculated → Your commission is deducted
Vendor Earnings → Remaining amount goes to vendor balance
Withdrawal Request → Vendor requests payout
Admin Approval → You approve withdrawal
Payment Sent → Vendor receives payment via chosen method

Withdrawal Methods

Configure available methods:

PayPal:

Instant transfers
Small fees apply
Requires verified PayPal account

Bank Transfer:

Direct deposit
2-5 business days
Requires bank details

Custom Methods (Pro):

Skrill
Stripe Connect (automatic payouts)
Custom payment gateway

Withdrawal Settings

Setting	Recommended	Description
Min. Amount	$50-$100	Prevents micro-withdrawals
Threshold Days	7-14 days	Buffer for refunds
Auto Approval	No	Manual review recommended

Common Questions

Can vendors message customers directly?

Yes, with Dokan Pro. Vendors can communicate with customers through the built-in messaging system. Messages are tracked in the vendor dashboard.

Do vendors need their own payment gateway?

No. All payments go through your WooCommerce payment gateways. You collect the money and pay vendors based on your commission structure.

Can I set different commissions for different products?

Yes, with Dokan Pro. You can set:

Global commission (all vendors)
Per-vendor commission
Per-category commission
Per-product commission

How do refunds work in a marketplace?

When a refund is issued:

Customer receives full refund
Vendor's earnings are reduced
Your commission is returned
If vendor already withdrew, you can manually adjust balance

Can vendors offer coupons and discounts?

Yes. Vendors can create their own coupon codes from their dashboard. Coupons apply only to their products.

Is there a mobile app for vendors?

Dokan offers a separate mobile app (iOS/Android) for vendors to manage their stores on the go. Available with Dokan Pro.

Can I feature certain vendors?

Yes. Mark vendors as "Featured" in Dokan → Vendors. Featured vendors appear at the top of store listings with a special badge.

How do I prevent vendor spam or low-quality products?

Best practices:

Enable manual vendor verification
Set product approval requirements (Dokan Pro)
Review new vendor stores regularly
Create strict vendor guidelines
Use product quality reporting system

Can vendors see each other's earnings?

No. Vendor dashboards are completely isolated. Each vendor only sees their own data.

Does this work with WooCommerce extensions?

Most WooCommerce extensions work with Dokan. Compatible extensions include:

WooCommerce Subscriptions
WooCommerce Bookings
Product Add-ons
PDF Invoices

Troubleshooting Common Issues

Issue: Vendor store pages show 404 error

Solution:

Go to Settings → Permalinks
Click Save Changes (without making changes)
This regenerates permalink structure
Visit vendor store again

Solution:

Check vendor uploaded image to Dashboard → Settings → Store
Verify image size (max 2MB recommended)
Clear browser cache
Check theme setting: Customize → Dokan Store → Store Header Position

Issue: Vendors can't edit products

Solution:

Verify vendor is approved and active
Check Dokan → Settings → General → Selling Status is enabled
Review user role capabilities
Check for plugin conflicts (disable other plugins temporarily)

Issue: Commission calculations incorrect

Solution:

Go to Dokan → Settings → General
Verify commission percentage and type
Check if product has custom commission override
Review WooCommerce tax settings (commissions calculated before/after tax)

Issue: Store list page not showing all vendors

Solution:

Check shortcode: [dokan-stores per_page="50"]
Verify vendors are "Active" status in Dokan → Vendors
Check vendor published products (vendors with 0 products may be hidden)
Clear page cache

Issue: Withdrawals not working

Solution:

Verify withdrawal method is configured: Dokan → Settings → Withdraw
Check minimum withdraw amount requirement
Verify threshold days have passed
Ensure vendor has sufficient balance
Check withdrawal request status in Dokan → Withdraw

Security & Best Practices

Vendor Approval Workflow

New Vendor Registers → Receives pending status
Admin Reviews → Check store info, business legitimacy
Request Documentation → Business license, tax ID if required
Approve Vendor → Activate selling privileges
Monitor First Month → Review initial products and customer feedback

Product Approval Process (Pro)

Enable product review before publishing:

Go to Dokan → Settings → Selling Options
Enable "Product Status" → "Pending Review"
Review new products in Products → All Products
Approve or reject with feedback

Terms & Conditions

Create clear vendor agreements covering:

Commission structure and payment terms
Product listing requirements and restrictions
Prohibited items and content policies
Intellectual property rights
Vendor responsibilities for customer service
Dispute resolution process
Platform liability limitations

Set in: Dokan → Settings → General → Vendor Registration → Terms & Conditions

Performance Optimization

For Marketplaces with 100+ Vendors

Use Caching Plugin
- Install WP Rocket or W3 Total Cache
- Enable object caching (Redis/Memcached)
- Exclude vendor dashboards from cache
Optimize Database
- Install WP-Optimize
- Clean order data older than 2 years
- Remove spam reviews and transients
Use CDN
- CloudFlare or similar
- Speeds up image loading
- Reduces server load
Upgrade Hosting
- Minimum: 4GB RAM, SSD storage
- Recommended: VPS or dedicated server
- Consider managed WooCommerce hosting

Image Optimization

Require vendors to use optimized images:

Install image compression plugin (ShortPixel, Imagify)
Set maximum upload size (1MB for products)
Automatically compress uploads
Generate optimized thumbnails

Next Steps

After setting up Dokan:

Customize Store Pages - Configure layouts and colors
Set Up Commission Structure - Define your revenue model
Create Vendor Guidelines - Document policies and procedures
Test Vendor Experience - Create a test vendor account
Launch Marketing - Promote your marketplace to potential vendors

WooCommerce Setup Guide - Required base setup
BuddyPress Integration - Connect vendors with community
Shop Layouts - Product display customization

Need Help?

Dokan Documentation: wedevs.com/docs/dokan Theme Support: support@wbcomdesigns.com Community Forum: wbcomdesigns.com/support

Note: Some features require Dokan Pro. Check wedevs.com/dokan/pricing for feature comparison.

WC Vendors Marketplace Setup

Learn how to create a lightweight, performance-focused multi-vendor marketplace with WC Vendors and BuddyX Pro theme.

Overview

BuddyX Pro provides full integration with WC Vendors, the original and most streamlined marketplace solution for WordPress. WC Vendors is known for its simplicity, clean code, and excellent performance even with hundreds of vendors.

What You Can Do

With WC Vendors and BuddyX Pro, you can:

Lightweight Marketplace - Fast, efficient, no bloat
Simple Vendor Dashboards - Easy-to-use vendor interface
Commission Management - Flexible commission structures
Product Assignment - Automatic vendor-product linking
Custom Store URLs - Each vendor gets branded store page
Vendor Reviews - Built-in rating system (Pro)
Flexible Commission - Global, vendor, product, and category levels
PayPal Mass Pay - Bulk vendor payments (Pro)
Shipping Controls - Per-vendor shipping setup (Pro)
Tax Handling - Smart tax calculations
BuddyPress Integration - Connect stores with member profiles

Installation Steps

Step 1: Install Required Plugins

Install in this order:

Go to Plugins → Add New
Install and activate:
- WooCommerce (required)
- WC Vendors Marketplace (free version)
- WC Vendors Pro (optional, advanced features)

Step 2: Complete WooCommerce Setup

Follow the WooCommerce Setup Guide:

Configure payment gateways
Set up shipping zones
Define tax rates
Create essential pages

Step 3: Configure WC Vendors

Navigate to WooCommerce → Settings → Vendors:

General Settings

Setting	Recommended	Description
Vendor Dashboard Page	Select/Create	Page with `[wcv_dashboard]` shortcode
Shop Settings Page	Select/Create	Page with `[wcv_shop_settings]` shortcode
Vendor Store URL	`vendor`	URL structure (example.com/vendor/store-name)

Commission Settings

Setting	Recommended	Description
Commission Type	Percentage	How you earn from sales
Commission Rate	20	Your percentage (enter as whole number)
Commission Fee	0	Additional fixed fee per sale
Give Tax	Enabled	Vendors receive tax amounts
Give Shipping	Enabled	Vendors receive shipping fees

Capabilities Settings

Setting	Recommended	Description
Submit Products	Enabled	Vendors can add products
Edit Published Products	Enabled	Vendors can update their products
View Orders	Enabled	Vendors see orders with their items
View Order Notes	Enabled	Vendors see private notes
Export CSV	Enabled	Vendors export order data

Step 4: Create Required Pages

WC Vendors needs these pages:

Vendor Dashboard:

Create page: "Vendor Dashboard"
Add shortcode: [wcv_dashboard]
Set template: Full Width
Publish page

Shop Settings:

Create page: "Shop Settings"
Add shortcode: [wcv_shop_settings]
Set template: Full Width
Publish page

Vendor List (Optional):

Create page: "Vendors" or "Sellers"
Add shortcode: [wcv_vendorslist]
Publish page

Set Pages in: WooCommerce → Settings → Vendors → General

Vendor Dashboard

WC Vendors provides a clean, focused dashboard.

Dashboard Overview

The main dashboard shows:

Sales Overview - Total sales and commission owed
Recent Orders - Latest orders containing vendor products
Quick Stats - Products, sales, pending commission
Date Range Filter - View specific time periods

Product Management

Add/Edit Products:

Product name and description
Featured image and gallery
Regular and sale prices
Stock management
Categories and tags
Attributes and variations
Shipping settings (Pro)
Downloads (for digital products)

Product Approval:

Products go to "Pending Review" status
Admin approves before publishing
Vendor receives notification when approved

Order Management

View Orders:

See orders containing their products only
View customer details
See order total and their commission
Check shipping addresses
Update order status (Pro)
Add order notes (Pro)
Mark shipped (Pro)

Commission Display:

Shows vendor's earnings per order
Excludes admin commission automatically
Includes/excludes tax based on settings
Includes/excludes shipping based on settings

Shop Settings

Vendors customize their store:

Store Details:

Shop name (appears in store header)
Store description (about section)
Store banner image (1920×400px)
Store icon/logo (300×300px)

Contact Information:

Seller info (name, email, phone)
Company URL
Payment email (for PayPal)

Social Media:

Each store profile exposes eight social fields. BuddyX Pro renders whichever ones the vendor fills in as icon links on the store header.

Facebook page (Facebook URL)
Twitter username
Instagram handle (Instagram Username)
YouTube channel (YouTube URL)
LinkedIn profile (LinkedIn URL)
Pinterest profile (Pinterest URL)
Snapchat username
Telegram username

Policies (Pro):

Shipping policy
Return policy
Privacy policy

BuddyX Pro Store Styling

BuddyX Pro automatically enhances WC Vendors stores.

Store Page Layout

Store Header:

Full-width banner image with overlay
Store logo/icon prominently displayed
Store name and rating
Total products count
Vendor description/bio
Social media icon links
Contact vendor button
Store location (if provided)

Product Grid:

Customizable columns (2, 3, or 4)
Product filters and sorting
Pagination
WooCommerce product loop styling

Store Sidebar (Optional):

Vendor information card
Store rating and reviews
Product categories
Recent products
Contact form widget

BuddyX Theme Integration

The theme includes helper functions for WC Vendors:

Banner Display:

buddyx_wc_vendors_banner_image( $vendor_id )

Displays vendor banner with fallback to default.

Store Icon:

buddyx_wc_vendors_stor_icon( $vendor_id, $width, $height )

Shows store logo or avatar.

Store Rating:

buddyx_wc_vendors_shop_rating( $vendor_id )

Displays star rating with review count.

Store Description:

buddyx_wc_vendors_shop_description( $vendor_id )

Shows truncated store description (350 characters default).

Social Media Icons:

buddyx_wc_vendors_format_store_social_icons( $vendor_id, $size, $hidden )

Renders social media links as icons.

Vendor Registration

Enable Vendor Registration

Go to WooCommerce → Settings → Vendors → Capabilities
Enable "Can Apply to Become a Vendor"
Choose registration method

Registration Methods

Option 1: Manual Application

Users apply to become vendors
Admin reviews and approves
Best for curated marketplaces

Option 2: Automatic Approval

Users automatically become vendors
Immediate selling access
Best for open marketplaces

Set in: WooCommerce → Settings → Vendors → Capabilities → Approve Vendor Applications Manually

Application Form

Users fill out:

Username and email (if not logged in)
Shop name
Shop URL slug
Vendor description
Terms & conditions acceptance (if configured)

Approval Process

For Manual Approval:

User submits application
Admin receives email notification
Review application in WooCommerce → Vendors
Click "Approve" or "Deny"
Vendor receives approval email
Vendor can access dashboard and add products

Commission System

WC Vendors offers one of the most flexible commission systems.

Global Commission

Set default for all vendors:

Go to WooCommerce → Settings → Vendors → Commission
Set commission type and rate
Configure what's included

Commission Types:

Type	Example	Calculation
Percentage	20%	20% of product price goes to you
Fixed	$5	You get $5 per product sold
Percentage + Fixed	15% + $2	Combined calculation

Per-Vendor Commission (Pro)

Override global commission for specific vendors:

Go to WooCommerce → Vendors
Edit vendor profile
Scroll to "Commission" section
Set custom rate
Save changes

Use Cases:

New vendors: Higher commission during probation
Top performers: Reward with lower commission
Bulk sellers: Volume discounts
Premium vendors: Negotiated rates

Per-Product Commission (Pro)

Set commission at product level:

Edit any product
Scroll to "WC Vendors Pro Product" metabox
Set product-specific commission
Overrides vendor and global settings

Example:

Regular products: 20% commission
High-margin digital products: 30% commission
Clearance items: 10% commission

Per-Category Commission (Pro)

Set rates by product category:

Go to Products → Categories
Edit category
Set commission for this category
Applies to all products in category

Example:

Electronics: 10% (lower margin)
Fashion: 25% (higher margin)
Digital: 35% (no shipping costs)

Commission Priority

When multiple commissions exist:

Product (highest priority)
Category
Vendor
Global (lowest priority, fallback)

Store Directory & Vendor List

Create Vendor Directory

Display all vendors in a searchable list:

Go to Pages → Add New
Title: "Vendors" or "Our Sellers"
Add shortcode: [wcv_vendorslist]
Publish page

Vendor List Customization (Pro)

Enhance with additional parameters:

[wcv_vendorslist show_products="yes" orderby="registered" order="ASC" vendors_per_page="12"]

Parameter	Values	Description
`show_products`	yes/no	Display vendor product count
`orderby`	registered, name, rating	Sort vendors by
`order`	ASC/DESC	Sort direction
`vendors_per_page`	Number	Vendors displayed per page

Vendor Card Display

Each vendor card shows:

Store banner image (background)
Store logo/avatar
Vendor name
Store rating (Pro)
Total products
"Visit Store" button
Sample products (if configured)

Recommended Configurations by Marketplace Type

Budget/Discount Marketplace

Settings:

Commission: 25-30% (high volume, low prices)
Product Approval: Manual (quality control)
Vendor Approval: Automatic
Min Commission: $0 (allow small sales)

Features:

Allow coupon creation
Show sale badges
Enable bulk pricing (Pro)
Quick checkout

Why: High commission justifies low prices. Volume over margin strategy.

Luxury/Premium Marketplace

Settings:

Commission: 10-15% (high ticket items)
Product Approval: Strict manual review
Vendor Approval: Application with verification
Min Commission: $50

Features:

Detailed product fields
High-resolution images required
Vendor verification badges
White-glove support

Why: High prices mean lower commission percentage still generates revenue. Quality is paramount.

Handmade/Artisan Marketplace

Settings:

Commission: 15-20%
Product Approval: Manual with feedback
Vendor Approval: Application review
Min Commission: $0

Features:

Vendor story sections
Custom product options
Made-to-order functionality
Gift services

Why: Support artisans with fair commission. Focus on unique, one-of-a-kind items.

Digital Downloads Marketplace

Settings:

Commission: 30-40%
Product Approval: Automated with manual spot checks
Vendor Approval: Email verification
Min Commission: $0

Features:

File version control
License key system
Update notifications
Preview/demo files

Why: No physical costs, higher margins support higher commission. Piracy prevention is key.

Local Services Marketplace

Settings:

Commission: 20-25%
Product Approval: Manual (verify legitimacy)
Vendor Approval: Business verification
Min Commission: $10

Features:

Location-based search
Booking system (Pro)
Service area mapping
Review system

Why: Services require verification. Geographic targeting important for local businesses.

Payment & Withdrawal

Payment Flow Overview

Customer Purchase → Money goes to site owner
Order Complete → Commission calculated
Vendor Balance → Earnings tracked in dashboard
Manual Payout → You pay vendors (free version)
PayPal Mass Pay → Automated bulk payments (Pro)

PayPal Mass Pay (Pro)

Automate vendor payments:

Setup:

Install WC Vendors Pro
Configure PayPal API credentials
Set payout schedule (weekly, monthly)
Define minimum payout amount

Process:

Review pending commissions
Select vendors to pay
Click "Mass Pay"
PayPal processes all payments
Vendors receive payment simultaneously

Manual Payment Process

Without PayPal Mass Pay:

Go to WooCommerce → Commission
Filter "Due" commissions
Export vendor payment report
Process payments via bank transfer, PayPal, etc.
Mark commissions as "Paid"
Vendors see updated balance in dashboard

Commission Settings

Configure payout rules:

Setting	Recommended	Description
Payment Schedule	Monthly	How often you pay vendors
Minimum Payout	$100	Threshold before payment
Payment Method	PayPal	How vendors receive payment
Payment Tax	Exclude	Handle tax separately

Vendor Reviews & Ratings (Pro)

Enable Store Reviews

Go to WooCommerce → Settings → WC Vendors Pro → Ratings
Enable "Store Ratings"
Configure rating options

Rating System

Customers rate vendors on multiple criteria:

Default Criteria:

Customer Service (1-5 stars)
Quality of Products (1-5 stars)
Delivery Speed (1-5 stars)
Product as Described (1-5 stars)

Overall Rating = Average of all criteria

Review Display

Ratings appear:

On vendor store header
In vendor directory listings
On products (vendor rating)
In vendor dashboard
In search results

Review Moderation

Options:

Auto-approve verified purchases
Require admin approval for all reviews
Allow vendors to respond
Hide low ratings until resolved (Pro)

Shipping Configuration (Pro)

Per-Vendor Shipping

Each vendor sets their own shipping:

Vendor Dashboard → Shipping:

Flat rate shipping
Free shipping threshold
International shipping
Shipping classes
Multiple rates per zone

Benefits:

Vendors control shipping costs
Accurate rates per product location
Vendor handles fulfillment
Customer sees combined shipping at checkout

Shipping Split Orders

When customers buy from multiple vendors:

Order automatically splits by vendor
Each vendor sees only their portion
Shipping calculated per vendor
Customer pays combined shipping
Each vendor fulfills independently

BuddyPress Integration

BuddyX Pro includes vendor profile widget:

Go to Appearance → Widgets
Find Vendor Profile Widget
Add to Member Profile Sidebar
Configure options:
- Show store banner
- Display product count
- Show store rating
- Recent products
- "Visit Store" button

Member-Store Connection

When BuddyPress is active:

Profile Enhancements:

Link to vendor store on member profile
Store badge on member directory
Vendor role indicator
Product count display

Activity Integration:

New product posts in activity stream
Store milestone achievements
Vendor badges and achievements

Private Messaging:

"Message Vendor" button
BuddyPress PM integration
Order-related messages

Advanced Features (WC Vendors Pro)

Frontend Dashboard

Enhanced vendor interface:

Pro Dashboard Sections:

Advanced reports with graphs
Customer management
Coupon creation
Shipping management
Store settings
Media library
Store SEO
Product import/export

Vacation Mode

Vendors can pause their stores:

Set vacation dates
Display vacation notice
Disable product purchases
Auto-reply to messages
Return date displayed

Store Policies

Vendors create custom policies:

Policy Types:

Shipping policy
Return & refund policy
Privacy policy
Terms of service
Store disclaimer

Display:

Tabs on store page
Footer of store
During checkout
In order emails

Advanced Product Options

Pro adds:

Product variations interface
Downloadable products
External/affiliate products
Grouped products
Product scheduling
Featured products
Product tags

Common Questions

Do vendors access WordPress admin?

In free version, vendors have limited admin access. With Pro, you can use Frontend Dashboard for zero admin access.

Can I charge vendors listing fees?

Not built-in. You'd need WooCommerce Subscriptions + WC Vendors Pro to charge vendors membership fees for store access.

How do I handle customer support?

Options:

Vendors handle their own support
Site owner provides all support
Hybrid: Vendors handle product questions, you handle tech issues

Configure in: WooCommerce → Settings → Vendors → Capabilities

Can vendors create discount coupons?

Yes, with WC Vendors Pro. Vendors create coupons in their dashboard that only apply to their products.

What happens with multi-vendor orders?

Orders containing products from multiple vendors are split. Each vendor sees only their portion in their dashboard.

Can I set different commission rates for different product categories?

Yes, with WC Vendors Pro. Set per-category commission rates that override global settings.

Do vendors see customer information?

Yes. Vendors see customer names, emails, and shipping addresses for orders containing their products. This is necessary for fulfillment.

Can I approve products before they go live?

Yes. Enable product approval in settings. All new products require admin approval before publishing.

How do refunds work?

When you issue a refund:

Customer receives money back
Vendor's commission is reversed
Your commission is reversed
If vendor was already paid, deduct from next payout

Troubleshooting Common Issues

Issue: Vendor dashboard shows blank page

Solution:

Go to Settings → Permalinks
Click Save Changes
Clear browser cache
Verify dashboard page has correct shortcode: [wcv_dashboard]
Check for PHP errors in debug.log

Issue: Commission not calculating correctly

Solution:

Go to WooCommerce → Settings → Vendors → Commission
Verify commission type and rate
Check "Give Tax" and "Give Shipping" settings
Review vendor-specific commission overrides
Test with simple product first
Check for decimal vs percentage confusion (20 not 0.20)

Issue: Vendor store page not found (404)

Solution:

Check WooCommerce → Settings → Vendors → General
Verify "Vendor Store URL" is set
Go to Settings → Permalinks and save
Check vendor has published products
Verify vendor account is active

Issue: Vendors can't upload product images

Solution:

Check PHP upload_max_filesize (8MB minimum)
Verify post_max_size is adequate
Check server disk space
Verify vendor has "Upload Files" capability
Test with smaller image file

Issue: Store header/banner not displaying

Solution:

Check vendor uploaded banner in Shop Settings
Verify image dimensions (1920×400px recommended)
Check theme compatibility
Look for CSS conflicts
Verify BuddyX helper functions are loading

Issue: Products not showing on vendor store

Solution:

Verify products are "Published" (not draft/pending)
Check product assigned to correct vendor
Look for inventory issues (out of stock hidden?)
Check catalog visibility settings
Clear product query cache

Security Best Practices

Vendor Screening

Before Approving Vendors:

Verify email address is valid
Check for business legitimacy (Google search)
Request business documentation for high-risk categories
Review store information completeness
Set probation period with higher commission

Product Quality Control

Mandatory Reviews:

Enable product approval for all vendors
Review first 5-10 products from new vendors
Create detailed product guidelines
Define prohibited items clearly
Spot-check random products monthly

Quality Standards:

Minimum description length
Required product images (at least 3)
Accurate categorization
Complete product attributes
Honest pricing (no deceptive tactics)

Terms & Conditions

Create vendor agreement covering:

Essential Terms:

Commission structure and calculation method
Payment schedule and minimum payout
Product guidelines and prohibited items
Intellectual property responsibilities
Customer service requirements
Refund and return policies
Data protection compliance
Account termination conditions
Dispute resolution process

Set Terms Page in: WooCommerce → Settings → Vendors → Capabilities → Terms and Conditions

Fraud Prevention

Red Flags:

Multiple accounts from same IP
Too-good-to-be-true pricing
Stolen product images
Copied descriptions from other sites
Unusual order patterns
Customer complaints about authenticity

Actions:

Enable manual product approval
Use image reverse search (Google Images)
Monitor vendor feedback closely
Require ID verification for high-value items
Implement strike system (3 strikes = ban)

Performance Optimization

For Large Marketplaces (200+ Vendors)

Server Requirements:

Minimum: 4GB RAM, SSD storage
PHP 7.4 or higher
MySQL 5.7+
OPcache enabled

Optimization Steps:

Install Caching Plugin
- WP Rocket, W3 Total Cache, or LiteSpeed
- Enable object caching (Redis preferred)
- Exclude vendor dashboards from cache
Database Optimization
- Index vendor_id columns
- Clean old order data (1+ years)
- Remove expired transients
- Optimize tables weekly
Limit Dashboard Queries
- Show last 30 days by default
- Paginate order lists
- Lazy load reports
- Cache vendor statistics
CDN for Static Assets
- Use CloudFlare or similar
- Offload images to CDN
- Cache CSS/JS files
- Enable image optimization

Vendor Store Performance

Speed up vendor pages:

Limit products displayed per page (24 maximum)
Optimize store banner images (compress before upload)
Use lazy loading for product images
Cache store pages (refresh every 6 hours)
Minimize custom widgets on store sidebar

Next Steps

After WC Vendors setup:

Create Test Vendor - Experience vendor dashboard
Test Full Purchase Flow - Order, commission, payout
Configure Email Templates - Customize vendor notifications
Write Vendor Guidelines - Document policies and rules
Launch Vendor Recruitment - Invite initial sellers
Monitor First Month - Address issues quickly

WooCommerce Setup Guide - Foundation configuration
BuddyPress Integration - Community features
Shop Layouts - Product display options

Need Help?

WC Vendors Documentation: docs.wcvendors.com Theme Support: support@wbcomdesigns.com WC Vendors Support: wcvendors.com/support

Note: Many advanced features require WC Vendors Pro. Compare versions at wcvendors.com/pricing.

WCFM Marketplace Setup

Learn how to create a professional multi-vendor marketplace with WCFM (WooCommerce Frontend Manager) and BuddyX Pro theme.

Overview

BuddyX Pro integrates seamlessly with WCFM Marketplace, giving you a powerful alternative to create an Amazon-style marketplace. WCFM provides an advanced frontend dashboard system where vendors manage everything without accessing WordPress admin.

What You Can Do

With WCFM Marketplace and BuddyX Pro, you can:

Frontend Store Management - Vendors manage stores from beautiful frontend dashboards
Zero Backend Access - Vendors never see WordPress admin area
Advanced Vendor Controls - More granular control than other marketplace solutions
Built-in Messaging - Vendor-customer communication system
Inquiry Management - Handle product questions efficiently
Advanced Reports - Detailed analytics and sales reports
Store Policies - Shipping, refund, and return policy management
Product Q&A - Built-in product question system
Vendor Coupons - Individual discount management
Staff Management - Vendors can add team members (Pro)

What BuddyX Pro Adds vs. What WCFM Does

WCFM provides the entire marketplace: vendor dashboards, product and order management, commissions, withdrawals, store directory, reviews, and every setting under WooCommerce → Settings → WCFM Marketplace.

BuddyX Pro adds presentation only:

A dedicated stylesheet (assets/css/wcfm.min.css) that loads automatically when the WCFM Marketplace add-on is active (gated on the WCFMmp class).
Theme styling scoped to WCFM's main content wrapper (#wcfm-main-content) so vendor stores, the store list, and the dashboard match the theme, dark mode included.

There are no WCFM-specific Customizer controls in the theme. Store sidebar, products per page/row, and tab options shown later in this guide are WCFM's own settings, not theme options.

Installation Steps

Step 1: Install Required Plugins

You need three core plugins:

Go to Plugins → Add New
Install and activate in this order:
- WooCommerce (required base)
- WCFM (free version)
- WCFM Marketplace (required for multi-vendor)

Step 2: Complete WooCommerce Setup

Follow the WooCommerce Setup Guide to configure:

Store details and currency
Payment gateways
Shipping zones
Tax settings

Step 3: Configure WCFM Marketplace

Navigate to WooCommerce → Settings → WCFM Marketplace:

Commission Settings

Setting	Recommended	Description
Commission Mode	Percent	How you earn from sales
Admin Commission	20%	Your percentage of each sale
Commission Tax	Include Tax	Calculate commission with tax
Commission Include Shipping	No	Don't take commission on shipping
Commission Include Coupon	Yes	Calculate on discounted price

Vendor Settings

Setting	Recommended	Description
Store URL	`store`	Vendor store slug (example.com/store/vendor-name)
Store Approval	Enabled	Manually approve new vendors
Product Approval	Enabled	Review products before publishing
Auto Publish Product	No	Maintain quality control

Withdrawal Settings

Setting	Recommended	Description
Withdrawal Mode	Threshold	Based on amount, not schedule
Minimum Withdrawal	$100	Prevents frequent small payouts
Withdrawal Tax	Deducted	Remove tax from withdrawals
Auto Approval	No	Manual review recommended

Step 4: Configure Store Pages

WCFM creates these pages automatically. Verify they exist:

Page	Purpose	Shortcode
Store Manager	Vendor dashboard	`[wcfm_store_manager]`
Stores List	Directory of all vendors	`[wcfm_stores]`
Articles	Vendor blog posts	`[wcfm_articles]`

Check: Go to Pages → All Pages and verify these pages exist.

Vendor Dashboard Features

WCFM provides the most comprehensive vendor dashboard in WordPress.

Dashboard Home

Vendors see at a glance:

Sales Summary - Today, this week, this month
Recent Orders - Latest customer purchases
Pending Products - Items awaiting approval
Low Stock Alerts - Inventory warnings
Recent Messages - Customer inquiries
Sales Chart - Visual revenue trends

Products Management

Full product control:

Add new products with all WooCommerce features
Manage simple, variable, grouped products
Set product attributes and variations
Upload product images and galleries
Configure inventory and SKUs
Set pricing and sale prices
Add product videos (Pro)

Orders Management

Vendors can:

View all orders containing their products
Update order status (processing, completed, etc.)
Print packing slips and invoices
Export order data to CSV
Filter orders by status and date
Add private order notes

Inquiry System

Built-in customer communication:

Product inquiries on product pages
Direct messages from customers
Email notifications for new messages
Message history and archive
Quick reply templates

Coupons Management

Vendors create their own discounts:

Percentage or fixed amount coupons
Minimum purchase requirements
Product/category restrictions
Usage limits per coupon
Expiration dates
Free shipping coupons

Reports & Analytics

Comprehensive sales data:

Sales by date range
Best-selling products
Sales by category
Customer analytics
Revenue trends
Product-wise sales reports

Store Customization

Store Info Settings

Vendors can configure:

Basic Details:

Store name and slug
Store description/bio
Store address and map
Business hours
Store logo (300×300px)
Store banner (1920×400px)

Contact Details:

Phone number
Email address
Contact form
Live chat widget code

Social Profiles:

Facebook page URL
Twitter handle
Instagram profile
YouTube channel
LinkedIn profile
Pinterest profile

Store Policies

Vendors must define:

Shipping Policy:

Shipping methods used
Processing time
Shipping carriers
International shipping details

Refund Policy:

Return window (e.g., 30 days)
Return conditions
Restocking fees
Refund processing time

Cancellation Policy:

When orders can be canceled
Cancellation fees
Refund for cancellations

BuddyX Pro Store Layouts

BuddyX Pro automatically styles WCFM stores to match your theme.

Store Page Elements

Store Header:

Full-width banner image with overlay
Store logo displayed prominently
Store rating and review count
Total products and followers
Follow store button
Social media icons
Store contact button

Store Content Area:

Product grid with customizable columns
Product filters (categories, price, etc.)
Store sidebar with vendor info
Store tabs (Products, About, Policies, Reviews)

Store Sidebar:

Vendor avatar and name
Store rating
Contact vendor button
Store location map
Business hours
Recent products widget
Product categories

Layout Options

Configure in WooCommerce → Settings → WCFM Store → Display:

Setting	Options	Description
Store Sidebar	Left, Right, None	Sidebar position
Products Per Page	12, 24, 36, 48	Products displayed
Products Per Row	2, 3, 4	Grid columns
Store Tabs	Customize	Choose which tabs to show

Vendor Registration

Enable Vendor Registration

Go to WooCommerce → Settings → WCFM Marketplace → Vendor
Enable "Vendor Registration"
Select registration page (default: My Account page)
Configure registration fields

Registration Form Fields

Standard fields:

First Name / Last Name
Username
Email Address
Password
Store Name
Store URL (auto-generated)
Vendor Type (if multi-type marketplace)

Optional fields (configure in settings):

Phone number
Store address
Business description
Terms & Conditions agreement

Vendor Approval Workflow

Automatic Approval:

Register → Email Verification → Active Vendor

Manual Approval:

Register → Pending Status → Admin Reviews → Approved/Rejected

Set in: WCFM Marketplace → Vendor Settings → Store Approval

Store Directory & Listings

Create Store List Page

The stores page displays all active vendors:

Create new page or edit existing
Add shortcode: [wcfm_stores]
Publish the page

Advanced Store List Shortcode

Customize the directory:

[wcfm_stores per_row="3" per_page="12" has_product="yes" search="yes" category="yes" orderby="newness"]

Parameter	Values	Description
`per_row`	2, 3, 4	Stores per row
`per_page`	Number	Stores per page
`has_product`	yes/no	Only show vendors with products
`search`	yes/no	Show search box
`category`	yes/no	Show category filter
`orderby`	newness, name, rating	Sort order

Store Card Display

Each store shows:

Store banner image
Store logo/avatar
Store name with verified badge
Store rating (1-5 stars)
Total products count
Store location
"Visit Store" button
Quick preview of products

Commission System

Global Commission

Set default for all vendors:

Go to WooCommerce → Settings → WCFM Marketplace → Commission
Set commission type and rate
Choose what's included in commission

Commission Types:

Type	Example	When to Use
Percent	20%	Standard marketplace model
Fixed	$5 per sale	Low-margin products
Percent + Fixed	15% + $2	Balanced approach
Fixed + Percent	$3 + 10%	Cover base costs plus percentage

Category-Specific Commission (Pro)

Set different rates by product category:

Go to Products → Categories
Edit category
Set custom commission
Overrides global setting

Example:

Electronics: 10% (lower margin)
Fashion: 25% (higher margin)
Digital: 30% (no physical costs)

Vendor-Specific Commission (Pro)

Customize rates for individual vendors:

Go to WCFM → Vendors
Edit vendor profile
Set custom commission
Highest priority override

Use Cases:

New vendors: Higher rate during trial
Top performers: Reward with lower rate
Bulk sellers: Volume discounts

Recommended Configurations by Marketplace Type

Fashion & Clothing Marketplace

Settings:

Products Per Row: 4
Store Sidebar: Right
Commission: 20-25%
Product Approval: Enabled
Minimum Withdrawal: $100

Features to Enable:

Size charts
Color swatches
Product videos
Customer Q&A
Style guides

Why: Fashion needs visual browsing, strict quality control, and detailed product information.

Handmade Artisan Marketplace

Settings:

Products Per Row: 3
Store Sidebar: Right
Commission: 15-20%
Product Approval: Manual review
Minimum Withdrawal: $50

Features to Enable:

Vendor stories (about page)
Custom product fields
Made-to-order options
Gift wrapping
Seller badges

Why: Support artisans with lower fees, showcase craftsmanship, build vendor-customer connections.

Digital Products Marketplace

Settings:

Products Per Row: 4
Store Sidebar: None (full width)
Commission: 25-35%
Product Approval: Strict
Minimum Withdrawal: $25

Features to Enable:

Instant downloads
License key management
Software version control
File update notifications
Demo versions

Why: Digital products have high margins, need piracy protection, require frequent updates.

Food & Grocery Marketplace

Settings:

Products Per Row: 3
Store Sidebar: Left (for categories)
Commission: 15-20%
Product Approval: Health compliance check
Minimum Withdrawal: $200

Features to Enable:

Delivery time slots
Perishable item warnings
Nutritional information
Allergen notices
Temperature zones

Why: Food safety is critical, local delivery focus, health regulations compliance.

Electronics & Tech Marketplace

Settings:

Products Per Row: 3
Store Sidebar: Left (specifications)
Commission: 8-12%
Product Approval: Authenticity verification
Minimum Withdrawal: $300

Features to Enable:

Technical specifications
Warranty information
Product comparisons
Expert reviews
Installation guides

Why: High-value items need lower commission, authenticity verification prevents counterfeits.

Advanced Features (WCFM Pro)

Vendor Subscription Plans

Create tiered membership for vendors:

Free Plan:

5 products maximum
Basic features only
Limited uploads
No featured products

Silver Plan ($29/month):

50 products
Priority support
Product videos
5 featured products

Gold Plan ($99/month):

Unlimited products
All features
API access
Unlimited featured products
Staff accounts

Configure in: WCFM → Subscription

Vendor Staff Management

Vendors can add team members:

Assign roles (manager, inventory, support)
Set permissions per staff member
Track staff activity
Staff login to vendor dashboard
Multi-user collaboration

Shipment Tracking

Advanced shipping features:

Tracking number system
Carrier integration
Delivery status updates
Customer tracking page
Estimated delivery dates

Store Followers

Build vendor loyalty:

Customers follow favorite stores
New product notifications
Exclusive follower discounts
Follower count displayed
Follow/unfollow system

Product Import/Export

Bulk operations:

Import products via CSV
Export vendor products
Bulk edit pricing
Mass update inventory
Clone products

Payment & Withdrawal System

Payment Flow

Customer Purchase → Payment to site owner (you)
Commission Calculated → Your percentage deducted
Vendor Balance Updated → Remaining amount added to vendor
Withdrawal Request → Vendor requests payout
Admin Review → Approve or reject
Payment Processed → Money sent to vendor

Withdrawal Methods

Configure available options:

PayPal:

Instant transfers
Requires vendor PayPal email
Small transaction fee
Global availability

Bank Transfer:

Direct deposit
2-5 business days
Requires bank details
Domestic only (usually)

Stripe Connect (Pro):

Automatic split payments
Real-time transfers
Vendor receives payment directly
Reduces admin workload

Custom Payment Methods:

Wire transfer
Cryptocurrency
Mobile money (Africa/Asia)
Custom gateway integration

Withdrawal Request Process

Vendor Side:

Goes to Dashboard → Withdrawal
Enters withdrawal amount
Selects payment method
Adds payment details (if needed)
Submits request

Admin Side:

Review in WCFM → Withdrawal
Verify amount and account
Approve or reject with note
Process payment manually
Mark as completed

Store Reviews & Ratings

Enable Store Reviews

Go to WCFM → Settings → Marketplace → Review
Enable "Store Review"
Configure review settings

Rating Criteria

Customers rate vendors on:

Product Quality (1-5 stars)
Shipping Speed (1-5 stars)
Communication (1-5 stars)
Customer Service (1-5 stars)

Overall Rating = Average of all criteria

Review Moderation

Options:

Auto-approve reviews
Require admin approval
Allow vendor responses
Report inappropriate reviews

Set in: WCFM Settings → Review Settings

Inquiry & Messaging System

Product Inquiries

Built-in Q&A on product pages:

Customer Side:

Click "Ask about this product"
Submit question via form
Receive email when answered
View all Q&A on product page

Vendor Side:

Receive notification
Answer from dashboard
Manage inquiry history
Set up FAQ templates

Direct Messaging

Vendor-customer communication:

Features:

Message inbox in dashboard
Email notifications
Message threads
File attachments (Pro)
Mark as read/unread
Quick reply templates

BuddyPress Integration

Vendor Member Profiles

Connect marketplace with community:

Profile Elements:

Store banner on member profile
Link to vendor store
Product count badge
Store rating display
Recent products widget
"Shop Now" button

Activity Integration

Store updates in activity feed:

New product announcements
Store milestones
Special promotions
Vendor blog posts

Enable in: WCFM Settings → BuddyPress Integration

Private Messaging

Link WCFM messaging with BuddyPress:

Customer can message vendor via BP
Messages sync between systems
Unified communication experience

Common Questions

Do vendors access WordPress admin?

No. WCFM provides a complete frontend dashboard. Vendors never see the WordPress backend, making it safer and simpler.

Can vendors create variations (size, color)?

Yes. WCFM fully supports WooCommerce variable products with unlimited variations, attributes, and custom options.

How do refunds work?

When you issue a refund:

Customer receives money back
Vendor balance is reduced by their share
Your commission is returned to you
If vendor withdrew already, manually adjust next payout

Can I charge vendors a membership fee?

Yes, with WCFM Pro. Create subscription plans that vendors pay monthly/yearly for store access and features.

Do vendors get their own payment gateway?

No. All payments go through your WooCommerce gateways. You hold the money and pay vendors based on commission structure.

Can customers follow their favorite stores?

Yes, with WCFM Pro. Customers can follow stores and receive notifications about new products and promotions.

Does WCFM work with WooCommerce extensions?

Yes. WCFM is built on WooCommerce and supports most extensions including:

Subscriptions
Bookings
Product Bundles
PDF Invoices
Points & Rewards

Can I set different commissions per product category?

Yes, with WCFM Pro. Set category-level commissions that override global settings.

How do I prevent fake or spam vendors?

Best practices:

Enable manual vendor approval
Require product approval before publishing
Collect business documentation
Set minimum store requirements
Monitor new vendor activity
Use email verification

Troubleshooting Common Issues

Issue: Vendor dashboard showing blank page

Solution:

Go to Settings → Permalinks
Click Save Changes (regenerates rules)
Clear browser cache and cookies
Check for plugin conflicts
Verify WCFM page has correct shortcode

Issue: Vendors can't upload product images

Solution:

Check PHP memory limit (256MB recommended)
Verify upload file size limit (8MB minimum)
Check server disk space
Test image size (reduce if > 2MB)
Verify vendor role has upload capability

Issue: Commission calculations wrong

Solution:

Check WCFM → Settings → Commission
Verify commission mode (percent/fixed/combined)
Check if product has category-level commission
Review vendor-specific commission overrides
Clear WooCommerce transients

Issue: Store pages not displaying correctly

Solution:

Verify BuddyX Pro theme is active
Clear theme cache and browser cache
Check for CSS conflicts (disable other plugins)
Regenerate CSS in Appearance → Customize
Contact theme support if issue persists

Issue: Withdrawal requests not working

Solution:

Verify minimum withdrawal amount is met
Check vendor payment details are complete
Verify withdrawal method is enabled
Check for pending orders (threshold not met)
Review withdrawal request status

Issue: Products not appearing on vendor store

Solution:

Check product status (must be "Published")
Verify product is assigned to vendor
Check if store has product approval enabled
Look for inventory issues (out of stock hidden)
Clear product visibility settings

Security Best Practices

Vendor Verification Process

Email Verification - Confirm valid email
Business Documentation - Request tax ID, business license
Identity Verification - ID proof for high-value sellers
Store Review - Check store info completeness
Trial Period - Monitor first 30 days closely

Product Quality Control

Mandatory Approvals:

Enable product approval for new vendors
Review first 10 products from each vendor
Create product listing guidelines
Define prohibited items clearly
Regular random product checks

Quality Standards:

Minimum image quality requirements
Required product information fields
Description length minimums
Accurate categorization rules
Pricing reasonableness checks

Terms & Conditions

Create comprehensive vendor agreement:

Must Include:

Commission structure and fees
Payment terms and schedule
Product guidelines and restrictions
Intellectual property policies
Customer service responsibilities
Data privacy requirements
Termination conditions
Dispute resolution process

Performance Optimization

For Large Marketplaces (500+ Vendors)

Server Requirements:

Minimum: 8GB RAM
Recommended: 16GB RAM + SSD
PHP 7.4 or higher
MySQL 5.7 or higher

Caching Strategy:

Install Redis or Memcached
Use object caching
Enable page caching (exclude dashboards)
CDN for images and assets

Database Optimization:

Regular cleanup of old orders
Archive inactive vendor accounts
Remove transients weekly
Optimize database tables monthly

Dashboard Performance

Speed up vendor dashboards:

Limit Dashboard Data
- Show last 30 days by default
- Paginate order lists (20 per page)
- Lazy load reports
- Cache dashboard widgets
Optimize Queries
- Index vendor_id in custom tables
- Use query caching
- Limit related product queries
- Reduce real-time calculations

Next Steps

After WCFM setup:

Create Test Vendor Account - Experience vendor dashboard
Test Complete Workflow - Create product, make purchase, process withdrawal
Configure Email Templates - Customize vendor notifications
Set Up Store Policies Page - Define marketplace rules
Launch Vendor Recruitment - Market to potential sellers

WooCommerce Setup Guide - Foundation setup
BuddyPress Integration - Community features
Shop Layouts - Product displays

Need Help?

WCFM Documentation: docs.wclovers.com Theme Support: support@wbcomdesigns.com WCFM Support: wclovers.com/support

Note: Many advanced features require WCFM Pro. Check wclovers.com/product/wcfm-marketplace for details.

Login & Register

Custom login page designer, register, and password reset.

Brand the standard WordPress login page - logo, colors, and layout - so members get a polished, on-brand first impression instead of the plain /wp-login.php screen.

WP Login panel in the Customizer The WP Login panel under Appearance > Customize, with the Logo section where every login-branding control lives.

Overview

BuddyX Pro 5.1.0 replaced the older 81-field login customizer with a preset-driven, five-control surface that mirrors the Style preset and Font preset pickers used elsewhere in the theme. You turn branding on, pick one of four layout presets, set a brand color, and (for the image-based presets) add a background image. The theme renders a complete, polished login look - card radius, shadows, form transparency, spacing, and heading colors are all handled for you.

The same branding applies across all three account surfaces - the login page, the lost-password page, and the register page (including the BuddyPress register screen and any page you map as your Registration Page). For the preset picker in depth, see Login Presets.

Where it lives

Go to Appearance > Customize.
Open the WP Login panel.
Select the Logo section - every login-branding control is here.
Turn Custom login branding on to reveal the rest of the controls.

The Layout, Brand color, Background image, and Login logo override controls stay hidden until Custom login branding is on. A fresh install keeps the standard WordPress login until you opt in. The Background image control also hides itself for the Minimal preset, which does not use one.

The Logo section: master toggle, layout preset picker, brand color, background image, and login logo override.

The full control set

Five controls drive every login look. The setting keys below are the real customizer keys, so you can target them from a child theme with get_theme_mod().

Control	Key	Type	Default
Custom login branding	`enable_custom_login`	On / Off switch	Off
Layout	`custom_login_preset`	Preset card picker	Minimal
Brand color	`custom_login_brand_color`	Color (no alpha)	`#0f172a`
Background image	`custom_login_background_image`	Image upload	Empty
Login logo override	`custom_login_logo_image`	Image upload	Empty

The master gate. Off by default so a fresh install ships with the unmodified WordPress login as a safe fallback. Turn it on to brand the login, register, and lost-password pages.

Layout

Pick one of four ready-made login styles. Each preset is opinionated and complete - you do not tune per-control card radius, shadow, or heading colors.

Preset	What it looks like	Uses background image
Minimal	Centered form card on a calm, plain background.	No
Brand left	Background image fills the left panel; the form sits on the right.	Yes
Brand right	Background image fills the right panel; the form sits on the left.	Yes
Hero image	Fullscreen background image; the form floats centered over a translucent backdrop.	Yes

Minimal is the default - choose it for a clean, distraction-free sign-in when you have no brand image to feature. Brand left and Brand right are the split-screen layouts, best when you have a strong vertical or half-frame image beside the form. Hero image is the most immersive - a single full-bleed image with the form floating on top. See Login Presets for a fuller walkthrough and the buddyxpro_login_presets filter that lets a child theme register more layouts.

Brand color

The single accent source. It colors the sign-in button, form links, focus outlines, and - on Brand left and Brand right - the brand panel background behind your image. Alpha is disabled, so pick a solid color. Default is #0f172a (near-black slate).

Background image

Used by Brand left, Brand right, and Hero image. Minimal ignores it, so the control hides when Minimal is selected. Use a large, high-quality image - hero layouts show it fullscreen; split layouts show it at roughly half width. If a split or hero preset is selected with no image, BuddyX Pro fills the brand panel with a tasteful diagonal gradient built from your brand color, so it never reads as an empty block.

Optional. Leave it blank to reuse the logo from Appearance > Customize > Site Identity. Set a different image here when the login page needs its own mark - for example a square icon that reads better than a wide header logo.

Logo source order: BuddyX Pro uses the Login logo override first, then falls back to your Site Identity custom logo, and finally to the site title text if neither is set. Most sites that already configured a header logo need to do nothing here. On the Hero preset, when no override is set the default logo is forced white so it stays visible on the dark backdrop; when you upload your own login logo, its real colors are kept.

The brand panel (split and hero presets)

On Brand left and Brand right, BuddyX Pro renders a brand panel beside the form containing your site name (from Settings > General) and your tagline (Settings > General "Tagline"). If no tagline is set, the panel shows "Welcome back. Sign in to continue." so it never looks half-empty. On mobile (under 782px) the split layouts collapse to a single column and the brand panel is hidden so the form takes the full width. The Minimal and Hero presets do not show this panel.

Dark mode

The login branding is dark-mode aware. When your site is in dark mode, the form card, inputs, labels, and navigation links switch to a dark palette automatically - no separate configuration. This matches the site-wide dark-mode toggle documented under the theme's color settings.

How the branding reaches the register and lost-password pages

The login preset is not limited to /wp-login.php. BuddyX Pro applies the same body classes and inline CSS to:

The lost-password screen (wp-login.php?action=lostpassword and the reset form). See Password Reset.
The BuddyPress register page and any page you set as the Registration Page under Appearance > Customize > General > Page Mapping. See Registration Page Branding.

On front-end register pages the theme applies the shared form-card and brand-color styling (button, links, focus rings) but deliberately skips the full split-panel or hero-canvas layout, because a BuddyPress page carries a site header, content, and footer that the wp-login split grid is not designed to wrap.

Instead of sending visitors to a full login page, you can surface login and registration inside an in-page modal. That is a separate Pro feature configured under Appearance > Customize > General > Sign-in Popup | Register Form Fields. When it is on, the header Log in and Register buttons (the .buddypress-icons-wrapper .btn-login and .btn-register elements) open the modal instead of navigating to /wp-login.php.

The popup and the branded login page are not mutually exclusive - the popup only takes over the header buttons; visitors who reach /wp-login.php directly still get your branded login page. For the full set of popup controls, redirects, and custom-shortcode mode, see Sign-in Popup.

Recommended presets by site type

Preset: Brand left or Brand right
Brand color: Your community accent
Background image: A community or activity photo (vertical framing works best for split layouts)

E-learning platform

Preset: Minimal or Hero image
Brand color: Match your course-category accent
Login logo override: A clear, centered mark

Business / corporate

Preset: Minimal
Brand color: Brand primary color
Background image: None - Minimal keeps the focus on the form

Creative agency

Preset: Hero image
Brand color: A bold accent
Background image: A full-bleed artistic image

Membership site

Preset: Hero image or Brand right
Brand color: Your membership accent
Background image: Member-benefit imagery

Live preview

Because every login control uses the refresh transport, the Customizer preview reloads the login page as you change settings. Publish to save. Some hosts and security plugins guard /wp-login.php; if the preview does not update, publish and open the login page in a separate tab.

Common questions

Go to Appearance > Customize > WP Login > Logo. Either upload a Login logo override, or leave it blank to reuse your site logo from Appearance > Customize > Site Identity.

Yes. Upload a separate image in WP Login > Logo > Login logo override. If it is empty, your Site Identity logo is used.

Why isn't my background image showing?

Check these:

Custom login branding is on.
Your Layout is Brand left, Brand right, or Hero image - the Minimal preset ignores the background image (and hides the control).
You published after uploading. The preview uses refresh, so a hard reload (Cmd/Ctrl+Shift+R) helps.

How do I remove the logo completely?

Leave both the Login logo override and the Site Identity logo empty. The login page then falls back to the site title text.

My changes are not visible. What is wrong?

Custom login branding is off.
Not published - click Publish.
Browser cache - hard refresh.
Another login-customization plugin is overriding the page.

The pre-5.1.0 per-field settings (form radius, shadow opacity, input colors, and the rest) still exist in your database but are no longer read. Picking a preset now controls all of that at once. Your saved login logo and background image carry over automatically; if you had a background image but never picked a preset, BuddyX Pro starts you on the Hero image preset so that image stays visible. See Login Presets.

Does this work on mobile devices?

Yes. All presets are responsive. The split layouts collapse to a single column under 782px and the brand panel hides so the form fills the width.

Yes. Use Appearance > Customize > Additional CSS. The branded login body carries the classes bx-login and bx-login-{preset} (for example bx-login-hero), so you can target the active preset:

body.bx-login.bx-login-hero #login {
  /* your custom styles */
}

Social login requires a separate plugin (for example Nextend Social Login). BuddyX Pro's form styling applies to the standard form; social plugins render their own buttons within it.

Login Presets - the four presets and the five controls in depth
Sign-in Popup - open login and registration in an in-page modal
Registration Page Branding - how the preset extends to the register screen
Password Reset - the lost-password surface
Site Identity - the logo the login page falls back to

Support

Need help with login page branding?

Documentation: BuddyX Pro Documentation
Support Forum: Support Portal
Email: support@wbcomdesigns.com

Before contacting support, note your active preset and brand color, and take a screenshot of your WP Login > Logo settings.

Password Reset Page

The lost-password and reset-password screens share the same branding as your login page, so members get one consistent, on-brand experience across the whole sign-in flow.

The lost-password screen inherits its branding from the WP Login > Logo preset controls - there is no separate reset-form settings group.

Overview

WordPress ships a built-in password reset flow. When members forget their password they request a reset link by email, click it, and set a new password. BuddyX Pro does not add a separate settings group for the reset screen - instead, the lost-password page (wp-login.php?action=lostpassword) and the reset-password page (wp-login.php?action=rp) automatically pick up the same login preset, brand color, background image, and logo you configured for the login page.

This is the real 5.1.0 architecture: one set of login-branding controls styles the login, lost-password, and register surfaces together. There is no "Forget Form" panel with its own background or transparency fields to configure.

How the reset screen is styled

The reset screens are served by wp-login.php, the same file as the main login page. Because BuddyX Pro adds its bx-login and bx-login-{preset} body classes and inline CSS to every wp-login.php request, the lost-password and reset-password forms are styled identically to the login form with no extra steps.

What controls it - the five login-branding controls under Appearance > Customize > WP Login > Logo:

Control	Key	Effect on the reset screen
Custom login branding	`enable_custom_login`	Master gate. Off keeps the default WordPress reset screen.
Layout	`custom_login_preset`	Minimal, Brand left, Brand right, or Hero - the same preset the login page uses.
Brand color	`custom_login_brand_color`	Colors the submit button, links, and focus rings on the reset form.
Background image	`custom_login_background_image`	Fills the brand panel or hero backdrop (Brand left / right / Hero only).
Login logo override	`custom_login_logo_image`	The logo above the reset form (falls back to Site Identity).

You configure these once for the login page and the reset screen follows. See Login Page Branding and Login Presets for the control reference.

There is no per-screen override for the reset form. If you need the reset page to look different from the login page, use Additional CSS targeting the reset-specific body - see the CSS example below.

The user journey

Member clicks Lost your password? on the login page.
Enters a username or email on the lost-password form.
Receives an email with a reset link.
Clicks the link and lands on the reset-password form.
Sets a new password and logs in.

Every branded screen in that journey (lost-password and reset-password) carries your login preset automatically.

Styling the reset screen differently (optional)

If you want the reset flow to look distinct from login, target the reset actions with Appearance > Customize > Additional CSS. WordPress adds body classes per action, and BuddyX Pro adds its preset classes alongside them:

/* Lost-password request screen */
body.login.bx-login[action] #login h1 a {
  /* your override */
}

/* Reset-password screen (after clicking the emailed link) */
body.login.bx-login.login-action-rp #loginform,
body.login.bx-login.login-action-resetpass #loginform {
  /* your override */
}

For most sites, keeping the reset screen identical to login is the right call - it reassures the member they are still on your site.

Password reset email

BuddyX Pro brands the reset screens; WordPress generates the reset email. To customize the email, use a plugin or a small code snippet.

Plugin options

WP Mail SMTP - set the sender name and address, add a logo, deliver reliably.
Email template plugins (for example Kadence WP) - visual HTML email designers.
BuddyPress (if active) - Settings > BuddyPress > Emails customizes BuddyPress-related emails with tokens.

Code options

Change the subject:

add_filter( 'retrieve_password_title', function( $title, $user_login, $user_data ) {
  return sprintf( '[%s] Reset your password', get_bloginfo( 'name' ) );
}, 10, 3 );

Change the message body:

add_filter( 'retrieve_password_message', function( $message, $key, $user_login, $user_data ) {
  $reset_url = network_site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user_login ), 'login' );
  $out  = sprintf( __( 'Hello %s,', 'buddyxpro' ), $user_login ) . "\r\n\r\n";
  $out .= __( 'Someone requested a password reset for your account. If this was you, click the link below:', 'buddyxpro' ) . "\r\n\r\n";
  $out .= $reset_url . "\r\n\r\n";
  $out .= __( 'If you did not request this, please ignore this email.', 'buddyxpro' ) . "\r\n";
  return $out;
}, 10, 4 );

Adjust the link expiration (default 24 hours):

add_filter( 'password_reset_expiration', function() {
  return DAY_IN_SECONDS; // default. Use HOUR_IN_SECONDS * 2 for a tighter window.
} );

Security notes

WordPress password reset already includes solid protections:

Unique, single-use keys - each reset link is unique and is invalidated after first use.
Time expiration - links expire (24 hours by default).
Generic responses - the request form does not reveal whether an account exists.

Harden further with:

Two-factor authentication (Two-Factor, WP 2FA).
Login-attempt limiting (Limit Login Attempts Reloaded).
CAPTCHA on the lost-password form.
Activity logging (WP Activity Log, Simple History) to watch for mass reset attempts.

Testing checklist

Request a reset with a valid username, then a valid email.
Confirm an invalid username/email shows the generic message.
Confirm the email arrives and the link works.
Set a new password and confirm the old one no longer works.
Confirm a reused link is rejected.
Verify the lost-password and reset screens show your login preset (logo, brand color, background).
Check both screens in light and dark mode.
Check on a 390px mobile viewport.

Common questions

Why don't I see separate password-reset settings?

Because there are none, by design. The reset screens share the login page's preset and brand controls under Appearance > Customize > WP Login > Logo. Configure the login page and the reset flow follows.

The reset screen is not branded. Why?

Confirm Custom login branding is on under WP Login > Logo and that you published. If a security plugin blocks or replaces /wp-login.php, it can also suppress the branding.

Users are not receiving reset emails.

This is an email-delivery issue, not a theme setting. Install and configure WP Mail SMTP, check spam folders, and confirm the user's email address. On some hosts you need a transactional email service (SendGrid, Mailgun).

Can I redirect users after a password reset?

Yes, with a snippet on login_redirect or by checking $_GET['password'] === 'changed'. This is WordPress-level behavior, independent of the theme.

Login Page Branding - the controls the reset screen inherits
Login Presets - the four presets and five controls
Registration Page Branding - the register surface, also preset-driven
Sign-in Popup - open login and registration in a modal instead

Support

Need help with the password reset flow?

Documentation: BuddyX Pro Documentation
Theme Support: Support Portal
Email: support@wbcomdesigns.com

Before contacting support, confirm your login branding is on and published, and test email delivery with a plugin like WP Mail SMTP.

Registration Page Branding

Create an inviting registration experience that encourages new members to join your community.

Registration Page Split View Split view registration page customization

Overview

When BuddyPress is active, BuddyX Pro provides special customization options for your registration page. You can add custom backgrounds, welcome messages, and split-screen layouts to make registration more engaging.

Requirements:

BuddyPress plugin must be installed and activated
Registration must be enabled in BuddyPress settings

Getting Started

Install and activate BuddyPress plugin
Go to WordPress Admin → Appearance → Customize
Open the WP Login panel, then the Register section
Enable Toggle Split View to activate customization options

What You Can Do

Split View Layout

Transform your registration page with an attractive split-screen design.

How it works:

Left side: Custom background image with welcome message
Right side: Registration form
Mobile: Stacks vertically for perfect mobile experience

To enable:

Turn ON Toggle Split View switch
Additional customization options will appear

Background Image

Add a stunning background image to the left side of the registration page.

Setting	Description	Recommended
Background Image	Upload image for left side	960×1080px

Best practices:

Use high-quality images showing community interaction
Avoid busy images that distract from the message
Ensure good contrast with text overlay
File size: Under 500KB for fast loading

Image ideas by site type:

Social Network: People connecting and interacting
Learning Platform: Students or classroom activities
Fitness Community: Group workout or active lifestyle
Business Network: Professional collaboration
Hobby Community: Members enjoying the activity

Welcome Content

Greet new members with personalized messaging on the left side.

Setting	Description	Default
Custom Heading	Main headline	"Let's stay connected!"
Custom Text	Supporting description	"Join our community today..."

Heading tips:

Keep it short and welcoming (3-6 words)
Use action words: "Join," "Welcome," "Connect"
Make it about THEM, not you
Create excitement and belonging

Good examples:

"Welcome to [Community Name]!"
"Join thousands of members"
"Your journey starts here"
"Connect with like-minded people"
"Become part of something great"

Description tips:

Explain the benefit of joining (1-2 sentences)
Highlight what makes your community unique
Keep it concise and scannable
Focus on value, not features

Good examples:

"Join our community today to broaden your network and connect with new people!"
"Get access to exclusive content, connect with experts, and grow your skills."
"Find your tribe. Share your passion. Make lasting connections."

Visual Customization

Control how your welcome content appears on the background.

Setting	Description	Range	Default
Overlay Opacity	Darken background for text readability	0-100%	70%
Custom Color	Text color for heading and description	Any color	White (#ffffff)

Overlay Opacity:

0% - No overlay, full image brightness
30-50% - Light overlay, still shows image detail
50-70% - Medium overlay, balanced visibility (recommended)
70-90% - Dark overlay, maximum text contrast
100% - Solid black, hides image completely

Choosing text color:

White works best for most images
Use dark colors only with very light backgrounds
Ensure WCAG AA contrast ratio (4.5:1 minimum)
Test on mobile devices

Page Structure

When split view is enabled, the registration page displays:

┌─────────────────────────────────────────────┐
│ Desktop Layout (Wide Screens)               │
├──────────────────┬──────────────────────────┤
│                  │                          │
│  Background      │  Registration Form       │
│  Image +         │                          │
│  Welcome         │  - Username              │
│  Message         │  - Email                 │
│                  │  - Password              │
│  (Left Side)     │  - Profile Fields        │
│                  │  - Submit Button         │
│                  │                          │
└──────────────────┴──────────────────────────┘

┌─────────────────────────────────────────────┐
│ Mobile Layout (Narrow Screens)              │
├─────────────────────────────────────────────┤
│ Background Image + Welcome Message          │
│ (Collapsed/Small Banner)                    │
├─────────────────────────────────────────────┤
│                                             │
│ Registration Form                           │
│ - Username                                  │
│ - Email                                     │
│ - Password                                  │
│ - Profile Fields                            │
│ - Submit Button                             │
│                                             │
└─────────────────────────────────────────────┘

Configuration Examples

Example 1: Professional Network

Perfect for LinkedIn-style professional communities.

Settings:

Background Image: Business professionals collaborating
Heading: "Join [Company] Network"
Description: "Connect with industry professionals and grow your career."
Overlay Opacity: 60%
Custom Color: White

Result: Clean, professional look that builds trust.

Example 2: Creative Community

Ideal for artists, designers, photographers.

Settings:

Background Image: Vibrant, artistic workspace
Heading: "Unleash Your Creativity"
Description: "Join a community of creators sharing inspiration and feedback."
Overlay Opacity: 50%
Custom Color: White or light yellow

Result: Inspiring, energetic feel that appeals to creatives.

Example 3: Fitness/Wellness

Great for gyms, yoga studios, health communities.

Settings:

Background Image: Group fitness class or outdoor activity
Heading: "Start Your Wellness Journey"
Description: "Join our community and achieve your fitness goals together."
Overlay Opacity: 65%
Custom Color: White

Result: Motivating, inclusive atmosphere.

Example 4: Learning Platform

Perfect for online courses, training platforms.

Settings:

Background Image: Students learning or studying together
Heading: "Begin Learning Today"
Description: "Access expert-led courses and connect with fellow learners."
Overlay Opacity: 70%
Custom Color: White

Result: Educational, approachable environment.

Example 5: Hobby/Interest Community

Ideal for book clubs, gaming, cooking communities.

Settings:

Background Image: People enjoying the hobby together
Heading: "Find Your Tribe"
Description: "Connect with people who share your passion for [hobby]."
Overlay Opacity: 55%
Custom Color: White

Result: Welcoming, friendly community feel.

Recommended Designs by Site Type

Site Type	Heading Style	Background Type	Overlay
Professional Network	Formal, benefit-focused	Office/collaboration	60-70%
Social Community	Friendly, inclusive	Diverse people	50-60%
Learning Platform	Educational, inspiring	Study/learning	65-75%
Fitness/Health	Motivational, action-oriented	Active lifestyle	60-70%
Creative/Arts	Inspirational, emotional	Artistic/creative	45-55%
Gaming Community	Exciting, fun	Gaming scenes	55-65%
Support Group	Warm, comforting	Supportive imagery	60-70%
Business/Corporate	Professional, trustworthy	Business setting	65-75%

Integration with BuddyPress

BuddyPress Registration Page

Registration Fields

BuddyX Pro's split view works seamlessly with BuddyPress registration features:

Standard Fields:

Username
Email address
Password (with strength indicator)
Profile visibility toggle

Extended Profile Fields: All custom profile fields you create in BuddyPress → Settings → Profile Fields automatically display in the registration form.

To add custom fields:

Go to BuddyPress → Settings → Profile Fields
Create new fields (text, dropdown, checkboxes, etc.)
Enable "Show on registration" for each field
Fields appear automatically on registration page

Registration Confirmation

After registration, users see confirmation based on your BuddyPress settings:

Immediate Activation:

User logs in right away
Sees welcome message
Redirected to profile completion

Email Activation:

User receives activation email
Must click link to activate
Then logs in to complete profile

Profile Completion

BuddyX Pro enhances the post-registration experience:

User activates account (if required)
Logs in for first time
Prompted to complete profile
Guided through avatar upload
Directed to community activity

Activation Page

The split view design also applies to the activation page users see after clicking the email confirmation link.

What users see:

Same split view layout
Same background and welcome message
Activation status message
Link to login page

Consistency benefit: Users have a cohesive visual experience from registration through activation.

Common Questions

Does this work without BuddyPress?

No. Registration page customization requires BuddyPress. The WP Login → Register section only appears in the Customizer when BuddyPress is active.

For WordPress-only registration, you'll need to use a separate registration plugin or custom code.

Can I customize the form fields themselves?

Form fields are controlled by BuddyPress. You can:

Add custom fields via BuddyPress → Settings → Profile Fields
Style fields using Additional CSS in the Customizer
Reorder fields in BuddyPress profile field settings

The split view customization affects the page layout and welcome content, not the form fields themselves.

Why don't I see the Registration Page settings?

Check these requirements:

BuddyPress plugin is installed and active
Registration is enabled in Settings → BuddyPress → Settings → General
You're looking in Appearance → Customize → WP Login → Register

If BuddyPress is not active, this section won't appear.

Can I use this with WooCommerce?

Yes, but note:

This customizes the BuddyPress registration page
WooCommerce uses a different registration/checkout flow
For WooCommerce-specific customization, see WooCommerce settings

If you want unified registration, use a plugin that integrates BuddyPress and WooCommerce registration.

My background image is too dark/light

Adjust the Overlay Opacity slider:

Too dark: Decrease opacity (try 40-50%)
Too light (text hard to read): Increase opacity (try 70-80%)

You can also adjust the image brightness before uploading using photo editing software.

Can I have different messages for registration vs activation?

Currently, both pages share the same welcome message. To differentiate:

Use generic welcoming text that works for both
Or use custom CSS to hide/show different content based on page

Example CSS:

body.buddypress.register .custom-register-text {
  display: block;
}
body.buddypress.activate .custom-register-text {
  display: none;
}

How do I change the registration form colors?

BuddyX Pro inherits form styling from your global theme colors. To customize:

Go to Appearance → Customize → Colors
Adjust form field colors there
Or use Additional CSS for registration-specific styling:

body.buddypress.register input[type="text"],
body.buddypress.register input[type="password"],
body.buddypress.register input[type="email"] {
  background-color: #your-color;
  border-color: #your-border-color;
}

Can I add terms and conditions checkbox?

BuddyPress doesn't include this by default. Options:

Plugin: Use "BuddyPress Registration Options" or similar
Custom Code: Add via BuddyPress signup hooks
Third-party Form: Use WPForms or Gravity Forms with BuddyPress integration

Yes. If you use social login plugins like Nextend Social Login, the social buttons appear above or below the standard registration form, within the right-side panel.

The split view layout accommodates social registration buttons automatically.

How do I translate the welcome message?

If you're using a multilingual plugin (WPML, Polylang, etc.):

Navigate to the Customizer
Switch language in the customizer
Enter translated text in Custom Heading and Custom Text
Save settings for each language

Or use translation plugins that support theme modifications.

Can I hide the split view on mobile?

The split view automatically adapts to mobile:

Background becomes a small banner
Form takes full width
Maintains responsive design

To completely hide on mobile, use custom CSS:

@media (max-width: 768px) {
  body.buddypress.register .login-split {
    display: none;
  }
}

My registration page looks different from the preview

Common causes:

Not published: Click Publish in the Customizer
Browser cache: Clear cache and hard refresh
Plugin conflict: Disable other plugins temporarily
Theme update needed: Ensure BuddyX Pro is up to date

Can I add a video background?

Not directly through the settings. To add video background:

Upload video to your media library
Use custom CSS and JavaScript
Or use a plugin like "Advanced Custom Fields" with custom templates

Video backgrounds can slow page load, so use cautiously for registration pages.

Advanced Customization

Custom CSS Examples

Add these in Appearance → Customize → Additional CSS.

Change welcome text alignment:

body.buddypress.register .login-split .split-screen-content {
  text-align: left; /* or center, right */
  padding-left: 60px;
}

Add pattern/texture to background:

body.buddypress.register .login-split {
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.3);
}

Adjust form width:

@media (min-width: 992px) {
  body.buddypress.register #buddypress {
    max-width: 450px;
  }
}

Change overlay color (not just black):

body.buddypress.register .login-split .split-overlay {
  background: linear-gradient(135deg, rgba(99, 66, 255, 0.7), rgba(66, 133, 244, 0.7));
}

Developer Hooks

For developers needing programmatic control:

// Modify registration page heading
add_filter( 'theme_mod_register_custom_heading', function( $heading ) {
  if ( is_user_logged_in() ) {
    return $heading;
  }
  return 'Custom heading for non-logged users';
} );

// Conditionally disable split view
add_filter( 'theme_mod_register_split_view', function( $enabled ) {
  // Disable on mobile
  if ( wp_is_mobile() ) {
    return false;
  }
  return $enabled;
} );

Login Page Branding - Customize the login page
Password Reset - Password reset email customization
BuddyPress Settings - BuddyPress customization options
Profile Settings - Member profile customization

Support

Need help with registration page customization?

Documentation: BuddyX Pro Documentation
BuddyPress Support: BuddyPress Forums
Theme Support: Support Portal
Email: support@wbcomdesigns.com

Before contacting support:

Confirm BuddyPress is active and updated
Check registration is enabled in BuddyPress settings
Test with default WordPress theme to rule out conflicts
Provide screenshots of your customizer settings
Share your site URL for visual context

BuddyX Pro ships four ready-made styles for the WordPress login, register, and lost-password pages. You pick a preset card, set a brand color, and (for the split and hero layouts) add a background image - the theme renders a complete, polished login look with no per-control tuning. This replaces the older 81-field login customizer with a five-control surface that mirrors the Style and Font preset pickers used elsewhere in BuddyX Pro.

What a preset controls

Each preset is opinionated and complete. Once you choose one, BuddyX Pro handles the card radius, shadows, form transparency, spacing, and heading colors for you. You only supply the brand inputs:

Your brand color (button, links, focus rings, and the brand panel in split layouts).
A background image (used by three of the four presets).
An optional login logo (falls back to your Site Identity logo if left blank).

The same preset applies across all three account surfaces - the login page, the lost-password page, and the register page (including the BuddyPress register screen and any page you map as your registration page).

Go to Appearance > Customize.
Open the WP Login panel, then the Logo section.
Turn Custom login branding on. (It is off by default, so a fresh install keeps the standard WordPress login until you opt in.)
Under Layout, click the card for the preset you want.
Set your Brand color.
For Brand left, Brand right, or Hero image, upload a Background image.
Optionally set a Login logo override.
Click Publish.

The Layout, Brand color, Background image, and Login logo override controls stay hidden until Custom login branding is on. The Background image control also hides itself for the Minimal preset, which does not use one.

The four presets

Preset	What it looks like	Uses background image
Minimal	Centered form card on a calm, plain background.	No
Brand left	Background image fills the left panel; the form sits on the right.	Yes
Brand right	Background image fills the right panel; the form sits on the left.	Yes
Hero image	Fullscreen background image; the form floats centered over a translucent backdrop.	Yes

Minimal is the default. Choose it when you want a clean, distraction-free sign-in and do not have a brand image to feature. Brand left and Brand right are the split-screen layouts - use them when you have a strong vertical or half-frame image (a community photo, a product shot) and want it beside the form. Hero image is the most immersive option - a single full-bleed image with the form floating on top - and suits landing-style community and membership sites.

Fine-tune the look

After you pick a preset, the remaining controls in the Logo section shape it to your brand.

Brand color

Control	Key	Default	Notes
Brand color	`custom_login_brand_color`	`#0f172a`	The single accent source. It colors the sign-in button, form links, focus outlines, and - on Brand left and Brand right - the brand panel background behind your image. Alpha is disabled, so pick a solid color.

Background image

Control	Key	Default	Notes
Background image	`custom_login_background_image`	Empty	Used by Brand left, Brand right, and Hero image. Minimal ignores it, so the control hides when Minimal is selected. Use a large, high-quality image - hero layouts show it fullscreen, split layouts show it at roughly half width.

Control	Key	Default	Notes
Login logo override	`custom_login_logo_image`	Empty	Optional. Leave it blank to reuse the logo from Appearance > Customize > Site Identity. Set a different image here when the login page needs its own mark - for example a square icon that reads better than your wide header logo.

Logo source order: BuddyX Pro uses the Login logo override first, then falls back to your Site Identity logo, and finally to the site title text if neither is set. Most sites that already configured a header logo need to do nothing here.

The full control set

Five controls drive every login look. Here they are together, in the order they appear in the Logo section.

Control	Key	Type	Default
Custom login branding	`enable_custom_login`	On / Off	Off
Layout	`custom_login_preset`	Preset card picker	Minimal
Brand color	`custom_login_brand_color`	Color	`#0f172a`
Background image	`custom_login_background_image`	Image upload	Empty
Login logo override	`custom_login_logo_image`	Image upload	Empty

Upgrading from an earlier version

If you customized the login page on BuddyX Pro 5.0.x, your saved logo and background image carry over automatically. If you had set a login background image but never picked a 5.1.0 preset, BuddyX Pro starts you on the Hero image preset so that image stays visible on the first load after upgrade - rather than defaulting to Minimal and hiding it. You can switch to any other preset at any time.

The older per-field login settings (form radius, shadow opacity, input colors, and the rest) still exist in your database but are no longer read. Picking a preset is now the way to control all of that at once.

Developer note

The preset list is filterable. Add or replace presets with the buddyxpro_login_presets filter, which passes the array of preset definitions (each with a label, description, and uses_bg flag). This lets a child theme register an additional layout without touching theme files.

Login Page Branding - the full login-page reference, including the in-page sign-in popup
Registration Page Branding - how the preset extends to the register screen
Password Reset - the lost-password surface
Site Identity - the logo the login page falls back to

Support

Need a hand setting up your login presets? Email support@wbcomdesigns.com with a screenshot of your WP Login > Logo settings and the preset you picked.

The Sign-in Popup is a Pro-only feature that opens login and registration inside an in-page modal instead of sending visitors to a full /wp-login.php page. Members stay on the content they were reading, sign in or register in the modal, and land back where they started. This page documents the real customizer controls, their options, and their defaults, plus when to use the popup and when to stick with a full login page.

Sign-in Popup control in the Customizer The Sign-in Popup | Register Form Fields section under Appearance > Customize > General, with the master toggle at the top.

Where it lives

Go to Appearance > Customize.
Open the General panel.
Select Sign-in Popup | Register Form Fields.
Turn on Sign-in Popup to reveal the rest of the controls.

Every control below the master toggle stays hidden until Sign-in Popup is on, and several are hidden further depending on the Form Popup mode and whether BuddyPress is active.

Master toggle

Setting	Key	Type	Default
Sign-in Popup	`buddyx_signin_popup`	Yes / No switch	No (off)

When this is No, the theme behaves like standard WordPress - the header Log in and Register buttons point at your real login and registration URLs. When it is Yes, those same header buttons switch to # and open the modal instead, so no full-page redirect happens until a visitor explicitly requests the WordPress login URL.

Once the master toggle is on, these controls appear. The setting keys match the actual customizer keys, so you can target them from a child theme with get_theme_mod().

Setting	Key	Options	Default	Appears when
Form Popup	`buddyx_sign_form_popup`	BuddyX Login Form / Custom shortcode	BuddyX Login Form	Sign-in Popup is on
Form Display	`buddyx_sign_form_display`	Both / Login / Register	Login	Form Popup is not Custom shortcode
Login Redirect	`buddyx_login_redirect`	See below	Current page	Form Popup is not Custom shortcode
Login Custom URL	`buddyx_login_redirect_url`	Full URL	empty	Login Redirect = Custom page
Register Redirect	`buddyx_register_redirect`	Current page / Custom page	Current page	Neither BuddyPress nor PeepSo is active
Register Custom URL	`buddyx_register_redirect_url`	Full URL	empty	Register Redirect = Custom page (non-BuddyPress)
Login Form Description	`buddyx_login_description`	Text / HTML / shortcodes	empty	Form Popup = BuddyX Login Form
Popup Content	`buddyx_sign_form_shortcode`	HTML / shortcode	empty	Form Popup = Custom shortcode
Note for registration popup	`buddyx_register_note`	Read-only note	see below	Form Display is Both or Register

Picks what fills the modal body.

BuddyX Login Form - the theme's own bundled login and register form, styled to match your active BuddyX Pro colors and dark mode.
Custom shortcode - swaps the body for whatever you paste into Popup Content below. Use this to surface a third-party auth plugin's form inside the BuddyX popup chrome. When this mode is on, Form Display, Login Redirect, and Login Form Description are hidden because the theme no longer controls the form markup.

Form Display

Which pane the modal opens on (BuddyX Login Form mode only).

Both - opens the login pane with a tab to switch to register.
Login - login pane only.
Register - register pane only.

Where a visitor lands after a successful login. The available choices depend on whether BuddyPress is active:

BuddyPress active	Choices
Yes	Current page, Profile page, Activity page, Custom page
No	Current page, Custom page

Current page keeps the visitor exactly where they were when they opened the modal, which is the friendliest default for community and membership sites. Choosing Custom page reveals Login Custom URL - enter a full URL including the https:// prefix.

Register Redirect

The Register Redirect and Register Custom URL controls only appear when neither BuddyPress nor PeepSo is active - on a plain WordPress install. When BuddyPress is running, registration follows BuddyPress's own signup and activation flow, so these controls are intentionally hidden.

A free text area (accepts HTML and shortcodes) rendered above the form in the modal. Use it for a one-line value proposition or a short welcome message. It only applies to the BuddyX Login Form - Custom shortcode mode ignores it.

Only shown when Form Popup is Custom shortcode. Paste a login or register shortcode (or any custom HTML) from a third-party auth plugin here; BuddyX renders its popup chrome around whatever you provide.

A read-only heads-up that appears when Form Display is Both or Register:

In case of missing required field and wrong entries you will be redirected to the default registration page for further process.

This cannot be edited. It explains the theme's safety net: if a visitor leaves a required field blank or enters invalid data, they are handed off to the full /wp-login.php?action=register page (with their entries pre-filled) so BuddyPress xprofile validation can run end to end.

What the register form collects

In BuddyX Login Form mode, the register pane asks for first name, last name, username, email, password, and password confirmation. When BuddyPress xprofile is active, any required profile fields from your base profile group are added to the form automatically, and a privacy-policy checkbox appears if you have set a Privacy Policy page. Because the theme reads your live required fields, you manage the register form's contents from BuddyPress > Profile Fields, not from a separate list in the customizer.

With the master toggle on, the header user widget's Log in and Register buttons open the modal instead of navigating away:

Log in opens the modal when Form Display is Login or Both (or when Form Popup is Custom shortcode).
Register opens the modal on the register pane when Form Display is Register or Both.

The theme also auto-opens the login modal when a visitor arrives on a BuddyPress account-activation resend link, so the flow never dead-ends on a blank page.

Social and community sites - keep visitors on the activity stream, group, or member profile they are engaging with instead of breaking flow with a full-page redirect.
Membership and paywalls - surface the login prompt on the gated content page, then drop the visitor right back onto the content after they authenticate (set Login Redirect to Current page).
Higher signup conversion - a modal that opens in place is a lower-friction ask than a page that navigates the visitor away from what caught their interest.

You rely on the styled /wp-login.php page - if you have invested in the branded login background, logo, and split-view treatment covered in Login Page Branding, keep the full page so every visitor sees it. The popup short-circuits that route.
Strict 2FA or SSO setups - some authentication plugins inject their UI only on /wp-login.php. Test your 2FA or SSO flow inside the modal before switching your whole audience to it.
You build your own auth UI - if a page builder or a custom shortcode already renders your login experience, the popup and that UI can compete for the same trigger. In that case either disable the popup or run your custom form through Custom shortcode mode so there is a single source of truth.

Tip: The popup and the full login page are not mutually exclusive at the code level - the popup only takes over the header buttons. Visitors who reach /wp-login.php directly still get your branded login page. Choose the popup as the default entry point when in-flow signup matters more than a branded full-screen moment.

Styling

The BuddyX Login Form popup inherits your theme's colors, buttons, and dark-mode treatment, so it matches the rest of the site without extra configuration. If you want the branded background, logo, and split-view layout as well, apply those to the full login page - see Login Page Branding - and keep the popup for quick in-page access.

Common questions

Confirm Sign-in Popup is set to Yes and that you clicked Publish. The header Log in and Register buttons only switch to the modal when the master toggle is on and the matching Form Display value is selected.

Can I show only the register form?

Yes. Set Form Display to Register. The modal opens straight to the register pane.

Set Form Popup to Custom shortcode and paste the plugin's login or register shortcode into Popup Content. BuddyX renders its popup frame around it.

A member filled the register form but landed on the full registration page. Is that a bug?

No. That is the safety net described in the read-only note - a missing required field or invalid entry hands the visitor to the full /wp-login.php?action=register page (with their input pre-filled) so BuddyPress can validate every required xprofile field.

Login Page Branding - style the full /wp-login.php page with logos, backgrounds, and split-view layouts.
Registration Page Branding - customize the BuddyPress registration page and its fields.
Password Reset - brand the lost-password flow.

Support

Need a hand wiring up the Sign-in Popup or matching it to a third-party auth plugin? Email support@wbcomdesigns.com with your site URL and a screenshot of your Sign-in Popup | Register Form Fields settings.

Theme Features

Block patterns, menus, page templates, widgets, and add-on plugins.

Bundled Plugins

BuddyX Pro 5.1.0 ships as a complete community platform - one theme plus nine first-party plugins that turn a WordPress install into a community, forum, video host, gamification engine, job board, services marketplace, directory site, events site, or LMS. Every plugin's free edition is included with your BuddyX Pro license; the Pro edition of each unlocks the deeper features.

For the full, always-current in-house plugin catalog (every product, free and pro, in one place), see Plugin family.

There is no third-party addon ecosystem to chase. The nine plugins below are built by the same team as the theme, share the same design system (--bx-color-* tokens, the Customizer Framework, the typography presets), and are tested together against every BuddyX Pro release.

The nine bundled plugins

1. Jetonomy

Forums, Q&A, and ideas - a modern community plugin.

A from-scratch alternative to bbPress / BuddyPress Forums built for 2026 community standards. Threaded discussions, Q&A with accepted answers, idea boards with upvotes, and a six-level trust system that auto-moderates as members earn standing.

Free edition included with BuddyX Pro.
Pro edition adds analytics, AI-assisted moderation, anti-spam, and admin tooling.

2. MediaVerse

Video upload + hosting + player.

Native video uploads for your community. Members upload to your site (or a connected CDN), the plugin transcodes for streaming, and your theme's player UI plays it back. No YouTube embed required, no third-party hosting agreement.

Free edition included.
Pro edition adds adaptive bitrate, watermarking, per-tier upload limits, and analytics.

3. WB Gamification

Points, ranks, badges.

Reward members for engagement. Award points for posting, replying, completing a profile, joining a group, finishing a course. Members climb ranks; achievements unlock badges; leaderboards surface top contributors.

Free edition included.
Pro edition adds custom rules, integrations with Jetonomy / MediaVerse / Learnomy, and team-scoped leaderboards.

4. WP Career Board

Jobs + resume management.

A job board for your community. Members post job listings, applicants upload resumes, employers review and respond - all without leaving your site. Built for membership communities, professional networks, and industry-vertical sites.

Free edition included.
Pro edition adds paid listings, featured jobs, applicant tracking, and resume search filters.

5. WP Sell Services

Members sell services.

Turn your community into a service marketplace. A graphic designer member sells logo work; a coach member sells consulting calls; a developer member sells code review. Built on WooCommerce so payments + receipts use the rails you already trust.

Free edition included.
Pro edition adds vendor dashboards, escrow, service variants, and platform commission.

6. Listora

Directory builder.

Build directories of anything - businesses, properties, freelancers, events, courses. Custom fields, map view, search filters, paid listings, claim-your-listing flow.

Free edition available now; install it today and upgrade to Pro when you need more.
Pro edition adds advanced map clustering, paid plans, monetisation, and import/export.

7. Learnomy

Sell online courses.

A first-party LMS. Course builder, lesson player, quizzes, certificates, drip schedules, and student dashboards. Designed for community-driven learning where conversations sit alongside lessons.

Free edition available now; install it today and upgrade to Pro when you need more.
Pro edition adds gradebook, cohort tooling, instructor revenue share, and SCORM/xAPI.

8. BuddyNext

Community engine: profiles, activity feeds, and member spaces.

The next-generation community engine and the successor to BuddyPress. BuddyNext and BuddyPress are mutually exclusive at runtime - a site runs one or the other, never both. BuddyX Pro detects BuddyNext automatically and adapts its header, auth links, and user menu to it.

Free edition included with your BuddyX Pro license.
See BuddyNext Integration for exactly what the theme wires up when BuddyNext is active.

9. Eventonomy

Events, ticketing, and RSVPs for your community.

Run events on your own site. Members browse what's coming up, RSVP or buy a ticket, and organisers manage attendance - without sending anyone to a third-party events platform.

Free edition included with your BuddyX Pro license.

How to install a bundled plugin

Go to Appearance > Getting Started.
Scroll to Part of the Wbcom Community Family. Each of the nine bundled plugins has an Install + Activate button.
Click the button next to the one you want. The plugin installs from the BuddyX Pro license server (no manual zip download required) and activates immediately.
Repeat for any other bundled plugin you want active. There is no requirement to install all nine - install only what your site needs.

Updating bundled plugins

The same screen that lists each plugin also surfaces update prompts when a new version ships. BuddyX Pro authenticates the update channel using your license key, so updates come from the WordPress dashboard exactly like a wp.org plugin - no manual download / re-upload.

When the bundled plugin overlaps with a third-party one

If you already run a third-party plugin in the same niche (bbPress for forums, Easy Digital Downloads for paid listings, LearnDash for LMS, etc.), the BuddyX Pro bundle plays nice:

If you use...	The bundled equivalent...
bbPress / BuddyPress Forums	Stays available; Jetonomy is opt-in, you can run both or one
LearnDash / LifterLMS / Tutor LMS	Stays the LMS of record; Learnomy is opt-in
YouTube / Vimeo embeds	Continues to work; MediaVerse just adds native hosting on top
GamiPress / myCred	Coexists; WB Gamification is opt-in and tracks separate points
WP Job Manager / Awsm Jobs	Stays as the canonical job board; WP Career Board is opt-in

The theme treats both paths as equal citizens - the Customizer surfaces options for whichever plugin you have active.

Sales page reference

The full feature list per plugin lives on the BuddyX Pro sales page at https://wbcomdesigns.com/downloads/buddyx-pro-theme/. That page is the marketing source of truth; this doc is the technical pointer telling customers what they actually get with the BuddyX Pro license.

What 5.0.x users will notice

The 5.0.x bundle (BuddyPress Reactions Pro, BuddyPress Share Pro) is retired in 5.1.0:

Reactions are now handled by Jetonomy (richer than the legacy plugin: per-trust-level reactions, threaded reaction analytics).
Social sharing for activity / posts is now a theme-level feature handled inside the Single Post panel and the BuddyX Pro activity template, no separate plugin required.
Customers running the legacy plugins on a 5.0.x BuddyX Pro install can keep using them - the theme does not deactivate them. The bundle just stops advertising them as "what you get with BuddyX Pro".

Quick Start - First-time setup, including the bundled plugins notice
Choose Your Path - Recipes by site type, with the matching bundled plugin recommended for each
Theme Architecture - How the theme detects + integrates with each bundled plugin

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Block Patterns

BuddyX Pro includes 87 pre-designed block patterns for quickly building pages.

Overview

Block patterns are pre-built layouts you insert into any page or post from the WordPress block editor. BuddyX Pro ships 87 patterns across four groups:

Group	Count	What it covers
General theme patterns	27	Hero, about, features, social proof, pricing/FAQ, CTA, footer, and post-query sections ported from BuddyX free 5.1.0
Community-styled sections	26	Hero, features, CTA, testimonials, content, and header/footer sections in the `buddyx-community` category
BuddyPress patterns	14	Directory, activity, and community-widget sections
Full page templates	20	Complete page layouts (homepages, standard pages, utility pages)
Total	87

Using Block Patterns

Inserting a Pattern

Open a page or post in the block editor
Click the + button to add a block
Select the Patterns tab
Browse categories or search
Click a pattern to insert it

Finding BuddyX Patterns

Patterns are grouped under the BuddyX categories - for example BuddyX Hero, BuddyX Features, BuddyX BuddyPress, BuddyX Templates, and BuddyX Community. The full list of category slugs is in the Pattern Categories Reference below.

General Theme Patterns (27)

Section patterns ported from BuddyX free 5.1.0. These live at the root of the patterns/ folder and are grouped into eight BuddyX categories.

Hero (3)

Pattern	Description
Hero - Image-led	Hero with a leading image
Hero - Split Screen	Two-column split-screen hero
Hero - Typography-led	Type-forward hero, minimal imagery

About (3)

Pattern	Description
About - Founder Spotlight	Founder introduction section
About - Story	Narrative about section
Team - 4-up Grid	Four-column team grid

Features (3)

Pattern	Description
Features - Alternating Rows	Left/right alternating feature rows
Services - 3-up Grid	Three-column services grid
Steps - Numbered Process	Numbered step-by-step process

Pattern	Description
Logo Cloud - Trusted by	Trusted-by logo row
Stats Row	Key numbers / statistics row
Testimonials - Editorial 3-up	Three-column editorial testimonials

Pricing & FAQ (2)

Pattern	Description
FAQ - Editorial	Editorial FAQ layout
Pricing - 3-tier Editorial	Three-tier pricing table

Call to Action (3)

Pattern	Description
CTA - Full-bleed Gradient	Full-bleed gradient call-to-action
CTA - Newsletter Signup	Newsletter signup CTA
Banner - Light Asymmetric	Light, asymmetric promo banner

Pattern	Description
Footer - Central CTA	Footer with a centered call-to-action
Footer - Default Mega	Default multi-column mega footer
Footer - Mega 5-column	Five-column mega footer
Footer - Simple Centered	Simple centered footer
Footer - Minimal Bar	Minimal single-bar footer

Posts / Query (5)

Pattern	Description
Posts - 4-up Featured Cards	Four featured post cards
Posts - 3-up Editorial Grid	Three-column editorial post grid
Posts - Asymmetric Hero + Stack	Featured hero post plus a stacked list
Posts - Horizontal List Split	Horizontal split post list
Posts - Minimal Date + Title List	Minimal date-and-title list

Community Patterns (26)

Versatile sections in the BuddyX Community category. These live under patterns/general/.

Hero Sections (5)

Pattern	Description
Hero Centered	Centered headline with CTA buttons
Hero Gradient	Gradient background hero
Hero Minimal	Clean, simple hero
Hero Split	Image on one side, content on the other
Hero with Video	Video background hero

Feature Sections (5)

Pattern	Description
Features Alternating	Left/right alternating layout
Features Cards	Card-based feature display
Features Grid 3 Columns	Three-column feature grid
Features Grid 4 Columns	Four-column feature grid
Features with Icons	Icon-focused feature list

Call to Action (4)

Pattern	Description
CTA Gradient	Gradient background CTA
CTA Newsletter	Email signup CTA
CTA Simple	Clean, minimal CTA
CTA Split	Two-column CTA layout

Testimonials (4)

Pattern	Description
Testimonials Cards	Card-based testimonials
Testimonials Grid	Grid layout testimonials
Testimonials Minimal	Simple quote display
Testimonial Single	Featured single testimonial

Content Sections (4)

Pattern	Description
Content About	About section layout
Content FAQ	Frequently asked questions
Content Pricing	Pricing table display
Content Stats	Statistics / numbers display

Headers & Footers (4)

Pattern	Description
Page Header	Page title with breadcrumbs
Section Header	Section title with description
Footer Links	Multi-column footer links
Footer Simple	Minimal footer design

BuddyPress Patterns (14)

Patterns for building community pages. These live under patterns/buddypress/ and carry both the buddyx-buddypress and buddyx-community categories.

Pattern	Description
Active Members	Grid of recently active members
Activity Feed	Latest activity stream display
Community Hero	Hero section for community pages
Community Sidebar	Sidebar with community widgets
Community Stats	Member and group statistics
Groups List	Grid of available groups
Login Widget	Login / register form pattern
Member Testimonials	Member quotes and reviews
Members List	Directory of members
Newest Groups	Recently created groups
Newest Members	New member showcase
Online Members	Currently active users
Sitewide Notice	Announcement banner
Why Join Us	Community benefits section

Template Patterns (20)

Complete page layouts ready to use. These live under patterns/templates/ in the BuddyX Templates category.

Homepage Templates (3)

Pattern	Description
Community Homepage	Community-focused homepage
Courses Homepage	LMS / courses homepage
Marketplace Homepage	E-commerce homepage

Standard Pages (12)

Pattern	Description
About Page	Company / site about page
About Page with Team	About page with a team section
Blog Page	Blog listing layout
Contact Page	Full contact page (`contact-page`)
Contact Page (Simple)	Minimal contact form (`contact-simple`)
Event Page	Event listings page
FAQ Page	Frequently asked questions
Landing Page	Marketing landing page
Portfolio Page	Project showcase
Pricing Page	Pricing tiers display
Services Page	Services showcase
Team Page	Team members grid

Utility Pages (5)

Pattern	Description
404 Error Page	Not found page
Coming Soon Page	Pre-launch page
Maintenance Page	Site maintenance page
Privacy Policy Page	Privacy policy template
Terms of Service Page	Terms & conditions

Pattern Categories Reference

BuddyX Pro registers 14 pattern categories via the Block_Patterns\Component class. Eight cover the general theme patterns, plus BuddyPress, Templates, and Community; the LMS, WooCommerce, and Dark Mode categories are registered and reserved for future and companion-plugin patterns.

Category Slug	Label	Description
`buddyx-hero`	BuddyX Hero	Hero section patterns
`buddyx-about`	BuddyX About	About section patterns
`buddyx-features`	BuddyX Features	Feature highlight patterns
`buddyx-social-proof`	BuddyX Social Proof	Testimonials, logos, and stats patterns
`buddyx-pricing-faq`	BuddyX Pricing & FAQ	Pricing tables and FAQ patterns
`buddyx-cta`	BuddyX CTA	Call-to-action patterns
`buddyx-footer`	BuddyX Footer	Footer patterns
`buddyx-query`	BuddyX Query	Post query and listing patterns
`buddyx-buddypress`	BuddyX BuddyPress	BuddyPress community patterns
`buddyx-lms`	BuddyX LMS	Learning Management System patterns
`buddyx-woocommerce`	BuddyX WooCommerce	E-commerce patterns
`buddyx-dark`	BuddyX Dark Mode	Dark themed patterns
`buddyx-templates`	BuddyX Templates	Full page template patterns
`buddyx-community`	BuddyX Community	Community and social patterns

Customizing Patterns

After Insertion

Once inserted, patterns are regular blocks:

Edit any text by clicking and typing
Change colors in block settings
Swap images using the media library
Adjust spacing and alignment
Delete unwanted blocks

Creating Reusable Blocks

Save customized patterns for reuse:

Select the blocks you want to save
Click the three-dot menu
Select Create pattern
Name your pattern
Choose whether to sync it

Dependencies

Some patterns pair with plugins:

Pattern Group	Related Plugin
BuddyPress patterns	BuddyPress
Community sections (live-data blocks)	BuddyPress

Patterns still appear in the inserter but may not populate live data without their plugin active.

Developer Information

Pattern File Structure

patterns/
├── *.php           # 27 general theme patterns (root level)
├── general/        # 26 community-styled sections
├── buddypress/     # 14 BuddyPress patterns
└── templates/      # 20 full page templates

Pattern Header Format

<?php
/**
 * Title: Pattern Name
 * Slug: buddyx-pro/pattern-slug
 * Categories: buddyx-community, featured
 * Keywords: keyword1, keyword2
 * Description: Pattern description.
 * Viewport Width: 1400
 * Inserter: true
 */
?>

Registration

Pattern categories are registered by the Block_Patterns\Component class. WordPress auto-registers the pattern files themselves from the theme's patterns/ directory.

Page Templates - Page template options
Widgets - Available widgets
Developer Guide - Creating custom patterns

BuddyX Pro provides multiple menu locations for comprehensive site navigation.

Menus Settings Menu configuration in the Customizer

BuddyX Pro registers 7 menu locations:

Primary Menus

Location	Description
Primary - Logged in users	Main header navigation for logged-in members
Primary - Logged out users	Main header navigation for visitors

Mobile Menus

Location	Description
Mobile Menu - Logged in users	Mobile navigation for logged-in members
Mobile Menu - Logged out users	Mobile navigation for visitors

Side Panel Menus

Location	Description
Side Menu - Logged in users	Side panel menu for logged-in members
Side Menu - Logged out users	Side panel menu for visitors

Location	Description
User Menu	User account dropdown menu in header

Creating Menus

Go to Appearance → Menus
Click Create a new menu
Enter a menu name (e.g., "Main Menu")
Click Create Menu

Add items from:

Pages - Site pages
Posts - Blog posts
Custom Links - External URLs
Categories - Post categories
BuddyPress - Community pages (if active)
WooCommerce - Shop pages (if active)

Step 3: Assign Location

Scroll to Menu Settings
Check the desired location(s)
Click Save Menu

Logged In vs Logged Out Menus

BuddyX Pro shows different menus based on login status:

Logged In Users See:

Member dashboard links
Profile and settings
Logout option
Community features

Logged Out Users See:

Login/Register links
Public pages only
Promotional content

Setting Up Both Menus

Create a "Main Menu (Logged In)" menu
- Assign to: Primary - Logged in users
Create a "Main Menu (Logged Out)" menu
- Assign to: Primary - Logged out users

The mobile menu appears on screens below the responsive breakpoint.

Create a menu specifically for mobile
Keep it simpler than desktop menu
Assign to: Mobile Menu - Logged in/out users

Tips for Mobile Menus:

Limit to 6-8 top-level items
Use shorter link text
Prioritize important links
Test on actual devices

The side panel (hamburger menu) provides additional navigation.

Enabling Side Panel

Go to Appearance → Customize → Side Panel
Enable the side panel
Configure display options

Create a menu for the side panel
Assign to: Side Menu - Logged in/out users
Consider vertical layout when designing

The user menu appears when clicking the user avatar in the header.

Typically includes:

Profile link
Account settings
Dashboard
Orders (if WooCommerce)
Courses (if LearnDash)
Logout

Create a "User Menu" menu
Add user-specific links
Assign to: User Menu location

Add icons to menu items using CSS classes.

Using FontAwesome Icons

Edit a menu item
In CSS Classes field, add: menu-icon fas fa-home
Save the menu

Common icons:

fas fa-home - Home
fas fa-user - Profile
fas fa-cog - Settings
fas fa-shopping-cart - Cart
fas fa-sign-out-alt - Logout

Enabling CSS Classes Field

Click Screen Options at top of Menus page
Check CSS Classes
The field now appears for each menu item

Create multi-level navigation with dropdowns.

Creating Dropdowns

Add menu items normally
Drag child items slightly to the right
They indent under the parent item
Save the menu

Desktop: Hover to reveal dropdown
Mobile: Tap to expand/collapse
Auto-close when clicking elsewhere

When BuddyPress is active, additional menu items are available:

Item	Description
Activity	Activity feed
Members	Members directory
Groups	Groups directory
Profile	Current user's profile
Settings	Account settings

Adding BuddyPress Items

In the menu editor, find BuddyPress section
Check desired items
Click Add to Menu

When WooCommerce is active:

Item	Description
Shop	Product archive
Cart	Shopping cart
Checkout	Checkout page
My Account	Account dashboard

Display Options

In Menu Settings at bottom of menu editor:

Auto add pages - Automatically add new top-level pages
Menu locations - Where the menu appears

Screen Options

Click Screen Options to show/hide:

CSS Classes
Link Target
Title Attribute
Link Relationship (XFN)
Description

Best Practices

Limit top-level items to 6-8
Use clear, descriptive labels
Group related items in dropdowns
Place important items first

Accessibility

Use descriptive link text
Avoid "Click Here" or "Read More"
Maintain logical order
Test keyboard navigation

Mobile Considerations

Test on actual devices
Consider thumb-friendly placement
Keep text concise
Limit nesting depth

Troubleshooting

Verify menu is assigned to location
Check if location is displayed in header
Clear any caching
Check theme customizer settings

Dropdowns Not Working

Check for JavaScript errors
Verify parent item has children
Test with plugins disabled
Check CSS for conflicts

Resize browser to trigger mobile view
Check mobile menu is assigned
Verify hamburger icon is enabled
Test touch interactions

Header Options - Header configuration
Side Panel - Side panel settings
BuddyPress Options - BP menu integration

Page Templates

BuddyX Pro includes multiple page and post templates for different layouts.

Overview

Page templates control the layout structure of individual pages and posts. BuddyX Pro provides templates for:

Full-width layouts
Sidebar layouts (left, right, both)
Custom content widths

Page Templates

File: page-templates/full-width-container.php Template Name: Page No Sidebar

Full-width page with content contained in the standard container width. No sidebars.

Best for:

Landing pages
Sales pages
Pages using block editor layouts

Page Full Screen

File: page-templates/full-width.php Template Name: Page Full Screen

True full-width page that stretches edge-to-edge. No container constraints.

Best for:

Visual showcases
Full-width block patterns
Custom designs

File: page-templates/page-left-sidebar.php Template Name: Page Left Sidebar

Page content with a sidebar on the left side.

Best for:

Documentation pages
Archive-style content
Pages needing navigation

File: page-templates/page-right-sidebar.php Template Name: Page Right Sidebar

Page content with a sidebar on the right side.

Best for:

Blog-style pages
Pages with widgets
Standard content layouts

File: page-templates/page-both-sidebar.php Template Name: Page Both Sidebar

Page content with sidebars on both left and right sides.

Best for:

Complex layouts
Multi-widget pages
Dashboard-style pages

Post Templates

File: post-templates/post-right-sidebar.php Template Name: Right Sidebar

Standard post layout with sidebar on the right.

File: post-templates/post-left-sidebar.php Template Name: Left Sidebar

Post layout with sidebar on the left side.

File: post-templates/post-both-sidebar.php Template Name: Both Sidebar

Post layout with sidebars on both sides.

Full Width - Small Container

File: post-templates/post-full-small.php Template Name: Full Width - Small container

Full-width post with narrow content width. Good for readability.

Full Width - Large Container

File: post-templates/post-full-large.php Template Name: Full Width - Large container

Full-width post with wide content width. Good for media-rich content.

Custom (Optional) Templates

BuddyX Pro also ships two optional starter templates. They carry a Template Name header, so they appear in the editor's Template dropdown alongside the page and post templates above. They render the standard header, content, and footer with no sidebar, and are meant as a clean starting point you can copy into a child theme and extend.

Custom Page Template

File: optional/custom-page-template.php Template Name: Custom Page Template Applies to: Pages

A minimal full-content page template. Use it as a base for a bespoke page layout without editing one of the core sidebar templates.

Custom Post Template

File: optional/custom-post-template.php Template Name: Custom Post Template Applies to: Posts (declared with Template Post Type: post)

A minimal single-post template that shows up in the Template dropdown when editing a post. Use it as a base for a custom article layout.

These two live in the theme's optional/ folder. They are safe starting points - duplicate them into a child theme before customizing so your changes survive theme updates.

Applying Templates

For Pages

Edit your page
In the right sidebar, find Page Attributes
Click the Template dropdown
Select your desired template
Click Update

For Posts

Edit your post
In the right sidebar, find Post Attributes or Template
Select your desired template
Click Update

Default Settings

You can set default layouts in the Customizer:

Go to Appearance → Customize → Sidebar
Find Default Sidebar Layout
Choose your default
Click Publish

Go to Appearance → Customize → Sidebar
Find Single Post Sidebar Layout
Choose your default
Click Publish

Template Hierarchy

Templates are applied in this order of priority:

Template assigned to specific page/post (highest)
Customizer default for content type
Theme default (lowest)

Different templates use different widget areas:

Template	Widget Area Used
Left Sidebar	Main Sidebar
Right Sidebar	Main Sidebar
Both Sidebar	Main Sidebar + Right Sidebar

Custom Templates

Creating Custom Templates

Create custom templates in a child theme:

Page Template:

<?php
/**
 * Template Name: My Custom Template
 */

get_header();
?>

<div class="my-custom-layout">
    <!-- Your custom layout -->
    <?php the_content(); ?>
</div>

<?php
get_footer();

Location: child-theme/page-templates/my-template.php

Integration Templates

BuddyPress Pages

BuddyPress pages have their own sidebar settings:

Appearance → Customize → Sidebar → BuddyPress Sidebar Layout

WooCommerce Pages

WooCommerce pages have their own sidebar settings:

Appearance → Customize → Sidebar → WooCommerce Sidebar Layout

LearnDash Pages

LearnDash pages have their own sidebar settings:

Appearance → Customize → Sidebar → LearnDash Sidebar Layout

Responsive Behavior

On mobile devices:

Sidebars stack below content
Full-width templates remain full-width
Container widths adjust responsively

Sidebar Options - Sidebar configuration
Block Patterns - Pre-built layouts
Child Theme - Creating custom templates

Custom Widgets

BuddyX Pro includes custom widgets for enhanced functionality.

Widgets Settings Widget areas configuration in the Customizer

Available Widgets

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

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

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

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

BuddyX Pro registers multiple 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)

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

Go to Appearance → Customize → Widgets
Select a widget area
Click Add a Widget
Select your widget
Configure settings
Click Publish

Via Widgets Screen

Go to Appearance → Widgets
Find the widget you want
Drag it to a widget area
Configure settings
Click Save

Widgets inherit theme styling:

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

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:

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

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

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' );
});

Sidebar Options - Configure sidebars
Block Patterns - Alternative to widgets
BuddyPress Options - BuddyPress settings

BuddyNext Integration

BuddyNext is Wbcom's next-generation community engine and the successor to BuddyPress. BuddyX Pro detects it automatically and closes the gaps that BuddyNext leaves to the theme.

When the integration loads

The BuddyNext integration loads only when both conditions are true:

Condition	Why
`BUDDYNEXT_VERSION` is defined	BuddyNext is installed and active.
BuddyPress is not active	BuddyNext and BuddyPress are mutually exclusive at runtime - a site runs one or the other, never both.

If BuddyPress is active, nothing in this page applies - the theme uses its BuddyPress integration instead. There is no setting to turn this on or off; it follows which plugin is active.

What the theme wires up

1. Auth links point at the BuddyNext auth hub

BuddyX Pro models auth as a mapped Login page and a mapped Registration page, falling back to WordPress core when no page is mapped. BuddyNext instead serves a single auth hub page, where signup and password reset are endpoints on that one page rather than separate published pages.

Left alone, the fallback would bypass that hub and land on wp-login.php. The theme filters three core URLs (priority 20) so every call site - header, bbPress login prompt, login widget - routes to BuddyNext at once:

Filter	Resolves to
`login_url`	`\BuddyNext\Core\PageRouter::auth_url()`
`register_url`	`\BuddyNext\Core\PageRouter::signup_url()`
`lostpassword_url`	`\BuddyNext\Core\PageRouter::reset_url()`

URLs are read from BuddyNext's public PageRouter API - no hard-coded slugs - so a custom auth slug is honoured. When a redirect_to is requested, it is carried through on the login and lost-password URLs.

Front-end only. wp-admin, wp-login.php itself, AJAX, REST, and cron are left on WordPress core, so administrator sign-in and the reset-password-from-email flow keep working unchanged.

A mapped page still wins. If you have mapped a Login or Registration page in the Customizer, the templates resolve that page before calling wp_login_url() / wp_registration_url(), so this fallback is never reached. The sign-in popup also keeps working.

BuddyNext renders its own header user section (bell, messages, avatar dropdown). By default that dropdown shows BuddyNext's own quick links.

When you assign a menu to the theme's User Menu nav location, those items become the dropdown's links instead - the menu you control, not a fixed default.

Only top-level items are used; a header dropdown is single-level, so child items are skipped.
Items carry no icon (the dropdown reserves the icon column so labels stay aligned).
Log Out is always kept - BuddyNext appends it regardless.
If no menu is assigned, or the assigned menu is empty, BuddyNext's own default quick links stay.

To set it: Appearance > Menus > Manage Locations > User Menu.

For developers

The integration lives in inc/compatibility/buddynext/buddynext-functions.php and is loaded from functions.php. Every function is wrapped in function_exists(), so a child theme can redefine any of them by declaring its own version first.

Function	Purpose
`buddyx_pro_buddynext_user_profile_menu_items()`	Reads the `user_menu` nav location as a flat list of dropdown rows.
`buddyx_pro_buddynext_filter_user_menu_links()`	Hooked to `buddynext_header_user_menu_links` (priority 10).
`buddyx_pro_buddynext_resolve_auth_url()`	Resolves an auth URL from `\BuddyNext\Core\PageRouter`. Returns `''` when BuddyNext is unavailable.
`buddyx_pro_buddynext_is_frontend_auth_context()`	Guards the auth filters to front-end requests only.

Each auth filter falls back to the unmodified core URL when BuddyNext can't resolve one, so the theme never emits a broken link.

Bundled Plugins - BuddyNext and the rest of the first-party family
Menus - Menu locations, including User Menu
Page Mapping - Mapping Login / Registration pages

Need help? support@wbcomdesigns.com

Other Plugin Integrations

Elementor, GamiPress, The Events Calendar, and more.

Elementor Page Builder

Create stunning custom layouts with Elementor and BuddyX Pro. Build beautiful pages, headers, footers, and templates with drag-and-drop simplicity while maintaining full theme compatibility.

What You Can Do

With BuddyX Pro's Elementor integration, you can:

Build Custom Pages - Design unique layouts with Elementor's visual editor
Create Custom Headers - Replace theme header with Elementor templates
Design Custom Footers - Build custom footer layouts
Template Builder - Create templates for posts, archives, and more (Pro)
Theme Builder - Design templates for any WordPress content (Pro)
Widget Library - Access 40+ Elementor widgets
Responsive Design - Automatic mobile optimization
Full Theme Compatibility - BuddyX Pro styling applies to Elementor content

Prerequisites

Before using Elementor with BuddyX Pro:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
Elementor	3.0+	Free version available
PHP	7.4+	Required by Elementor

Recommended:

Elementor Pro - Unlock Theme Builder, popup builder, and advanced widgets
RAM: At least 128MB PHP memory limit
Max Execution Time: 300 seconds for large pages

Installation & Setup

Step 1: Install Elementor

Log in to your WordPress dashboard
Go to Plugins → Add New
Search for "Elementor"
Click Install Now next to Elementor Website Builder
Click Activate after installation completes

Step 2: Configure Elementor Settings

After activation:

Go to Elementor → Settings
Configure recommended settings:

General Tab:

Setting	Recommendation	Why
Editing Handles	On	Easier widget selection
Enable Flexbox	On	Better responsive layouts
Default Generic Fonts	System	Match BuddyX Pro typography

Style Tab:

Setting	Value
Content Width	1170px (matches BuddyX Pro)
Space Between Widgets	20px
Stretched Section Width	100%
Default Colors	Use BuddyX Pro colors (set in Customizer)

Advanced Tab:

Setting	Recommendation
CSS Print Method	External File (better performance)
Google Fonts	On (or use BuddyX Pro fonts)
Font Display	Swap

Step 3: Verify BuddyX Pro Compatibility

BuddyX Pro automatically works with Elementor. To verify:

Create new page: Pages → Add New
Click Edit with Elementor button
Page opens in Elementor editor
BuddyX Pro styles apply to Elementor widgets

If Elementor button doesn't appear:

Go to Elementor → Settings → General
Check "Enable for Posts" and "Enable for Pages"
Save settings

BuddyX Pro Integration Features

Automatic Canvas Template Support

BuddyX Pro supports all Elementor canvas templates:

Available Templates:

Template	Header	Footer	Sidebar	Use Case
Default	Theme	Theme	Theme	Regular pages with BuddyX Pro design
Elementor Canvas	None	None	None	Blank slate, 100% custom
Elementor Full Width	Theme	Theme	None	Keep BuddyX Pro header/footer, custom content

How to Set Template:

Edit page with Elementor
Click gear icon (Page Settings)
Find Template dropdown
Choose your template
Update page

Matching Theme Colors

BuddyX Pro does not automatically push its Customizer colors into Elementor's Global Colors - Elementor manages its own color system. To keep Elementor content on-brand, set matching values in Elementor once:

Go to Elementor → Settings → Style (or Site Settings → Global Colors)
Set your Global Colors to match the values from Appearance → Customize → Colors & Skin:
- Primary: BuddyX Pro primary color
- Secondary: BuddyX Pro secondary color
- Text: body text color
- Accent: link color
Apply those Global Colors to widgets from each widget's Style tab

Where a widget is left on its default (no explicit color), it inherits the theme's CSS, so text and links pick up BuddyX Pro styling automatically.

Typography

BuddyX Pro does not override Elementor's typography controls. Widgets left on Elementor's Default font inherit the theme's body and heading fonts through the normal CSS cascade. To force an exact match, set the fonts in Elementor:

Go to Elementor → Settings → Style (or Site Settings → Typography)
Set the base/primary font to match the BuddyX Pro body font
Set the heading font to match the BuddyX Pro heading font
Leave a widget's font on Default to inherit the theme font instead

Responsive Breakpoints

BuddyX Pro breakpoints match Elementor:

Device	Breakpoint	BuddyX Pro	Elementor
Desktop	1025px+	Yes	Yes
Tablet	768px - 1024px	Yes	Yes
Mobile	<768px	Yes	Yes

Consistent Across:

Theme layouts
Elementor sections
Widget spacing
Font sizes

Building Pages with Elementor

Creating Your First Elementor Page

Go to Pages → Add New
Enter page title
Click Edit with Elementor button
Elementor editor opens

Editor Interface:

Panel	Location	Purpose
Left Panel	Left side	Widget library and settings
Canvas	Center	Live preview and editing
Top Bar	Top	Save, preview, responsive mode
Bottom Bar	Bottom	Navigator, history, user preferences

Page Building Workflow

Step 1: Choose Structure

Click + icon in canvas
Choose column structure:
- Single column (full width)
- Two columns (50/50)
- Three columns (33/33/33)
- Custom columns

Step 2: Add Widgets

Search or browse widgets in left panel
Drag widget to desired column
Widget appears with default settings

Step 3: Customize Content

Click widget to select
Left panel shows Content tab
Edit text, images, links, etc.

Step 4: Style Widget

Click Style tab
Adjust colors, spacing, typography
Changes appear live in canvas

Step 5: Advanced Settings

Click Advanced tab
Set margins, padding, CSS classes
Configure animations, backgrounds

Recommended Page Templates

Homepage Template:

Hero section (full width, background image)
Features section (3 columns with icons)
Statistics section (4 columns with numbers)
Call-to-action section (centered, full width)

About Page Template:

Header section (full width)
Team section (4 columns with photos)
Timeline section (2 columns)
Contact section (form)

Landing Page Template:

Hero with headline and CTA button
Benefits section (icon boxes)
Testimonials (slider)
Pricing table
FAQ accordion
Final CTA section

Theme Builder (Elementor Pro)

Create custom templates for WordPress content types.

BuddyX Pro registers Elementor's header and footer theme locations, so an Elementor Pro header or footer template displays in place of the theme's own header/footer. Other template types (Single, Archive, 404, and so on) are handled by Elementor Pro itself and render inside the theme's content area.

Setting Up Theme Builder

Requires Elementor Pro.

Go to Elementor → Theme Builder
Choose template type:
- Header
- Footer
- Single Post
- Archive
- Search Results
- 404 Page

Creating Custom Header

Replace BuddyX Pro header with Elementor header:

Go to Elementor → Theme Builder
Click Add New → Header
Name your header template
Click Create Template

Building the Header:

Add Section
Set section height to fit header (80-100px)
Add columns (3 columns recommended):
- Column 1: Logo (Site Logo widget)
- Column 2: Menu (Nav Menu widget)
- Column 3: Icons (Search Icon, Cart Icon widgets)

Header Widgets to Use:

Widget	Purpose
Site Logo	Your logo image
Site Title	Site name text
Nav Menu	Main navigation menu
Search Form	Search bar
Social Icons	Social media links

Header Settings:

Click section settings (gear icon)
Advanced tab → Positioning
Set Width: Full Width (100%)
Set Position: Fixed (for sticky header)

Display Conditions:

Click Publish button
Set display conditions:
- Include: Entire Site
- Or specific pages/sections
Click Save & Close

Build custom footer with widgets:

Go to Elementor → Theme Builder
Click Add New → Footer
Name your footer template
Click Create Template

Footer Structure:

4-Column Footer Layout:

Column 1: About text and logo
Column 2: Quick links menu
Column 3: Recent posts
Column 4: Contact info

Footer Widgets:

Widget	Use For
Text Editor	About text, descriptions
Icon List	Quick links
Nav Menu	Footer menu
Social Icons	Social media links
Heading	Section titles
Divider	Visual separation

Footer Bottom Bar:

Add second section below:

Left column: Copyright text
Right column: Privacy links or payment icons

Display Conditions:

Set to Entire Site or specific pages.

Creating Single Post Template

Custom design for blog posts:

Elementor → Theme Builder → Add New → Single
Choose Post as content type
Build layout using these widgets:

Essential Post Widgets:

Widget	Displays
Post Title	Article title
Post Excerpt	Short description
Post Content	Full article content
Featured Image	Main image
Post Info	Author, date, categories
Author Box	Author bio and avatar
Post Comments	Comment section
Post Navigation	Previous/next post links

Layout Recommendations:

Classic Blog Layout:

Full width featured image
Centered title and meta
Single column content (800px wide)
Author box at bottom
Comments section

Magazine Layout:

Side-by-side featured image and title
Two column content with sidebar
Related posts grid
Social sharing buttons

Display Conditions:

Set to All Singular → Posts.

Creating Archive Template

Design for blog archive, category, tag pages:

Elementor → Theme Builder → Add New → Archive
Choose Posts Archive
Build with Archive widgets:

Archive-Specific Widgets:

Widget	Purpose
Archive Title	Category/tag name
Archive Posts	Post loop/grid
Breadcrumbs	Navigation path

Archive Posts Widget Settings:

Setting	Options
Layout	Classic, Cards, Grid
Columns	2, 3, or 4
Posts Per Page	9, 12, 15
Pagination	Numbers, Prev/Next, Load More

Display Conditions:

All Archives
Or specific (Categories, Tags, Authors)

BuddyPress & Community Pages

Can I Use Elementor with BuddyPress Pages?

Partially supported:

Works Well:

Custom homepages with BuddyPress widgets
Landing pages for community
About/Contact pages

Not Recommended:

Activity page (uses BuddyPress templates)
Member profiles (uses BuddyPress templates)
Group pages (uses BuddyPress templates)

Best Practice:

Use Elementor for marketing/info pages, let BuddyX Pro handle BuddyPress pages.

Adding BuddyPress Elements

On Elementor pages, add BuddyPress content:

Using Shortcodes:

Add Shortcode widget and use these:

Shortcode	Displays
`[bp_activity_stream]`	Activity feed
`[bp_member_list]`	Member directory
`[bp_group_list]`	Group directory
`[bp_login_form]`	Login form
`[bp_registration_form]`	Registration form

Using Widgets:

Add WordPress Widget and choose BuddyPress widgets:

Who's Online
Recently Active Members
Members
Groups

WooCommerce & E-commerce (Elementor Pro)

WooCommerce Builder

Elementor Pro includes WooCommerce widgets:

Product Widgets:

Widget	Purpose
Products	Product grid/list
Product Categories	Category grid
Product Title	Single product name
Product Price	Product price display
Product Add to Cart	Buy button
Product Images	Gallery

Building Shop Page:

Elementor → Theme Builder → Add New → Archive
Choose Products Archive
Add Products widget
Configure grid layout
Set display conditions to Shop page

Building Product Page:

Elementor → Theme Builder → Add New → Single
Choose Product as content type
Layout products widgets:
- Product Images (left column)
- Product Title, Price, Add to Cart (right column)
- Product Tabs (full width below)
- Related Products (bottom)

Cart & Checkout Pages

For cart/checkout, keep BuddyX Pro default templates:

Why:

WooCommerce forms require specific structure
BuddyX Pro optimizes these pages
Elementor can break checkout functionality

If You Need Customization:

Use WooCommerce Customizer options
Or add custom CSS
Avoid building entire cart/checkout in Elementor

LearnDash Course Pages (Elementor Pro)

Building Course Templates

Elementor Pro supports LearnDash templates:

Elementor → Theme Builder → Add New → Single
Choose Course (LearnDash)
Use Dynamic Content widgets

LearnDash Dynamic Tags:

Tag	Displays
Course Title	Course name
Course Description	Course overview
Course Price	Enrollment price
Course Progress	Progress bar
Course Curriculum	Lesson list

Example Course Layout:

Hero section: Course title, featured image, price
Course info: Instructor, duration, students enrolled
Course content: Description and what you'll learn
Curriculum: Lesson/topic accordion
Instructor bio: Author box
Enrollment button: Buy/Enroll CTA

Display Conditions:

Set to All Singular → Courses.

Performance Optimization

Speed Tips for Elementor

Limit Widget Count
- Use 20-30 widgets per page maximum
- Combine widgets when possible
- Remove unused widgets
Optimize Images
- Compress before upload
- Use WebP format
- Recommended max: 1920px wide
- Use Elementor's built-in lazy load
Font Loading
- Limit Google Fonts to 2-3 families
- Use system fonts when possible
- Enable font preloading
CSS Optimization
- Set CSS Print Method to External File
- Enable "Minify CSS Files"
- Combine CSS files when possible
Reduce Animations
- Limit entrance animations
- Use CSS animations over JS
- Disable animations on mobile

Caching with Elementor

Recommended caching plugins:

Plugin	Compatibility	Notes
WP Rocket	Excellent	Auto-detects Elementor
LiteSpeed Cache	Excellent	ESI for dynamic content
W3 Total Cache	Good	Configure minify settings

Cache Settings:

Enable page caching
Enable browser caching
Don't cache logged-in users
Clear cache after Elementor edits

Common Questions

Can I use Elementor and Gutenberg together?

Yes! You can:

Use Elementor for some pages
Use Gutenberg (Block Editor) for others
Mix content types on same site

To Switch:

Click "Edit with Elementor" for Elementor editor
Click "Edit" for Gutenberg editor

Will Elementor pages work if I deactivate the plugin?

No. Elementor content requires the plugin to display. If deactivated:

Pages appear blank
Content is saved as shortcodes
Reactivating restores content

Best Practice: Don't use Elementor for critical pages if you might switch themes.

How do I match Elementor colors to my theme?

Method 1: Global Colors

Elementor → Settings → Style
Set colors under "Global Colors"
Use Customizer values:
- Primary: BuddyX Pro primary color
- Secondary: BuddyX Pro secondary color
- Text: Body text color
- Accent: Link color

Method 2: Color Picker

Use eyedropper tool to pick colors from existing theme elements.

Can I export/import Elementor designs?

Yes, with Elementor Pro:

Export Template:

Elementor → Template Library
Find your template
Click export icon
Download JSON file

Import Template:

Elementor → Template Library → Import
Upload JSON file
Template appears in library

For Elementor Headers:

Edit header template
Click section settings
Advanced tab → Motion Effects
Enable "Sticky"
Set Sticky On: Top
Choose sticky behavior

For Theme Header with Elementor:

Use BuddyX Pro sticky header instead:

Appearance → Customize → Site Header → Sticky Header
Enable and configure

Why are my Elementor pages loading slowly?

Common Causes:

Too Many Widgets - Reduce to 20-30 per page
Large Images - Compress and resize
Google Fonts - Limit to 2-3 families
No Caching - Install caching plugin
Cheap Hosting - Upgrade to better server

Quick Fixes:

Enable lazy load for images
Use CSS print method: External File
Disable unused widgets in Elementor settings
Optimize database

Can I use BuddyX Pro header and Elementor content?

Yes! Use Elementor Full Width template:

Edit page with Elementor
Page Settings → Template
Choose "Elementor Full Width"
BuddyX Pro header/footer remain
Content area is 100% Elementor

Recommended Configurations

For Marketing Sites

Pages to Build with Elementor:

Homepage
About page
Services/Products page
Contact page
Landing pages

Keep Default BuddyX Pro:

Blog archive
Single posts
404 page
Search results

For Community Sites

Use Elementor For:

Homepage (welcome/features)
About/Team page
Resource library
Documentation pages

Keep BuddyX Pro Default:

All BuddyPress pages
Member profiles
Activity stream
Groups pages
Forums (bbPress)

For Course Platforms

Build with Elementor Pro:

Course archive page
Single course layout
Instructor page template
Student dashboard

Keep BuddyX Pro Default:

Lesson pages (LearnDash Focus Mode)
Quiz pages
Assignment pages
Profile pages

Site Layout Options - Container width settings
Header Layouts - Default header options
Footer Settings - Default footer options
Typography Settings - Font configuration

Got a question? We're a friendly team - happy to help.

Documentation: docs.wbcomdesigns.com Elementor Docs: elementor.com/help Video Tutorials: youtube.com/wbcomdesigns

Email Support: support@wbcomdesigns.com

Include: BuddyX Pro version, Elementor version, and link to your page for troubleshooting.

The Events Calendar

Display and manage events beautifully with The Events Calendar and BuddyX Pro. Create event listings, calendars, and single event pages with stunning layouts and seamless theme integration.

What You Can Do

With BuddyX Pro's Events Calendar integration, you can:

Display Events - Beautiful event listings in list, calendar, and photo views
Custom Event Pages - Styled single event pages with venue and organizer details
Calendar Views - Month, week, day, and list calendar displays
Venue & Organizer Pages - Dedicated pages for venues and event organizers
Responsive Design - Perfect display on all devices
BuddyPress Integration - Events in activity stream and member profiles
Search & Filters - Category, tag, venue, and date filtering
Google Maps - Location maps on event pages

Prerequisites

Before setting up The Events Calendar:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
The Events Calendar	5.0+	Free version available
PHP	7.4+	Required by the plugin

Recommended Plugins:

Events Calendar PRO - Recurring events, advanced views, more features
Community Events - Let members submit events
Event Tickets - Sell tickets and manage RSVPs
Eventbrite Tickets - Sync with Eventbrite

Installation & Setup

Step 1: Install The Events Calendar

Log in to your WordPress dashboard
Go to Plugins → Add New
Search for "The Events Calendar"
Click Install Now next to The Events Calendar by The Events Calendar
Click Activate after installation completes

Step 2: Run Initial Setup

After activation, the setup assistant appears:

Choose Views
- Select default view (List, Month, Day, Photo)
- Recommended: Month View or List View
- Click Next
Configure Timezone
- Set your site timezone
- Choose date/time format
- Click Next
Set Event Pages
- Plugin creates default pages
- Events page (main calendar)
- Can customize slugs later
- Click Finish

Step 3: Configure Basic Settings

Go to Events → Settings

General Tab:

Setting	Recommendation	Why
Number of events per page	12	Good balance for performance
Default view	List View or Month View	Most user-friendly
Enable live refresh	Yes	Updates calendar without reload
Google Maps API Key	Add your key	Required for maps

Display Tab:

Setting	Recommendation
Events URL slug	events (default)
Single event URL slug	event (default)
Venue URL slug	venue (default)
Organizer URL slug	organizer (default)

After changing slugs:

Go to Settings → Permalinks
Click Save Changes (refreshes permalinks)

BuddyX Pro Integration Features

BuddyX Pro automatically detects The Events Calendar and applies custom styling.

Automatic Template Detection

BuddyX Pro includes custom templates for:

Template	Location	Purpose
default-template.php	`tribe/events/v2/`	Main wrapper template
event.php	`tribe/events/v2/list/`	Single event in list view
event.php	`tribe/events/v2/day/`	Single event in day view
event.php	`tribe/events-pro/v2/photo/`	Single event in photo view
single-event.php	`tribe-events/`	Single event page

Theme Integration:

BuddyX Pro header and footer automatically display
Sub-header and breadcrumbs appear
Sidebar settings respected
Dark mode compatible

Custom Styling

BuddyX Pro includes dedicated Events Calendar stylesheet:

Location: assets/css/eventscalendar.min.css

Styled Elements:

Calendar month grid
Event list cards
Event details boxes
Venue and organizer info
Search and filter bars
Pagination
Tooltips and modals

Color Integration:

Event colors match theme primary color
Hover effects use secondary color
Typography inherits theme fonts
Responsive spacing

Layout Options

The Events Calendar does not have its own sidebar controls in BuddyX Pro. Event archive, single event, venue, and organizer pages follow the theme's default sidebar setting, and the shipped eventscalendar.min.css handles the styling.

Available Layouts (from the global Sidebar setting):

Layout	Description	Best For
No Sidebar	Maximum content width	Calendar views, photo views
Right Sidebar	Content + sidebar widgets	Event lists with filters
Left Sidebar	Sidebar + content	Alternative list layout
Both Sidebars	Sidebar + content + sidebar	Advanced filtering needs

How to Set Layout:

Go to Appearance → Customize → Sidebar
Set the default Sidebar option (Left, Right, Both, or None)
Click Publish

This applies site-wide. To give event pages a different sidebar than the rest of the site, target the Tribe body classes with custom CSS in Appearance → Customize → Additional CSS.

Creating Your First Event

Step 1: Add New Event

Go to Events → Add New
Enter event title (e.g., "Community Meetup")
Add event description in content area

Content Tips:

Write engaging event description
Include what attendees will learn/experience
Add schedule/agenda if applicable
Include any prerequisites or requirements

Step 2: Set Event Date & Time

In Event Date Time meta box:

Field	Example
Start Date	June 15, 2025
Start Time	7:00 PM
End Date	June 15, 2025
End Time	9:00 PM
Timezone	America/Los_Angeles

Time Options:

Check "All Day Event" for full-day events
Leave end date/time blank for ongoing events
Set timezone for multi-timezone audiences

Step 3: Add Venue Information

In Event Venue meta box:

Create New Venue:

Click "Add New Venue" link
Enter venue name
Add address information:

Field	Example
Venue Name	Community Center
Address	123 Main Street
City	San Francisco
State/Province	CA
Zip/Postal Code	94102
Country	United States
Phone	(555) 123-4567
Website	https://communitycenter.com

Or Select Existing Venue:

Choose from dropdown
Previously created venues appear here

Google Maps:

Address automatically generates map
Map displays on single event page
Requires Google Maps API key

Step 4: Add Organizer Information

In Event Organizer meta box:

Create New Organizer:

Click "Add New Organizer"
Enter organizer details:

Field	Example
Organizer Name	Tech Community Group
Phone	(555) 987-6543
Website	https://techgroup.com
Email	contact@techgroup.com

Multiple Organizers:

Can add multiple organizers per event
Useful for co-hosted events

Step 5: Set Featured Image

Click "Set featured image" in sidebar
Upload or select event image
Recommended: 1200×800px (3:2 ratio)
Image appears in:
- Event list view
- Photo view
- Single event page header
- Calendar tooltips (PRO)

Step 6: Add Event Details

Event Categories:

Create categories: Events → Event Categories
Examples: Conference, Meetup, Workshop, Webinar
Assign in "Event Category" meta box

Event Tags:

Add relevant tags
Examples: networking, tech, community, free
Helps with filtering and search

Cost Information:

Add price in "Event Cost" field
Enter "Free" for free events
Or specific amount: $25, $50, etc.
Displays in event listings

Step 7: Publish Event

Review all information
Click Publish button
Event appears on events calendar
View event by clicking "View Event" link

Event Calendar Views

The Events Calendar provides multiple viewing options.

Month View

Shows calendar grid with events:

Features:

Full month display
Events listed by date
Click date to see all events
Navigate months with arrows

Best For:

Seeing full month at glance
Planning around dates
Finding date-specific events

Customization:

Grid displays 4-6 weeks
Today highlighted
Past dates grayed out
Events show as colored dots/bars

List View

Displays events as list:

Features:

Chronological event list
Full event details visible
Thumbnail images
Next/previous navigation

Best For:

Detailed event browsing
Reading descriptions
Mobile viewing
Accessibility

Layout in BuddyX Pro:

Large event images
Clear typography
Prominent date/time
Venue and category tags

Day View

Shows single day's events:

Features:

All events for one day
Hour-by-hour layout
Time conflicts visible
Easy day navigation

Best For:

Conference schedules
Daily event listings
Time-based planning

Photo View (Events Calendar PRO)

Grid of event images:

Features:

Masonry image grid
Minimal text
Hover for details
Filter by category

Best For:

Visual browsing
Event galleries
Image-heavy events

Venue & Organizer Pages

Single Venue Pages

Each venue gets dedicated page:

URL Structure: yoursite.com/venue/community-center/

Page Displays:

Venue name and description
Full address
Google Map
Phone and website
All events at this venue

Customization:

Add venue description
Upload venue photo
Include directions/parking info

Single Organizer Pages

Each organizer gets dedicated page:

URL Structure: yoursite.com/organizer/tech-community-group/

Page Displays:

Organizer name and bio
Contact information
Website and social links
All events by this organizer

Use Cases:

Multiple event hosts
Business/organization profiles
Speaker/instructor pages

Managing Venues & Organizers

Edit Existing:

Go to Events → Venues or Events → Organizers
Find item in list
Click Edit
Update information
Click Update

Delete:

Events using deleted venues/organizers show "N/A"
Reassign events before deleting

Search & Filtering

Event Search Bar

Built-in search on events page:

Search By:

Event title
Description content
Venue name
Organizer name

Location:

Appears above event listings
Sticky on scroll (optional)

Category Filtering

Filter events by category:

Setup:

Create categories: Events → Event Categories
Assign to events
Filter bar appears automatically

Filter Display:

Dropdown menu (default)
Or horizontal tag list (PRO)

Date Range Filtering (PRO)

Advanced date filtering:

Options:

Custom date range picker
"This Week" shortcut
"This Month" shortcut
"Next 3 Months" shortcut

Location Filtering (PRO)

Search by location:

Options:

City
State/Province
Country
Radius search (within X miles)

Recurring Events (Events Calendar PRO)

Create repeating events with PRO version.

Creating Recurring Event

Create new event
Check "This is a recurring event"
Choose recurrence pattern:

Recurrence Options:

Pattern	Example
Daily	Every day, every 2 days
Weekly	Every Monday, Every Mon/Wed/Fri
Monthly	First Tuesday of month, 15th of month
Yearly	Same date each year

End Options:

Never (continues indefinitely)
After X occurrences
On specific date

Managing Recurring Events

Edit Recurring Series:

Changes apply to all future instances
Past instances unchanged

Edit Single Instance:

Click single event
Choose "Edit this occurrence"
Changes apply only to that date

Delete Recurring Events:

Delete all: Removes entire series
Delete single: Removes one instance

Community Events (Add-on)

Let members submit events with Community Events add-on.

Setup Community Events

Install Community Events add-on (premium)
Go to Events → Settings → Community
Configure submission settings:

Submission Settings:

Setting	Options
Allow submissions	Yes
Require login	Yes (recommended)
Submission page	Choose page with shortcode
Moderation	Approve manually or auto-publish

User Roles:

Set which roles can submit
Default: Subscribers and above

Submission Form

Create submission page:

Create new page: "Submit Event"
Add shortcode: [tribe_community_events]
Form displays on page

Form Fields:

Event title
Description
Date/time
Venue (can create new)
Organizer (can create new)
Featured image
Categories

Member Experience:

Member visits submission page
Fills out event form
Submits event
Admin receives notification
Admin approves or edits
Event appears on calendar

Event Tickets & RSVPs

Manage attendance with Event Tickets plugin.

Free Tickets/RSVPs

Built-in RSVP system:

Edit event
Scroll to Tickets meta box
Click Add RSVP
Configure RSVP:

Setting	Example
Name	Free Registration
Description	Secure your spot
Capacity	50
Start sale	Immediately
End sale	Day before event

RSVP Features:

Track attendees
Set capacity limits
Require login
Send confirmations
Export attendee list

Paid Tickets (Event Tickets Plus)

Sell tickets with Event Tickets Plus:

Ticket Types:

Regular admission
VIP tickets
Early bird pricing
Group discounts

Payment Options:

PayPal
Stripe
WooCommerce integration

Features:

Automated confirmations
QR code tickets
Check-in app
Attendee reports

BuddyPress Integration

Display events in your BuddyPress community.

Events in Activity Stream

Show event posts in activity feed:

Requires: BuddyPress and Events Calendar PRO

Setup:

Create new event
Check "Post event to activity stream"
Event appears in activity feed
Members can like/comment

Activity Content:

Event title and excerpt
Featured image thumbnail
Date/time
Link to full event

Member Event Lists

Show member's events on profile:

Display Options:

Events attending (RSVPs)
Events created (organizer)
Past events attended

Implementation: Add to profile page:

[tribe_events view="list" author="current"]

Shows events by profile member.

Group Events

Associate events with BuddyPress groups:

Method 1: Event Category

Create category per group
Tag events with group category
Display category on group page

Method 2: Custom Field

Add group selector field
Filter events by group
Display on group page

Customization Options

Add calendar to sidebar:

Go to Appearance → Widgets
Add Events Calendar widget
Configure:

Setting	Options
Title	Upcoming Events
Number to show	5-10
Display	List or Calendar

Widget Displays:

Upcoming events
Mini calendar
Links to event pages

Show filtered event list:

Options:

By category
By venue
By organizer
Date range

Usage:

Homepage sidebar
Event category pages
Venue/organizer pages

Calendar Shortcodes

Display events anywhere:

Basic Calendar:

[tribe_events view="list"]

Filtered List:

[tribe_events view="list" category="meetup" posts_per_page="5"]

Month Calendar:

[tribe_events view="month"]

By Venue:

[tribe_events venue="community-center"]

Recommended Configurations

Conference Website

Best Settings:

View: Day View (schedule)
Enable recurring events (PRO)
Multiple tracks (categories)
Venue: Conference center
Tickets: Paid registration

Features to Enable:

Attendee list
Session filtering
Speaker (organizer) pages
Schedule export

Community Calendar

Best Settings:

View: Month View (overview)
Community Events (member submissions)
Multiple venues
Free RSVPs
Category filters

Features:

Member event submission
BuddyPress activity integration
Simple RSVP system
Email reminders

Venue/Location Site

Best Settings:

View: List View
Location filtering
Map display
Venue pages prominent
Search by location

Features:

Radius search
Multiple venues
Detailed venue info
Directions/parking

Training/Workshop Platform

Best Settings:

View: List View
Category: Workshop types
Recurring events
Capacity limits
Paid tickets

Features:

Registration management
Attendee export
Email confirmations
Certificate delivery

Common Questions

How do I change the events page URL?

Go to Events → Settings → Display
Change "Events URL slug" (default: events)
Click Save Settings
Go to Settings → Permalinks
Click Save Changes

Your events page URL updates to yoursite.com/your-slug/

Can I hide past events?

Yes, by default past events don't show. To display:

Go to Events → Settings → Display
Check "Show past events"
Set how many months to show

Or hide completely: Leave unchecked.

How do I display events on my homepage?

Method 1: Shortcode Add to homepage:

[tribe_events view="list" posts_per_page="6"]

Method 2: Widget Add Events List widget to homepage widget area.

Method 3: Block Use Events block in Gutenberg editor.

Why don't maps show on event pages?

Cause: Missing Google Maps API key

Solution:

Get API key: Google Maps Platform
Go to Events → Settings → General
Enter API key in "Google Maps API Key" field
Save settings

Maps appear on single event pages.

Can I show events in a specific category only?

Yes, using shortcode:

[tribe_events view="list" category="workshops"]

Or create dedicated page per category.

How do I style the calendar colors?

BuddyX Pro Method:

Go to Appearance → Customize → Colors & Skin
Change primary/secondary colors
Calendar colors update automatically

Custom CSS Method: Add to Customizer → Additional CSS:

.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"],
.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"] a {
  background-color: #your-color;
}

Can members create their own events?

Yes, with Community Events add-on (premium):

Install Community Events
Create submission page with shortcode
Set approval workflow
Members submit events from frontend

How do I export my events?

CSV Export:

Go to Events
Select events to export
Choose "Export" from bulk actions
CSV file downloads

iCal Export: Each event has iCal link for calendar apps.

Performance Tips

For large event calendars:

Limit Events Per Page
- Set to 12-20 events
- Use pagination
- Don't load all events at once
Optimize Images
- Compress featured images
- Use 1200×800px maximum
- Enable lazy loading
Use Caching
- Install caching plugin
- Cache calendar pages
- Don't cache event detail pages
Database Cleanup
- Delete old events regularly
- Or set auto-deletion for past events
- Archive old venues/organizers

Sidebar Layouts - Event page sidebar configuration
Sub-Header & Breadcrumbs - Event page headers
Blog Archive Layout - Similar layout settings
BuddyPress Activity Stream - Events in activity feed

Got a question? We're a friendly team - happy to help.

Documentation: docs.wbcomdesigns.com Events Calendar Docs: eventscalendarpro.com/support Support Forum: wbcomdesigns.com/support

Email Support: support@wbcomdesigns.com

Include: BuddyX Pro version, The Events Calendar version, and screenshots of your calendar.

GamiPress & Gamification

Add game mechanics to your community with GamiPress and BuddyX Pro. Reward members with badges, points, and achievements to boost engagement and create a fun, motivating experience.

What You Can Do

With BuddyX Pro's GamiPress integration, you can:

Award Badges - Display earned badges on member profiles and directories
Track Points - Show points balances in member cards and profiles
Display Achievements - Showcase member accomplishments and ranks
Create Leaderboards - Display top members by points or achievements
Widget Integration - Add gamification elements to sidebars with popup details
BuddyPress Integration - Award achievements for social activities (posts, comments, friendships)
Activity Stream - Show achievement notifications in the activity feed
Profile Tabs - Add dedicated tabs for badges, achievements, and points history

Prerequisites

Before setting up GamiPress, ensure you have:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
GamiPress	2.0+	Free version available at wordpress.org
BuddyPress	10.0+	Recommended for social features

Recommended Add-ons:

GamiPress - BuddyPress Integration (free) - Awards for social activities
GamiPress - LearnDash Integration (free) - Awards for course completion
GamiPress - WooCommerce Integration (free) - Awards for purchases

Installation & Setup

Step 1: Install GamiPress

Log in to your WordPress dashboard
Go to Plugins → Add New
Search for "GamiPress"
Click Install Now next to GamiPress by GamiPress
Click Activate after installation completes

Step 2: Install BuddyPress Integration (Optional)

For social gamification:

Go to Plugins → Add New
Search for "GamiPress BuddyPress integration"
Install and activate the integration plugin
This enables awards for BuddyPress activities

Step 3: Run Initial Setup

After activation:

GamiPress launches setup wizard (optional)
Choose point types to create (Points, Credits, etc.)
Select achievement types (Badges, Achievements, Ranks)
Click Finish Setup

You can always configure these later in GamiPress → Settings.

BuddyX Pro Integration Features

BuddyX Pro automatically detects GamiPress and adds special styling and functionality:

Member Profile Display

GamiPress data appears beautifully in member profiles:

Where It Shows:

Member directory cards - Points and badge count
Single member profiles - Full achievements display
Profile header - Current rank and points balance
Dedicated profile tabs - Badges, achievements, points history

What Displays:

Point types and balances
Earned badges with images
Achievement progress bars
Current ranks and next rank goals

BuddyX Pro enhances GamiPress widgets in sidebars:

Enhanced Features:

Popup Details - Click badges/achievements to see details in overlay
Smooth Animations - Badges appear with subtle transitions
Responsive Design - Perfect display on all device sizes
Close Button - Easy dismissal of detail popups

How It Works:

Add GamiPress widget to sidebar
Widget displays member achievements
Click any badge icon to see popup with:
- Badge image and name
- Description
- Earned date
- Related achievements

Activity Stream Integration

When GamiPress BuddyPress integration is active:

Achievement notifications appear in activity feed
Members can like/comment on achievement activities
Badge images display in activity items
"See All Achievements" link on member profiles

Creating Your First Gamification System

Step 1: Create Point Types

Points are the currency of your gamification system.

Go to GamiPress → Point Types
Click Add New
Configure your point type:

Setting	Example	Purpose
Name	Community Points	Display name for points
Plural Name	Community Points	Used in sentences
Slug	community-points	URL-friendly identifier
Image	Upload icon	Shows next to point balances

Common Point Types:

Activity Points - For social engagement
Learning Credits - For course completion
Shopping Rewards - For purchases
Contribution Points - For creating content

Step 2: Create Achievement Types

Achievements are milestones members can earn.

Go to GamiPress → Achievement Types
Click Add New
Configure achievement type:

Setting	Recommendation
Name	Badges (or Achievements, Trophies)
Singular Name	Badge
Plural Name	Badges
Show in menu	Yes
Supports	Title, editor, featured image

Popular Achievement Types:

Badges - Visual rewards for actions
Ranks - Progressive levels (Bronze, Silver, Gold)
Certifications - Major accomplishments
Trophies - Special achievements

Step 3: Create Specific Achievements

Create individual achievements members can earn:

Go to GamiPress → Badges (or your achievement type)
Click Add New
Fill in achievement details:

Required Fields:

Title - Achievement name (e.g., "Super Commenter")
Description - What the achievement represents
Featured Image - Badge icon (recommended: 256×256px PNG)

Earn Requirements: Click "Add New Requirement" and configure:

Requirement Type	Example
Activity	Publish a comment 10 times
Points	Earn 100 Community Points
Achievement	Earn the "Active Member" badge
Custom	Complete any custom criteria

Step 4: Set Up Point Awards

Configure how members earn points:

Edit your point type
Scroll to Points Awards section
Click Add New Points Award
Configure trigger:

Example Awards:

Activity	Points	Trigger
Publish activity update	10	User publishes activity update
Comment on activity	5	User comments on activity
Make new friend	25	User accepts friendship
Upload photo	15	User uploads photo to album
Create group	50	User creates a new group

BuddyPress Integration Setup

Enable gamification for social activities.

Activating BuddyPress Events

Install GamiPress - BuddyPress integration plugin
Go to GamiPress → Add-ons
Activate BuddyPress integration
Configure available triggers

Available BuddyPress Triggers

When BuddyPress integration is active, you can award points/achievements for:

Activity Stream:

Post activity update
Comment on activity
Favorite activity
Delete activity (can deduct points)

Friendships:

Send friendship request
Accept friendship request
Remove friendship

Groups:

Create group
Join group
Leave group
Invite user to group
Accept group invitation
Post in group
Comment in group

Private Messages:

Send private message
Reply to message

Profile:

Update profile
Update avatar
Update cover image

Extended Profile:

Update profile field
Update profile field group

"Super Socializer" Badge:

Requirement 1: Make 10 friends
Requirement 2: Post 50 activity updates
Requirement 3: Earn 500 Activity Points

"Group Leader" Badge:

Requirement 1: Create 3 groups
Requirement 2: Get 50 members across groups
Requirement 3: Post 100 times in groups

"Community Helper" Badge:

Requirement 1: Comment 100 times
Requirement 2: Reply to 50 private messages
Requirement 3: Earn "Active Member" badge

Adding Gamification to Your Site

Method 1: Using Widgets

Add GamiPress to sidebars and widget areas:

Go to Appearance → Widgets
Find your widget area (Sidebar, BuddyPress Sidebar, etc.)
Add these GamiPress widgets:

Available Widgets:

Widget	What It Shows	Best Location
User Points	Member's current point balances	BuddyPress member profile sidebar
User Achievements	Member's earned badges/achievements	BuddyPress member profile sidebar
User Ranks	Member's current ranks	BuddyPress member profile sidebar
Leaderboard	Top members by points/achievements	Site sidebar, Homepage widget area
Latest Achievements	Recent achievements earned site-wide	Site sidebar

Widget Configuration Tips:

Limit displayed items (5-10 for performance)
Enable featured images for visual appeal
Use excerpt length of 50-100 characters
Show point amounts for motivation

Method 2: Using Shortcodes

Display gamification anywhere with shortcodes:

Points Shortcodes:

[gamipress_points type="community-points"]

Shows current user's point balance.

Achievements Shortcodes:

[gamipress_achievements type="badge" columns="4" limit="8"]

Displays achievement grid.

Leaderboard Shortcode:

[gamipress_leaderboard type="community-points" limit="10"]

Shows top members by points.

Rank Shortcode:

[gamipress_user_rank type="rank"]

Displays user's current rank.

Method 3: Using Blocks

In WordPress Block Editor:

Click + Add Block
Search for "GamiPress"
Choose from available blocks:
- Points Block
- Achievements Block
- Leaderboard Block
- User Achievements Block
- User Points Block

Block Editor Tips:

Use columns block for side-by-side displays
Add headings above gamification blocks
Use spacer blocks for visual separation
Preview with different user roles

Profile Tab Configuration

Add dedicated gamification tabs to member profiles.

Adding Achievement Tabs

With GamiPress BuddyPress integration active:

Go to BuddyPress → Settings → Components
Verify Activity component is active
GamiPress automatically adds profile tabs:
- Achievements tab
- Points tab (if enabled in GamiPress settings)
- Ranks tab (if enabled in GamiPress settings)

Tab Customization:

Go to GamiPress → Settings
Click BuddyPress tab
Configure:

Setting	Options
Profile Tabs	Enable/disable achievements, points, ranks tabs
Tab Position	Order of tabs in profile
Show Locked	Display locked achievements (grayed out)
Excerpt Length	Description length in listings

Tab Display Behavior

Logged-in Members Viewing Own Profile:

See all earned achievements
View progress on locked achievements
See point balances and history
View next rank requirements

Viewing Other Profiles:

See only earned achievements (not locked)
View point balances (if public)
See current ranks
Cannot see point/achievement history

Leaderboard Setup

Create competitive leaderboards to motivate members.

Creating a Basic Leaderboard

Create new page: Pages → Add New
Title: "Community Leaderboard"
Add leaderboard block or shortcode:

[gamipress_leaderboard type="community-points" limit="50" hide_admins="yes"]

Shortcode Parameters:

Parameter	Options	Example
`type`	Point type slug	`community-points`
`limit`	Number to show	`50`
`hide_admins`	yes/no	`yes`
`columns`	Data to display	`rank,user,points`
`order`	asc/desc	`desc`

Leaderboard Best Practices

For Small Communities (<100 members):

Show top 25-50 members
Update daily
Display on homepage

For Large Communities (>100 members):

Show top 100 members
Add filters (by time period)
Create multiple leaderboards (weekly, monthly, all-time)

Display Options:

Show avatar images for visual appeal
Include rank numbers (#1, #2, #3)
Highlight current user's position
Add "View Profile" links

Recommended Configurations by Site Type

Point Types:

Activity Points - For posting, commenting
Social Points - For friendships, reactions

Achievement Types:

Badges - Social milestones
Ranks - Bronze, Silver, Gold, Platinum

Key Achievements:

"First Post" - Post first activity
"Super Friend" - Make 50 friends
"Discussion Starter" - Get 100 comments on activities
"Community Hero" - Earn all other badges

Where to Display:

Leaderboard on homepage
Points widget in BuddyPress sidebar
Achievement tab on all profiles

Learning/Course Platform

Point Types:

Learning Credits - Course completion
Quiz Points - Quiz performance

Achievement Types:

Badges - Course milestones
Certifications - Course completion
Ranks - Learner levels

Key Achievements:

"First Course" - Complete first course
"Quiz Master" - Pass 10 quizzes with 90%+
"Certified Learner" - Complete 5 courses
"Teaching Assistant" - Help 20 other learners

Integration:

GamiPress - LearnDash integration
Course sidebar widgets
Student dashboard displays

E-commerce Community

Point Types:

Reward Points - Purchases
Review Points - Product reviews

Achievement Types:

Badges - Purchase milestones
VIP Ranks - Spending levels

Key Achievements:

"First Purchase" - Make first order
"Review Master" - Write 25 reviews
"Loyal Customer" - 10 purchases in 6 months
"VIP Member" - Spend $1,000+

Integration:

GamiPress - WooCommerce integration
Shop sidebar widgets
My Account page displays

Membership Site

Point Types:

Contribution Points - Content creation
Engagement Points - Community participation

Achievement Types:

Badges - Contribution levels
Ranks - Membership tiers

Key Achievements:

"Content Creator" - Publish 10 articles
"Discussion Leader" - Start 50 topics
"Helpful Member" - 100 helpful ratings
"Influencer" - Get 500 followers

Where to Display:

Member directory cards
Dedicated leaderboard page
Profile prominently

Common Questions

How do I display badges on member directory cards?

BuddyX Pro automatically shows GamiPress data in member directories if the BuddyPress integration is active. Badges appear as small icons below member names.

To customize:

Go to Appearance → Customize → BuddyPress
Find member directory settings
Badges display automatically when earned

Can I manually award points or badges?

Yes, for special situations:

Award Points:

Edit user in Users → All Users
Find GamiPress meta box
Add/subtract points manually

Award Achievement:

Go to GamiPress → Achievements
Edit the achievement
Scroll to Awarded To section
Click Award Achievement
Select user

How do I create time-based leaderboards?

Use the leaderboard shortcode with date parameters:

Weekly Leaderboard:

[gamipress_leaderboard type="community-points" since="this-week"]

Monthly Leaderboard:

[gamipress_leaderboard type="community-points" since="this-month"]

Custom Period:

[gamipress_leaderboard type="community-points" since="1 month ago"]

Why don't badges show in the activity stream?

Ensure:

GamiPress - BuddyPress integration is installed and active
Go to GamiPress → Settings → BuddyPress
Enable "Activity Stream Integration"
Check "Post to activity when achievement earned"

Can I deduct points for negative actions?

Yes, create negative point awards:

Edit your point type
Add new points award
Enter negative number (e.g., -10)
Choose trigger (e.g., "Delete activity update")
Save

How do I hide admin users from leaderboards?

Use the hide_admins parameter in shortcode:

[gamipress_leaderboard type="points" hide_admins="yes"]

Or in widget settings, enable "Hide administrator users".

Can achievements be revoked?

Yes, for certain triggers:

Edit achievement
Add revoke requirement
Choose trigger (e.g., "User loses friend")
Achievement is automatically removed when triggered

Or manually:

Edit user
Find GamiPress meta box
Remove achievement from list

How do I create sequential achievements?

Use achievement requirements:

Example: Bronze → Silver → Gold

Bronze Badge:

Requirement: Earn 100 points

Silver Badge:

Requirement 1: Earn Bronze Badge
Requirement 2: Earn 500 points

Gold Badge:

Requirement 1: Earn Silver Badge
Requirement 2: Earn 1,000 points

Performance Tips

For large communities with many members:

Limit Widget Displays
- Show 5-10 items maximum in sidebar widgets
- Use pagination on leaderboard pages
Use Caching
- Install caching plugin (WP Rocket, W3 Total Cache)
- Cache leaderboard pages for 1 hour
- Don't cache logged-in user pages
Optimize Images
- Use 256×256px or smaller for badge images
- Compress images with Smush or ShortPixel
- Use PNG or WebP format
Database Cleanup
- Regularly clean old logs (GamiPress → Tools)
- Consider archiving old achievements
- Use dedicated hosting for large sites

BuddyPress Member Profiles - Profile customization
BuddyPress Member Directory - Directory layouts
Sidebar Widget Areas - Widget placement
BuddyPress Settings - Community configuration

Got a question? We're a friendly team - happy to help.

Documentation: docs.wbcomdesigns.com GamiPress Docs: gamipress.com/docs Support Forum: wbcomdesigns.com/support

Email Support: support@wbcomdesigns.com

Include: BuddyX Pro version, GamiPress version, and screenshots of your gamification setup.

GeoDirectory

Create location-based directories with GeoDirectory and BuddyX Pro. Build business listings, location directories, review sites, and maps-based platforms with beautiful, responsive layouts.

What You Can Do

With BuddyX Pro's GeoDirectory integration, you can:

Create Location Directories - List businesses, places, properties, events
Interactive Maps - Google Maps integration with marker clustering
Advanced Search - Location-based search with radius filtering
User Reviews & Ratings - Star ratings and detailed reviews
Claim Listings - Let users claim and manage their listings
Front-End Submission - Members submit listings from site frontend
Multiple Listing Types - Restaurants, hotels, services, events, etc.
BuddyPress Integration - Listings on member profiles

Prerequisites

Before setting up GeoDirectory:

Requirement	Version	Notes
WordPress	6.0+	Latest stable version recommended
BuddyX Pro Theme	Active	Must be activated
GeoDirectory	2.0+	Free version available
PHP	7.4+	Required by the plugin
MySQL	5.6+	For location data storage

Recommended Add-ons:

GeoDirectory Advanced Search - Enhanced filtering and search
GeoDirectory Custom Post Types - Multiple listing types
GeoDirectory BuddyPress Integration - Profile integration
GeoDirectory Reviews - Advanced review system
GeoDirectory Claim Listings - User claim management

Installation & Setup

Step 1: Install GeoDirectory

Log in to your WordPress dashboard
Go to Plugins → Add New
Search for "GeoDirectory"
Click Install Now next to GeoDirectory by AyeCode
Click Activate after installation completes

Step 2: Run Setup Wizard

GeoDirectory launches setup wizard after activation:

Page 1: Welcome

Click Let's Go! to start

Page 2: Install Sample Data

Choose: Install sample data (recommended for testing)
Or: Start fresh
Click Continue

Page 3: Create Pages Setup wizard creates essential pages:

Page	Purpose
Places	Main directory listing page
Add Listing	Frontend submission form
Search	Advanced search page
Location	Location archive pages

Click Continue to create pages.

Page 4: Google Maps API

Add Google Maps API key (optional now, required later)
Or skip and add later
Click Continue

Page 5: Ready!

Setup complete
Click View Sample Listings or Add a Listing

Step 3: Configure Basic Settings

Go to GeoDirectory → Settings

General Tab:

Setting	Recommendation	Why
Default Country	Your country	Sets default for new listings
Default City	Your city/region	Default location
Search Distance	50 miles/km	Default search radius
Date Format	Site default	Consistency with WordPress

Map Tab:

Setting	Value
Google Maps API Key	Your API key
Map View	Roadmap
Map Zoom	12
Enable Marker Clustering	Yes

Get Google Maps API Key:

Visit Google Cloud Console
Create project
Enable Maps JavaScript API
Create API key
Add restrictions (optional)
Copy key to GeoDirectory settings

BuddyX Pro Integration Features

BuddyX Pro automatically detects GeoDirectory and adds custom styling.

Automatic Styling

BuddyX Pro includes dedicated GeoDirectory stylesheet:

Location: assets/css/geodirectory.min.css

Styled Elements:

Listing cards and grids
Search forms and filters
Map displays and info windows
Detail pages and tabs
Review sections
Claim listing buttons
Category badges

Theme Integration:

Colors match BuddyX Pro color scheme
Typography inherits theme fonts
Spacing consistent with theme
Responsive on all devices
Dark mode compatible

Layout Options

GeoDirectory does not have its own sidebar controls in BuddyX Pro. Listing archive, single listing, search, and add-listing pages follow the theme's default sidebar setting, and the shipped geodirectory.min.css handles the styling.

Set the sidebar layout:

Go to Appearance → Customize → Sidebar
Set the default Sidebar option (Left, Right, Both, or None)
Click Publish

This applies site-wide. To give a specific GeoDirectory page (for example, the full-width Add Listing form) a different layout, target its body classes with custom CSS in Appearance → Customize → Additional CSS.

Responsive Design

BuddyX Pro optimizes GeoDirectory for all devices:

Mobile Features:

Collapsible filters
Touch-friendly maps
Swipeable image galleries
Mobile-optimized forms
Sticky search bar

Tablet Features:

2-column listing grids
Sidebar toggle buttons
Adjusted map heights

Desktop Features:

3-4 column grids
Full sidebar display
Larger map areas
Hover effects

Creating Listing Types

Listing types categorize your directory content.

Default Listing Type: Places

GeoDirectory creates default "Places" listing type:

Included Fields:

Business name
Description
Address and location
Contact info (phone, email, website)
Business hours
Category
Tags
Images

Creating Custom Listing Types

Requires GeoDirectory Custom Post Types add-on.

Example: Restaurant Directory

Go to GeoDirectory → Settings → Post Types
Click Add New Post Type
Configure:

Setting	Value
Name	Restaurants
Singular Name	Restaurant
Slug	restaurants
Menu Position	26
Has Archive	Yes

Click Save Post Type

Add Custom Fields:

Go to GeoDirectory → Design → Tabs
Select Restaurants post type
Add fields:
- Cuisine Type (multiselect)
- Price Range ($, $$, $$$, $$$$)
- Delivery Available (checkbox)
- Reservation Link (URL)
- Menu PDF (file upload)

Common Listing Types:

Type	Use Case	Key Fields
Restaurants	Food directory	Cuisine, price range, delivery
Hotels	Accommodation	Star rating, amenities, booking
Real Estate	Property listings	Price, bedrooms, square footage
Events	Event calendar	Date, time, tickets, venue
Services	Service providers	Service type, availability, pricing
Doctors	Medical directory	Specialty, insurance, hours

Creating Your First Listing

Step 1: Add New Listing

Two methods:

Admin Method:

Go to Places → Add New (or your listing type)
WordPress admin editor opens

Frontend Method:

Visit your "Add Listing" page
Frontend submission form displays
Members submit without admin access

Step 2: Fill Basic Information

Required Fields:

Field	Example
Listing Title	The Italian Kitchen
Description	Full description with details
Category	Select from categories
Address	123 Main Street
City	San Francisco
State/Region	California
Zip/Postal Code	94102
Country	United States

Optional Fields:

Field	Purpose
Phone	Contact number
Email	Contact email
Website	Business URL
Tags	Additional keywords
Facebook/Twitter	Social profiles

Step 3: Add Location

Map Interface:

Enter address in location field
Map displays automatically
Drag marker to adjust exact location
Or enter coordinates manually

Location Tips:

Precise location improves search results
Marker shows on map view
Address displays on listing
Used for radius searches

Step 4: Set Business Hours

In Business Hours section:

Configure Schedule:

Day	Open	Close	Status
Monday	11:00 AM	10:00 PM	Open
Tuesday	11:00 AM	10:00 PM	Open
Wednesday	11:00 AM	10:00 PM	Open
Thursday	11:00 AM	10:00 PM	Open
Friday	11:00 AM	11:00 PM	Open
Saturday	10:00 AM	11:00 PM	Open
Sunday	10:00 AM	9:00 PM	Open

Or: Check "Open 24/7" for always-open businesses.

Step 5: Upload Images

Featured Image:

Set featured image in sidebar
Recommended: 1200×800px
Appears in search results and listing cards

Image Gallery:

Scroll to Gallery Images field
Click Add Images
Upload multiple photos
Drag to reorder
Displays as slider on listing page

Image Best Practices:

Use high-quality images (1920×1080px)
Show interior and exterior
Include products/services
Compress for web (Smush, ShortPixel)
Add alt text for SEO

Contact Information:

Phone: +1 (555) 123-4567
Email: info@restaurant.com
Website: https://restaurant.com

Social Media:

Facebook page URL
Twitter profile URL
Instagram username
LinkedIn company page

Step 7: Configure Video (Optional)

Add video to showcase business:

Supported:

YouTube embed URL
Vimeo embed URL

Example: https://www.youtube.com/watch?v=VIDEO_ID

Video displays on listing page with description.

Step 8: Set Pricing & Categories

Price Range:

$ (Budget)
$$ (Moderate)
$$$ (Expensive)
$$$$ (Luxury)

Categories: Select one or more categories:

Italian Restaurant
Pizza Place
Fine Dining

Tags: Add relevant tags:

pasta, wine bar, romantic, family-friendly

Step 9: Publish Listing

Review Information:

Check all fields completed
Preview listing appearance
Verify location on map

Publish:

Click Publish button (admin)
Or Submit Listing (frontend)
Listing appears on directory
Or pending review (if moderation enabled)

Search & Filtering

Basic Search

Default search form includes:

Search Fields:

Field	Function
What	Keyword search (title, description)
Where	Location search (city, address, zip)
Category	Filter by category
Search Button	Submit search

Location:

Top of listing archive
Search page
Widget (sidebar)

Advanced Search

With Advanced Search add-on:

Additional Filters:

Filter	Options
Distance	Radius from location (5, 10, 25, 50 miles)
Price Range	$, $$, $$$, $$$$
Rating	1-5 stars
Open Now	Currently open businesses
Custom Fields	Any custom field you created

Filter Layout:

Vertical sidebar
Horizontal bar
Collapsible panels
Modal/popup

Map Search

Interactive map-based search:

Features:

Drag map to search area
Zoom to adjust search radius
Click markers to see listing preview
"Search This Area" button
Marker clustering for performance

Map Controls:

Zoom in/out buttons
Street view (if available)
Satellite/terrain view toggle
Fullscreen mode

Reviews & Ratings

Enable reviews on listings.

Setting Up Reviews

With GeoDirectory Reviews Add-on:

Install GeoDirectory Reviews
Go to GeoDirectory → Settings → Reviews
Configure:

Setting	Recommendation
Enable Reviews	Yes
Require Login	Yes (reduces spam)
Allow Images	Yes
Moderate Reviews	Auto-approve or manual
Rating Criteria	Service, quality, value, cleanliness

Basic Reviews (Free):

Simple star rating
Review text
User name and date

Advanced Reviews (Add-on):

Multiple rating criteria
Review images
Verified reviews
Helpful/not helpful voting
Owner responses

Rating Criteria

Create custom rating criteria:

Example: Restaurant Reviews

Criteria	Weight
Food Quality	35%
Service	25%
Atmosphere	20%
Value	20%

Overall rating calculated automatically.

Managing Reviews

Review Moderation:

Go to Places → Reviews (or listing type)
View all reviews
Actions available:
- Approve pending reviews
- Edit review text
- Mark as spam
- Delete review
- Reply to review (as admin)

Owner Responses:

Listing owners can respond
Requires claim listing feature
Shows "Owner's Response" badge

Claim Listings

Let users claim existing listings.

Enable Claim Feature

Requires GeoDirectory Claim Listings add-on.

Setup:

Install GeoDirectory Claim Listings
Go to GeoDirectory → Settings → Claim Listings
Configure:

Setting	Options
Enable Claims	Yes
Require Verification	Email, phone, or admin approval
Claim Duration	30 days, 1 year, lifetime
Claim Fee	Free or paid (with payments add-on)

Claim Process

User Perspective:

Find listing on site
Click "Claim This Listing" button
Fill claim form:
- Relationship to business (owner, manager)
- Contact information
- Verification documents (optional)
Submit claim
Admin reviews claim
If approved: User gets edit access

Admin Approval:

Go to GeoDirectory → Claimed Listings
Review claim details
Check verification
Approve or deny
User receives email notification

Claimed Listing Benefits:

Edit listing details
Update business hours
Upload new photos
Respond to reviews
View statistics
Promote listing (if available)

Front-End Submission

Members create listings from site frontend.

Enabling Front-End Submission

Default enabled, configure options:

Settings:

Go to GeoDirectory → Settings → Listing Submission
Configure:

Setting	Recommendation
Guest Submissions	No (require login)
Submission Status	Pending review
Duplicate Check	Yes (prevents duplicates)
Required Fields	Title, description, location
User Dashboard	Enable for managing listings

Submission Form

Create "Add Listing" page (wizard creates automatically):

Shortcode: [gd_add_listing]

Form Displays:

All listing fields
File upload fields
Map for location selection
Terms & conditions checkbox
Submit button

User Experience:

Visit Add Listing page
Choose listing type (if multiple)
Fill form fields
Upload images
Set location on map
Agree to terms
Click Submit
Confirmation message appears
Listing pending review (or published)

User Dashboard

Members manage their listings:

Dashboard Shortcode: [gd_user_dashboard]

Dashboard Features:

Tab	Function
My Listings	View, edit, delete own listings
Add Listing	Create new listing
Favorites	Saved listings
Reviews	Reviews given
Invoices	Payment history (if paid listings)

Listing Actions:

Edit listing
Renew listing (if expired)
Upgrade listing (if packages available)
Delete listing
View statistics

Location Pages

Automatic pages for each location.

Location Hierarchy

GeoDirectory creates SEO-friendly location pages:

URL Structure:

yoursite.com/places/
├── united-states/
│   ├── california/
│   │   ├── san-francisco/
│   │   │   └── downtown/
│   │   └── los-angeles/
│   └── new-york/
│       └── manhattan/
└── united-kingdom/
    └── london/

Page Content:

Listings in that location
Map of location
Search form scoped to location
Category links for location
Breadcrumb navigation

Customizing Location Pages

Location Settings:

Go to GeoDirectory → Settings → Locations
Configure:

Setting	Options
Location Levels	Country, Region/State, City, Neighborhood
Default Location	Set default for site
Location Selector	Dropdown or autocomplete
Show Location Count	Number of listings per location

Location Slugs:

Customize URL slugs
Add custom location names
Set location timezone

Categories & Taxonomies

Organize listings with categories.

Creating Categories

Go to Places → Categories (or listing type)
Click Add New Category
Configure:

Field	Example
Name	Italian Restaurants
Slug	italian-restaurants
Parent	Restaurants (if subcategory)
Description	Description for SEO
Icon	Upload category icon
Default Image	Fallback for listings without images

Category Hierarchy:

Restaurants
├── Italian
├── Chinese
├── Mexican
└── American
    ├── Burgers
    ├── BBQ
    └── Steakhouses

Category Display:

Category archive pages
Category filter in search
Category badges on listings
Category icons on map markers

Category Icons

Add visual icons to categories:

Icon Options:

Upload custom image
Use Font Awesome icon
Select from icon library

Icon Displays:

Map markers
Category list pages
Search filter
Listing cards

Widgets & Shortcodes

Display GeoDirectory content throughout your site.

Essential Widgets

Widget Areas: Add to sidebars, footers, homepage areas.

Available Widgets:

Widget	Displays
GD > Search	Search form
GD > Categories	Category list with counts
GD > Listings	Recent, featured, or popular listings
GD > Post Images	Listing image slider
GD > Advanced Search	Full search filters
GD > Author Actions	Edit/claim buttons (on listing pages)

Widget Configuration:

Example: Recent Listings Widget

Add to sidebar
Configure:
- Title: "New Listings"
- Listing Type: Places
- Number: 5
- Layout: List with thumbnails
- Character limit: 100

Useful Shortcodes

Display GeoDirectory content with shortcodes:

Listing Archive:

[gd_listings post_type="gd_place" layout="list" show_pagination="1"]

Search Form:

[gd_search layout="default"]

Categories:

[gd_categories post_type="gd_place" title_tag="h3" columns="4"]

Map:

[gd_map map_type="auto" width="100%" height="450px"]

Single Listing Info:

[gd_post_meta key="phone" show="value"]
[gd_post_meta key="address" show="value"]
[gd_post_meta key="rating" show="value"]

Popular Listings:

[gd_listings post_type="gd_place" order_by="high_review" posts_per_page="6"]

BuddyPress Integration

Connect GeoDirectory with BuddyPress community.

BuddyPress Add-on Features

Requires GeoDirectory BuddyPress Integration add-on.

Features:

Feature	Description
Profile Tab	Member's listings on profile
Activity Posts	Listing activities in stream
Listing Author	Link to member profile
Member Reviews	Reviews by member
Favorites	Saved listings on profile

Setup BuddyPress Integration

Install GeoDirectory BuddyPress Integration
Go to GeoDirectory → Settings → BuddyPress
Configure:

Profile Tab Settings:

Setting	Recommendation
Enable Profile Tab	Yes
Tab Name	"My Listings" or "Places"
Tab Slug	listings
Show on Profile	All members or authors only

Activity Stream:

Setting	Options
Post to Activity	When listing published
Post Type	New listing, updated listing, reviews
Show Map	Yes (thumbnail map in activity)

Member Listings Display

Member profile tab shows:

Tab Content:

All listings by member
Listing status (published, pending, draft)
Edit/delete buttons (own profile)
Statistics (views, favorites, reviews)

Visitor View:

Only published listings visible
Link to full listing
Rating and category
Thumbnail image

Recommended Configurations

Business Directory

Listing Types:

Businesses (general)
Restaurants
Services
Shops

Key Features:

User claims
Reviews and ratings
Business hours
Contact forms

Search:

Location radius
Category filter
Open now filter
Advanced search

Real Estate Platform

Listing Types:

For Sale
For Rent
Commercial
Land

Key Fields:

Price
Bedrooms/bathrooms
Square footage
Property type
Year built

Search:

Price range
Property features
Map search
Save search criteria

Event Directory

Listing Types:

Events
Venues
Organizers

Key Fields:

Event date/time
Ticket price
RSVP/registration
Event category
Organizer info

Features:

Calendar view
Upcoming events
Event reminders
Recurring events

Restaurant Guide

Listing Types:

Restaurants
Bars
Cafes
Food trucks

Key Fields:

Cuisine type
Price range
Delivery/takeout
Reservations
Menu link

Features:

User reviews
Photo galleries
Business hours
Call/directions buttons

Common Questions

How do I add a Google Maps API key?

Go to Google Cloud Console
Create new project or select existing
Enable "Maps JavaScript API"
Create credentials → API key
Copy API key
In WordPress: GeoDirectory → Settings → Map
Paste key in "Google Maps API Key" field
Save settings

Can I have multiple listing types?

Yes, with GeoDirectory Custom Post Types add-on:

Install add-on
GeoDirectory → Settings → Post Types
Click "Add New Post Type"
Create as many types as needed
Each gets own fields, categories, settings

How do I monetize my directory?

Methods:

Paid Listings - Charge for submissions (Pricing Manager add-on)
Featured Listings - Charge for premium placement
Claim Fees - Charge for listing claims
Advertising - Display ads on high-traffic pages
Affiliate Links - Commission from listings

Requires GeoDirectory Pricing Manager add-on.

Can listings expire?

Yes, set expiration in listing packages:

GeoDirectory → Packages (Pricing Manager add-on)
Create package
Set expiration: 30 days, 1 year, never
Expired listings:
- Removed from search
- Or marked expired
- User can renew

How do I import listings in bulk?

Use CSV import:

GeoDirectory → Tools → Import
Download sample CSV
Fill with your data:
- Title, description
- Location (address, city, lat/long)
- Categories, tags
- Custom fields
Upload CSV file
Map CSV columns to fields
Run import
Listings created automatically

Tips:

Test with small batch first
Validate addresses
Check for duplicates
Use proper encoding (UTF-8)

Can users add photos to reviews?

Yes, with GeoDirectory Reviews add-on:

Install add-on
GeoDirectory → Settings → Reviews
Enable "Allow Review Images"
Set maximum images per review
Users can upload when reviewing

How do I change the listing URL structure?

GeoDirectory → Settings → Post Types
Find your post type
Change "Slug" field
Save settings
Settings → Permalinks
Click Save Changes

Example: Change from /places/ to /businesses/

Why aren't maps showing?

Common causes:

No API key - Add Google Maps API key
API key restrictions - Check key settings in Google Console
Billing disabled - Enable billing in Google account
API not enabled - Enable Maps JavaScript API
JavaScript errors - Check browser console

Solution: Test API key, check console errors, verify billing.

Performance Tips

For large directories:

Enable Marker Clustering
- Groups nearby markers on map
- Improves map load time
- Enable in GeoDirectory settings
Limit Results
- Show 20-30 listings per page
- Use pagination
- Load more on scroll (infinite scroll add-on)
Optimize Images
- Compress listing images
- Use lazy loading
- Recommended: 1200px width max
- Image optimization plugin (Smush, ShortPixel)
Database Optimization
- Clean expired listings
- Delete spam reviews
- Optimize location tables
- Use dedicated database server for large sites
Caching
- Install caching plugin
- Cache listing pages
- Don't cache search results
- Don't cache user dashboard

Sidebar Widget Areas - Widget placement
Sidebar Layouts - GeoDirectory page layouts
BuddyPress Member Profiles - Profile integration
Site Layout Options - Container width

Got a question? We're a friendly team - happy to help.

Documentation: docs.wbcomdesigns.com GeoDirectory Docs: wpgeodirectory.com/docs Support Forum: wbcomdesigns.com/support

Email Support: support@wbcomdesigns.com

Include: BuddyX Pro version, GeoDirectory version, and description of your directory type.

Wbcom Plugin Family

BuddyNext Integration

BuddyNext is Wbcom's modern, faster community engine - a from-scratch alternative to BuddyPress and BuddyBoss for member profiles, activity feeds, Spaces, and private messaging. It is built to pair with BuddyX Pro: its surfaces consume the same design tokens the theme exposes, so your community reads as one designed surface instead of a plugin bolted onto a theme. This page shows you what BuddyNext does and how it fits with BuddyX Pro.

Where to get it: Learn more - Get it

Looking for the theme-side integration code? BuddyX Pro ships a small, targeted BuddyNext compatibility layer - it routes auth links (login, register, lost password) to the BuddyNext auth hub and feeds your User Menu into the BuddyNext header dropdown. That is documented in detail in BuddyNext Integration (theme features). This page is the product showcase.

Community styled by BuddyX Pro A BuddyNext-powered community.

What BuddyNext Gives You

BuddyNext runs the social layer of your site:

Member profiles - avatars, cover images, profile fields, and per-member activity.
Activity feeds - a real-time stream of posts, replies, reactions, and mentions.
Spaces - the modern take on groups: focused areas where members gather around a topic, project, or team.
Messaging - private one-to-one and group conversations.

It is built for speed on large member bases, so directories, feeds, and Spaces stay responsive as your community grows past thousands of members. Start on the free edition and upgrade to Pro when you need the deeper moderation, monetization, and admin tooling.

How BuddyNext Pairs with BuddyX Pro

You do not configure a separate skin. BuddyNext is built to read the theme's design tokens, so when it is active it inherits the same palette, typography, and dark-mode set BuddyX Pro uses everywhere else. There is no BuddyNext-specific styling layer in the theme; the fit comes from shared tokens plus the standard BuddyX Pro page frame.

Theme colors

BuddyNext surfaces - profile headers, feed cards, Space tiles, message threads - read your Customizer palette through the theme's --bx-color-* tokens. Set your primary color once and buttons, links, badges, and active states across the community inherit it.

Go to Appearance > Customize.
Open Skin Colors and set your primary, background, and text colors.
Save. Because BuddyNext consumes the same tokens, its feeds, profiles, and Spaces pick up the new values.

Dark mode

Because BuddyNext colors come from tokens rather than hard-coded hex values, it follows the theme's Light and Dark modes with no extra setup. When a member toggles dark mode from the header, token-driven surfaces repaint to the dark palette.

Note: Color mode is Light and Dark only. Token-driven colors are what let BuddyNext track the theme in both modes.

Page frame: header and sidebars

BuddyNext pages render inside the standard BuddyX Pro page frame, so they carry whichever header layout, top bar, and mega menu you have set for the rest of the site, and honor your Customizer sidebar layout the same way any other page does. This is the theme frame every page uses - not BuddyNext-specific theming.

For the auth-link routing and User Menu dropdown wiring - the parts BuddyX Pro actually adds for BuddyNext - see BuddyNext Integration (theme features).

Free to Start, Pro to Grow

BuddyNext is free to start with a Pro upgrade, exactly like the rest of the in-house lineup. The free edition covers profiles, feeds, Spaces, and messaging. The Pro edition adds the advanced moderation, analytics, monetization, and admin controls that larger communities need.

Product page: https://buddynext.com/
The full in-house family: Plugin Family

Both editions inherit your BuddyX Pro design tokens out of the box - upgrading to BuddyNext Pro changes what the plugin can do, not how it looks in your theme.

BuddyPress Integration - The classic community stack BuddyNext replaces
Bundled Plugins - Every first-party plugin included with your license
Plugin Family - The complete in-house ecosystem
Skin Colors - Set the palette BuddyNext inherits
Header Settings - Header layouts and community icons

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Community (BuddyPress and BuddyNext)

BuddyX Pro is a community theme first, so it gives you full control over your social layer. For classic BuddyPress, the theme ships dedicated directory, header, navigation, and activity styling - the controls described below. For the modern in-house BuddyNext, the theme adds a targeted compatibility layer (auth-link routing and the header User Menu dropdown) while BuddyNext's own surfaces inherit your BuddyX Pro design tokens for colors and dark mode. This page explains how the theme dresses your community and helps you pick the right engine underneath it.

What BuddyX Pro adds to your community

Where the free BuddyX theme ships only limited community styling, BuddyX Pro 5.1.0 unlocks the full set of community controls:

Multiple member and group directory layouts - switch each directory between grid and list, set items per page, and choose the card style.
Header and navigation layouts - six member header styles and six single-group header styles, plus configurable navigation tabs.
Activity share and reactions - theme-level social sharing and reactions on activity items, handled inside the BuddyX Pro activity template with no separate plugin.
Avatar styles - circle or square avatars applied consistently across directories, cards, and the site header.

All of it inherits your theme settings automatically. Set your primary color, pick a header layout, and toggle dark mode once - the community surfaces follow.

Activity feed styled by BuddyX Pro The activity feed in BuddyX Pro.

Member directory

The member directory renders as themed cards with avatar, name, and meta, plus online status, search, filters, and pagination. Choose your layout at Appearance > Customize > Community Settings > Members Directory.

Youzify note: The Community Settings panel (including every Members Directory control) is removed when the Youzify plugin is active - Youzify manages its own member directory. Run BuddyPress without Youzify to use these options.

Member directory with a Pro layout.

Groups and Spaces

Group directories share the same grid-or-list treatment, themed group cards, six single-group header styles, and join/leave buttons that match your button styling.

Spaces / groups Group / Spaces directory.

Tip: Dedicated sidebars exist for the members directory, groups directory, and activity stream. Assign widgets to each at Appearance > Widgets so your community pages carry the layout you want.

BuddyPress or BuddyNext - pick your engine

BuddyX Pro styles two community engines. The theme layer is the same; the difference is which plugin powers profiles, feeds, and groups underneath.

	BuddyPress (classic)	BuddyNext (modern)
What it is	The long-established WordPress community plugin	A modern, faster in-house alternative to BuddyPress and BuddyBoss
Terminology	Members, Groups, Activity	Profiles, Spaces, Feeds, Messaging
Best for	Existing communities, maximum add-on compatibility	New builds that want a lighter, faster foundation
BuddyX Pro theming	Dedicated directory, header, and nav layouts (theme-side CSS)	Inherits theme design tokens + a targeted compat layer (auth links, User Menu dropdown)

Choose BuddyPress if you already run it, rely on its ecosystem of add-ons, or want the most battle-tested option. Set the template pack to BP Nouveau (BP Legacy is not supported) and BuddyX Pro handles the rest.

Choose BuddyNext if you are starting fresh and want a modern, faster social network with profiles, feeds, Spaces, and built-in messaging. BuddyNext is free to start, with a Pro upgrade that unlocks the deeper features.

Both are made in-house by Wbcom Designs, so both are tested against every BuddyX Pro release. See the full in-house catalog in Plugin Family - BuddyNext's product page is https://buddynext.com/.

Detailed BuddyPress settings

This page covers the theme-integration overview. For the step-by-step Customizer settings on classic BuddyPress, use the dedicated section:

BuddyPress Overview - quick setup and what the theme adds
BuddyPress Settings - every Customizer option
Member Directory - directory layout and filters
Member Profiles - header styles and cover image
Groups - group directory and single-group headers
Activity Stream - activity feed, share, and reactions

BuddyPress Overview - classic BuddyPress integration
Plugin Family - the full in-house Wbcom lineup
Bundled Plugins - what ships with your BuddyX Pro license
BuddyBoss - if you run BuddyBoss Platform instead

Got a question? We're a friendly team, happy to help. support@wbcomdesigns.com

Online Courses and LMS

BuddyX Pro makes a great foundation for a course platform. Your theme colors, sidebars, dark mode, and header layouts carry straight through to the course catalog, lesson pages, and quizzes - through dedicated theme-side styling for LearnDash, and through shared design tokens for the in-house Learnomy plugin. Start with Learnomy for the tightest fit, or point BuddyX Pro at LearnDash or another LMS you already run.

Where to get it: Learn more - Get it

Course catalog styled by BuddyX Pro Learnomy course catalog in BuddyX Pro.

Learnomy - the in-house LMS

Learnomy is Wbcom's own learning platform: courses, lessons, quizzes, certificates, and paid enrollments. Because it is built by the same team as the theme, it shares the BuddyX Pro design system out of the box - no bridge plugin, no CSS overrides.

What you get:

Courses and lessons - structured curriculum with drip scheduling and progress tracking.
Quizzes - graded assessments with pass marks and retakes.
Certificates - awarded automatically when a learner completes a course.
Paid enrollments - sell courses through WooCommerce checkout.

Learnomy is one of the in-house plugins in the BuddyX family. See the full lineup on the plugin family page. It is free to start, with a Pro upgrade that adds the deeper selling, grading, and reporting features.

How Learnomy pairs with BuddyX Pro

Learnomy is built to read the theme's design tokens, so once it is active it inherits your theme without a separate skin:

Theme colors - course cards, progress bars, buttons, and quiz controls read your --bx-color-* palette from Appearance > Customize > Colors. Change the primary color once and the catalog follows.
Sidebars - course archive and single-course pages sit inside the standard BuddyX Pro page frame, so they honor your sidebar choice at Appearance > Customize > Sidebar. Set Left, Right, or None per the layout you want for focused learning.
Dark mode - because Learnomy's colors come from tokens, the catalog, lesson body, quiz screens, and certificate preview follow light and dark mode. Learners toggle light/dark from the header and the choice persists across pages.
Header layouts - your chosen Pro header layout, top bar, and mega menu sit above every course page as they do on any page, so navigation stays consistent with the rest of the site.

Set it up

Install and activate Learnomy from Plugins > Add New.
Go to Appearance > Customize > Colors and confirm your primary color - the catalog picks it up.
Go to Appearance > Customize > Sidebar and set the sidebar for course pages.
Visit your course archive - the grid renders in your BuddyX Pro colors immediately.

Tip: For a distraction-free lesson view, set the course sidebar to None and let the lesson content run full width.

LearnDash

Already invested in LearnDash? BuddyX Pro ships dedicated LearnDash styling and Customizer options - course layouts, focus mode, and a themed learner dashboard. See the LearnDash setup guide for the full walkthrough.

Other LMS plugins

BuddyX Pro also styles LearnPress, LifterLMS, Sensei LMS, and Tutor LMS. Pick your platform and follow its page under other LMS integrations for the specifics.

LMS	Best for	BuddyX Pro support
Learnomy	New course sites wanting the tightest theme fit	In-house, inherits theme design tokens
LearnDash	Established LearnDash catalogs	Dedicated Customizer panel + focus mode
LearnPress / LifterLMS / Sensei / Tutor	Existing sites on those platforms	Themed archives, lessons, and dashboards

Learnomy and the plugin family - Every in-house plugin, free and Pro
LearnDash Setup - Course layouts, focus mode, dashboard
LifterLMS - One of the supported third-party LMS plugins
Sidebar Layouts - Choose sidebars per course page
Color Scheme - Set the palette the catalog inherits

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Member Directory and Listings

BuddyX Pro makes a great foundation for a directory site. Pair it with a listings plugin and, because that plugin reads the theme's design tokens, your theme colors and dark mode carry straight through to the listing archive, single-listing pages, review widgets, and claim flow, with every page inside the standard BuddyX Pro frame. Start with the in-house Listora plugin for the tightest fit - its surfaces inherit your theme the moment it is active.

Where to get it: Learn more - Get it

Directory styled by BuddyX Pro Listora directory in BuddyX Pro.

Listora - the in-house directory

Listora is Wbcom's own directory builder: member listings, claim-your-listing flow, reviews, and monetization. Because it is built by the same team as the theme, it shares the BuddyX Pro design system out of the box - no bridge plugin, no CSS overrides.

What you get:

Member listings - members submit and manage their own listings from the front end.
Claims - a claim-your-listing flow so the right owner takes over an existing entry.
Reviews - star ratings and written reviews on each listing.
Monetization - paid submissions, featured placements, and listing plans.

Listora is one of the in-house plugins in the BuddyX family. See the full lineup on the plugin family page. It is free to start, with a Pro upgrade that adds the deeper monetization, claim, and reporting features.

How Listora Pairs with BuddyX Pro

You do not configure a separate skin for Listora. It is built to read the same --bx-color-* tokens that drive the rest of your site, so every listing surface inherits the color choices you have already made - there is no BuddyX-specific directory stylesheet in the theme.

Theme colors

Listing cards, category filters, star ratings, submit buttons, and the claim button all read your primary and accent colors from Appearance > Customize > Skin Color. Change your primary color once and the directory grid, badges, and review widgets follow - there is no per-plugin color picker to keep in sync.

Sidebars

The listing archive and single-listing pages honor your sidebar settings. Set the layout at:

Go to Appearance > Customize.
Navigate to Sidebar and pick the layout for your directory pages (Left, Right, or None).

A None layout gives the listing grid the full content width for larger cards and map views; a Left or Right sidebar keeps category filters or community navigation beside the results.

Dark mode

Listora surfaces respond to the BuddyX Pro dark-mode toggle. Listing cards, the review widget, the submission form, and the map chrome all switch to the dark token set when a visitor flips the header toggle - and BuddyX Pro paints dark on first load, so the directory never flashes light before switching.

BuddyX Pro's color mode is Light and Dark only. Whichever mode a visitor picks, your listings and reviews stay readable and on-brand.

Header layouts

Your chosen Pro header layout, top bar, and mega menu sit above every directory page, so the search bar and category navigation stay consistent with the rest of the site. Members reach their own listings from the same header they use for the rest of the community.

Set It Up

Install and activate Listora (see the product page below).
Go to Appearance > Customize > Skin Color and confirm your primary color - the directory grid picks it up.
Go to Appearance > Customize > Sidebar and set the sidebar for your directory pages.
Visit your listing archive - the grid renders in your BuddyX Pro colors immediately. Flip the header toggle to check dark mode.

Listora inherits your BuddyX Pro design tokens as soon as it is active - no theme-side setup beyond your normal color and sidebar choices.

Tip: For a map-heavy directory, set the archive sidebar to None so the listing grid and map view run full width.

Get Listora

Listora is an in-house Wbcom plugin, built by the same team as BuddyX Pro and tested against every theme release.

Product page: https://listora.org/
Free to start. The free edition covers member listings, categories, and reviews.
Pro upgrade adds the claim-your-listing flow, monetization, featured placements, and listing reports for larger directories.

Listora is one of several first-party plugins you can add to a BuddyX Pro community. See the full lineup - forums, courses, gamification, events, media, and more - on the plugin family page.

BuddyX Plugin Family - Every in-house Wbcom plugin, free and Pro
Color Scheme - Set the theme colors your listings inherit
Dark Mode - How the light and dark toggle works across community surfaces
Sidebar Settings - Choose the sidebar layout for your directory pages

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Discussions and Forums

BuddyX Pro makes discussion and Q&A feel like a native part of your community. Add Jetonomy for modern forums, threaded Q&A, an ideas roadmap, and polls: because Jetonomy reads the theme's design tokens, every one of those surfaces inherits your presets, colors, and dark mode, and its pages sit inside the standard BuddyX Pro frame with your chosen sidebar - no extra CSS required.

Where to get it: Learn more - Get it

Jetonomy discussions styled by BuddyX Pro Jetonomy discussions in BuddyX Pro.

What Jetonomy Adds

Jetonomy is Wbcom's from-scratch discussion plugin, built for 2026 community standards instead of legacy forum software:

Forums - Organize discussions into spaces and categories.
Threaded Q&A - Questions with accepted answers and reply nesting.
Ideas roadmap - Idea boards with upvotes so members shape what you build next.
Polls - Quick community votes inside a discussion or on their own.
Trust levels - A six-level trust system that auto-moderates as members earn standing.

Jetonomy is free to start, with a Pro upgrade that adds analytics, AI-assisted moderation, anti-spam, and admin tooling. See the Jetonomy product page for the full feature list.

How Jetonomy Pairs with BuddyX Pro

Jetonomy is built to consume the same design tokens BuddyX Pro exposes, so once it is active its discussion surfaces inherit your theme choices. There is no separate skin to install and no BuddyX-specific Jetonomy stylesheet in the theme - the fit comes from shared tokens and the standard page frame.

Surface	How it inherits from BuddyX Pro
Colors	Discussions inherit your primary and accent colors from `--bx-color-*` tokens - no hardcoded plugin palette
Dark mode	Forums, Q&A threads, idea boards, and polls all repaint correctly when a visitor toggles dark mode
Sidebars	Discussion archives and single threads respect your Customizer sidebar layout (Left, Right, None)
Header layouts	Discussion pages sit under whichever Pro header layout, top bar, and mega menu you have set
Typography	Thread titles and reply text use the theme's typography presets and self-hosted fonts
Cards and rows	Space listings and topic rows adopt the theme's card style, hover effects, and border radius

Because Jetonomy shares the same design tokens and Customizer Framework as the theme, it is tested together against every BuddyX Pro release.

Set It Up

1. Install Jetonomy

Go to Appearance > Customize (or Dashboard > BuddyX Pro Options).
Open the BuddyX Pro Plugins notice on the dashboard.
Click Install + Activate next to Jetonomy. It installs from the license server and activates immediately - no manual zip download.

Go to Appearance > Customize > Sidebar.
Set the sidebar for discussion archives and single threads to Left, Right, or None.
Publish.

3. Confirm Dark Mode

Toggle dark mode from the header.
Visit a forum, a Q&A thread, an idea board, and a poll.
Every surface should repaint cleanly in dark and light.

Tip: Color mode is Light and Dark only. Whichever mode a visitor chooses, discussion pages follow the same tokens as the rest of your site, so branding stays consistent across the whole community.

bbPress Users

Prefer the classic forum stack? BuddyX Pro also styles bbPress with modern forum layouts, sidebars, and dark mode. The two are opt-in and can coexist - run Jetonomy, bbPress, or both. See bbPress Forums Setup for that path.

Plugin Family - The full in-house Wbcom lineup, including Jetonomy
bbPress Forums Setup - Classic forum styling
Sidebar Layouts - Configure discussion sidebars
Dark Mode - How the theme repaints every surface

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Events and Ticketing

BuddyX Pro makes events feel like a native part of your community. Add Eventonomy for RSVPs, paid ticketing, venues, and QR check-in: because Eventonomy reads the theme's design tokens, every one of those surfaces inherits your presets, colors, and dark mode, and its pages sit inside the standard BuddyX Pro frame with your chosen sidebar - no extra CSS required.

Where to get it: Learn more - Get it

Events styled by BuddyX Pro Eventonomy events in BuddyX Pro.

What Eventonomy Adds

Eventonomy is Wbcom's in-house events plugin, built to run ticketed and free events without stitching together add-ons:

RSVPs - Free registrations with capacity limits and confirmations.
Paid ticketing - Sell tickets with tiers, pricing, and receipts.
Venues - Reusable venue records with address and map details.
QR check-in - Scan attendees in at the door with QR-coded tickets.

Eventonomy is free to start, with a Pro upgrade that unlocks the deeper ticketing and event-management features. See the Eventonomy product page for the full feature list.

How Eventonomy Pairs with BuddyX Pro

Eventonomy is built to consume the same design tokens BuddyX Pro exposes, so once it is active its event surfaces inherit your theme choices. There is no separate skin to install and no BuddyX-specific Eventonomy stylesheet in the theme - the fit comes from shared tokens and the standard page frame.

Surface	How it inherits from BuddyX Pro
Colors	Event listings and ticket buttons inherit your primary and accent colors from `--bx-color-*` tokens - no hardcoded plugin palette
Dark mode	Event archives, single events, venue pages, and checkout all repaint correctly when a visitor toggles dark mode
Sidebars	Event archives and single events respect your Customizer sidebar layout (Left, Right, None)
Header layouts	Event pages sit under whichever Pro header layout, top bar, and mega menu you have set
Typography	Event titles and details use the theme's typography presets and self-hosted fonts
Cards and rows	Event listings and venue rows adopt the theme's card style, hover effects, and border radius

Because Eventonomy shares the same design tokens and Customizer Framework as the theme, it is tested together against every BuddyX Pro release.

Set It Up

1. Install Eventonomy

Go to Appearance > Customize (or Dashboard > BuddyX Pro Options).
Open the BuddyX Pro Plugins notice on the dashboard.
Click Install + Activate next to Eventonomy. It installs from the license server and activates immediately - no manual zip download.

Go to Appearance > Customize > Sidebar.
Set the sidebar for event archives and single events to Left, Right, or None.
Publish.

3. Confirm Dark Mode

Toggle dark mode from the header.
Visit an event archive, a single event, a venue page, and the ticket checkout.
Every surface should repaint cleanly in dark and light.

Tip: Color mode is Light and Dark only. Whichever mode a visitor chooses, event pages follow the same tokens as the rest of your site, so branding stays consistent across the whole community.

The Events Calendar Users

Already running The Events Calendar? BuddyX Pro also styles it with themed calendar grids, event lists, venue and organizer pages, sidebars, and dark mode. The two paths are opt-in and can coexist - run Eventonomy, The Events Calendar, or both. See The Events Calendar for that setup.

Plugin Family - The full in-house Wbcom lineup, including Eventonomy
The Events Calendar - Third-party events styling
Sidebar Layouts - Configure event sidebars
Dark Mode - How the theme repaints every surface

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Gamification (WB Gamification)

WB Gamification adds points, badges, levels, and leaderboards to your community - a reward layer that turns everyday activity into progress your members can see and compete over. It is built to pair with BuddyX Pro: because point counters, badge grids, level bars, and the leaderboard table read the theme's --bx-color-* design tokens, they inherit your theme colors and dark mode, and their pages sit inside the standard BuddyX Pro frame with your chosen sidebar the moment WB Gamification is active.

Where to get it: Get it

Leaderboard styled by BuddyX Pro WB Gamification leaderboard in BuddyX Pro.

WB Gamification vs GamiPress

Two different plugins solve the same goal here, and it is worth being clear which one this page covers.

WB Gamification is the in-house Wbcom plugin, built by the same team as BuddyX Pro and tested against every theme release. It is the one described on this page.
GamiPress is a popular third-party gamification plugin. It inherits your BuddyX design tokens too, but it is documented separately.

If you are already running GamiPress, or you specifically want its ecosystem of add-ons, see GamiPress & Gamification. If you want a first-party option that stays in step with the theme and the rest of the Wbcom lineup, WB Gamification is the one to reach for.

What WB Gamification Does

WB Gamification adds a reward system to your community:

Points - Members earn points for activity - posting, commenting, joining groups, and more.
Badges - Visual awards members unlock when they hit a milestone.
Levels - Progressive ranks that members climb as their points grow.
Leaderboards - Ranked tables that surface your most active members and drive friendly competition.

It is free to start, with a Pro upgrade that adds deeper controls (more on that below).

How WB Gamification Pairs with BuddyX Pro

You do not configure a separate skin for WB Gamification. It is built to read the same --bx-color-* tokens that drive the rest of your site, so it inherits every color choice you have already made - there is no BuddyX-specific gamification stylesheet in the theme.

Theme colors

Point counters, badge cards, level progress bars, and the leaderboard's highlighted rows all read your primary and accent colors from Appearance > Customize > Skin Color (Global Palette). Change your primary color once and every gamification surface follows - no per-plugin color picker to keep in sync.

Sidebars

Leaderboard pages and badge archives honor your community sidebar settings. Set the layout at:

Go to Appearance > Customize.
Navigate to Sidebar and pick the layout for community pages (Left, Right, or None).

A None layout gives a large leaderboard the full content width; a Left or Right sidebar keeps your community navigation beside the table.

Dark mode

WB Gamification surfaces respond to the BuddyX Pro dark-mode toggle. Badge cards, level bars, leaderboard rows, and point counters all switch to the dark token set when a visitor flips the header toggle - and BuddyX Pro paints dark on first load, so the leaderboard never flashes light before switching.

BuddyX Pro's color mode is Light and Dark only. Whichever mode a visitor picks, your points, badges, and rankings stay readable and on-brand.

Page frame

Gamification pages render inside the standard BuddyX Pro page frame, so they carry whichever header layout, top bar, and mega menu you have set for the rest of the site. Where WB Gamification surfaces points and badges on a member profile, those surfaces inherit the profile header you have configured - one consistent frame across every community page.

Getting Started

Install and activate WB Gamification (see the product page below).
Create a point type and a couple of badges from the WB Gamification menu.
Publish a leaderboard page and visit it on the front end.
Confirm the leaderboard and badge cards pick up your theme colors, then switch the header toggle to check dark mode.

WB Gamification inherits your BuddyX Pro design tokens as soon as it is active - no theme-side setup beyond your normal color and sidebar choices.

Get WB Gamification

WB Gamification is an in-house Wbcom plugin, built by the same team as BuddyX Pro and tested against every theme release.

Product page: https://wbcomdesigns.com/downloads/wordpress-gamification-plugin/
Free to start. The free edition covers points, badges, levels, and leaderboards.
Pro upgrade adds advanced rules, more award triggers, and the deeper controls larger communities need.

WB Gamification is one of several first-party plugins you can add to a BuddyX Pro community. See the full lineup - forums, courses, media, events, directories, and more - on the plugin family page.

BuddyX Plugin Family - Every in-house Wbcom plugin, free and Pro
GamiPress & Gamification - The third-party alternative and how it inherits your theme
Color Scheme - Set the theme colors your gamification surfaces inherit
Dark Mode - How the light and dark toggle works across community surfaces
Sidebar Settings - Choose the sidebar layout for community and leaderboard pages

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Job Board (WP Career Board)

WP Career Board turns your community into a working job board - employers post listings, companies build profiles, and members upload resumes and apply, all without leaving your site. It is built to pair with BuddyX Pro: because job listings, company pages, resume forms, and application screens read the theme's design tokens, they inherit your theme colors and dark mode, and their pages sit inside the standard BuddyX Pro frame with your chosen sidebar the moment WP Career Board is active.

Where to get it: Learn more - Get it

Job board styled by BuddyX Pro WP Career Board jobs in BuddyX Pro.

What WP Career Board Does

WP Career Board adds a full hiring workflow to your community:

Job listings - Employers post openings with categories, locations, and job types; members browse and filter the archive.
Company profiles - Each employer gets a branded company page listing their open roles.
Resumes - Members build and upload resumes that employers can browse and search.
Applications - Members apply to listings in place, and employers review and respond from their dashboard.

It is free to start, with a Pro upgrade that adds deeper controls (more on that below).

How WP Career Board Pairs with BuddyX Pro

You do not configure a separate skin for WP Career Board. It is built to read the same --bx-color-* tokens that drive the rest of your site, so it inherits every color choice you have already made - there is no BuddyX-specific job-board stylesheet in the theme.

Theme colors

Job cards, apply buttons, category filters, and the company profile header all read your primary and accent colors from Appearance > Customize > Skin Color (Global Palette). Change your primary color once and the whole board follows - no per-plugin color picker to keep in sync.

Sidebars

The job archive and single-listing pages honor your sidebar settings. Set the layout at:

Go to Appearance > Customize.
Navigate to Sidebar and pick the layout for the job pages (Left, Right, or None).

A None layout gives the listing grid the full content width; a Left or Right sidebar keeps a filter or navigation column beside the jobs.

Dark mode

WP Career Board surfaces respond to the BuddyX Pro dark-mode toggle. Job cards, resume forms, the application panel, and the company header all switch to the dark token set when a visitor flips the header toggle - and BuddyX Pro paints dark on first load, so listings never flash light before switching.

BuddyX Pro's color mode is Light and Dark only. Whichever mode a visitor picks, your job board stays readable and on-brand.

Header layouts

The job board sits inside your BuddyX Pro page frame, so it inherits whichever header layout you have chosen - top bar, mega menu, and menu effects included. Members reach listings, their resume, and their applications from the same header they use everywhere else on the site.

Getting Started

Install and activate WP Career Board (see the product page below).
Visit the job board archive and confirm the listing cards pick up your theme colors.
Post a test listing and open a company profile to check the single-page layout.
Switch the header toggle to confirm dark mode across listings, resumes, and the apply form.

WP Career Board inherits your BuddyX Pro design tokens as soon as it is active - no theme-side setup beyond your normal color and sidebar choices.

Get WP Career Board

WP Career Board is an in-house Wbcom plugin, built by the same team as BuddyX Pro and tested against every theme release.

Product page: https://wpcareerboard.com/
Free to start. The free edition covers job listings, company profiles, resumes, and applications.
Pro upgrade adds paid and featured listings, applicant tracking, and resume search filters for larger boards.

WP Career Board is one of several first-party plugins you can add to a BuddyX Pro community. See the full lineup - forums, courses, gamification, events, directories, and more - on the plugin family page.

BuddyX Plugin Family - Every in-house Wbcom plugin, free and Pro
Color Scheme - Set the theme colors your job board inherits
Dark Mode - How the light and dark toggle works across community surfaces
Sidebar Settings - Choose the sidebar layout for the job pages

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Media Albums & Galleries (MediaVerse)

MediaVerse gives your members photo albums and media galleries - a place to upload images, organize them into albums, and browse everyone's media from a tab on their profile. It is built to pair with BuddyX Pro: because albums, grids, and the member media tab read the theme's design tokens, they inherit your theme colors and dark mode, and their pages sit inside the standard BuddyX Pro frame with your chosen sidebar the moment MediaVerse is active.

Where to get it: Get it

What MediaVerse Does

MediaVerse adds member-owned media to your community:

Albums - Members group their uploads into named albums with cover images.
Galleries - Responsive image grids with lightbox viewing.
Member media tab - A dedicated Media tab on each member profile listing that member's albums.
Activity media - Uploads can surface in the activity stream alongside posts and comments.

It is free to start, with a Pro upgrade that adds deeper controls (more on that below).

How MediaVerse Pairs with BuddyX Pro

You do not configure a separate skin for MediaVerse. It is built to read the same --bx-color-* tokens that drive the rest of your site, so it inherits every color choice you have already made - there is no BuddyX-specific media stylesheet in the theme.

Theme colors

Album cards, upload buttons, active tabs, and gallery hover states all read your primary and accent colors from Appearance > Customize > Skin Color. Change your primary color once and the media grids follow - no per-plugin color picker to keep in sync.

Sidebars

Media archive and album pages honor your community sidebar settings. Set the layout at:

Go to Appearance > Customize.
Navigate to Sidebar and pick the layout for community pages (Left, Right, or None).

A None layout gives galleries the full content width for larger thumbnails; a Left or Right sidebar keeps your community navigation beside the grid.

Dark mode

MediaVerse surfaces respond to the BuddyX Pro dark-mode toggle. Album cards, gallery backgrounds, the lightbox chrome, and the media tab all switch to the dark token set when a visitor flips the header toggle - and BuddyX Pro paints dark on first load, so galleries never flash light before switching.

BuddyX Pro's color mode is Light and Dark only. Whichever mode a visitor picks, your member media stays readable and on-brand.

Page frame

MediaVerse pages render inside the standard BuddyX Pro page frame, so they carry whichever header layout you have set for the rest of the site. Where MediaVerse adds a media tab to a member profile, that view inherits the profile header you have configured - one consistent frame across every community page.

Getting Started

Install and activate MediaVerse (see the product page below).
Visit any member profile and open the new Media tab.
Upload a few images and create an album.
Confirm the album grid picks up your theme colors and switch the header toggle to check dark mode.

MediaVerse inherits your BuddyX Pro design tokens as soon as it is active - no theme-side setup beyond your normal color and sidebar choices.

Get MediaVerse

MediaVerse is an in-house Wbcom plugin, built by the same team as BuddyX Pro and tested against every theme release.

Product page: https://wbcomdesigns.com/downloads/mediaverse/
Free to start. The free edition covers albums, galleries, and the member media tab.
Pro upgrade adds the advanced media controls, higher upload limits, and monetization options for larger communities.

MediaVerse is one of several first-party plugins you can add to a BuddyX Pro community. See the full lineup - forums, courses, gamification, events, directories, and more - on the plugin family page.

BuddyX Plugin Family - Every in-house Wbcom plugin, free and Pro
Color Scheme - Set the theme colors your galleries inherit
Dark Mode - How the light and dark toggle works across community surfaces
Sidebar Settings - Choose the sidebar layout for community and media pages

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Services Marketplace

BuddyX Pro makes a great foundation for a freelance services marketplace. Your theme colors, sidebars, dark mode, and header layouts carry straight through to vendor storefronts, order pages, and payout dashboards - the in-house WP Sell Services plugin is built on WooCommerce, so the theme's WooCommerce styling and shared design tokens apply directly. Start with WP Sell Services for the tightest fit, or point BuddyX Pro at a product-based marketplace like Dokan, WCFM, or WC Vendors that you already run.

Where to get it: Learn more - Get it

Services marketplace styled by BuddyX Pro WP Sell Services marketplace in BuddyX Pro.

WP Sell Services - the in-house services marketplace

WP Sell Services is Wbcom's own services marketplace: vendor storefronts, service listings, orders, and payouts. Because it is built by the same team as the theme, it shares the BuddyX Pro design system out of the box - no bridge plugin, no CSS overrides.

What you get:

Vendor storefronts - each seller gets a branded profile page with their service catalog, ratings, and contact options.
Service listings - sellers publish gigs with packages, pricing tiers, and delivery times.
Orders - buyers place and track orders, with requirements, revisions, and messaging in one thread.
Payouts - seller earnings are tracked per order and paid out on your schedule.

WP Sell Services is one of the in-house plugins in the BuddyX family. See the full lineup on the plugin family page. It is free to start, with a Pro upgrade that adds the deeper selling, commission, and payout features.

How WP Sell Services pairs with BuddyX Pro

WP Sell Services is built on WooCommerce and reads the theme's design tokens, so once it is active it inherits your theme without a separate skin:

Theme colors - service cards, package selectors, order buttons, and the seller dashboard read your --bx-color-* palette from Appearance > Customize > Colors. Change the primary color once and the marketplace follows.
Sidebars - the services archive and single-service pages sit inside the standard BuddyX Pro page frame, so they honor your sidebar choice at Appearance > Customize > Sidebar. Set Left, Right, or None to suit a browsing grid or a focused checkout.
Dark mode - because colors come from tokens, storefronts, service pages, order screens, and the payout dashboard follow light and dark mode. Members toggle light/dark from the header and the choice persists across pages.
Header layouts - your chosen Pro header layout, top bar, and mega menu sit above every marketplace page as they do on any page, so navigation stays consistent with the rest of the site.

Set it up

Install and activate WP Sell Services from Plugins > Add New.
Go to Appearance > Customize > Colors and confirm your primary color - the marketplace picks it up.
Go to Appearance > Customize > Sidebar and set the sidebar for services pages.
Visit your services archive - the grid renders in your BuddyX Pro colors immediately.

Tip: Pair WP Sell Services with BuddyPress so each seller's storefront links to their member profile - buyers get one identity across the community and the marketplace.

Product-based marketplaces

Running a product marketplace instead of a services one? BuddyX Pro also styles Dokan, WCFM, and WC Vendors - vendor dashboards, store pages, and multi-vendor checkout all inherit your theme. See the marketplace setup guides for the full walkthrough.

Marketplace	Best for	BuddyX Pro support
WP Sell Services	Freelance and service sellers wanting the tightest theme fit	In-house, WooCommerce-based, inherits theme styling
Dokan	Feature-rich multi-vendor product stores	Styled vendor dashboard and store pages
WCFM	Frontend-heavy vendor management	Themed dashboard, store, and catalog
WC Vendors	Lightweight, performance-focused stores	Styled storefronts and vendor list

WP Sell Services and the plugin family - Every in-house plugin, free and Pro
Dokan Marketplace - Multi-vendor product marketplace setup
WCFM Marketplace - Frontend vendor management
WC Vendors - Lightweight marketplace styling
Sidebar Layouts - Choose sidebars per marketplace page
Color Scheme - Set the palette the marketplace inherits

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

Wbcom Essential

Wbcom Essential is the free companion plugin you install right after BuddyX Pro. It ships 31 Gutenberg blocks (including 5 BuddyPress blocks) and 43 Elementor widgets - and every one of them auto-inherits your BuddyX Pro colors, typography, and dark mode. You build full landing pages, community home screens, and section layouts inside the native block editor, with no page builder required and no extra styling to write.

Where to get it: Get it

Wbcom Essential blocks in the editor The Wbcom Essential block library.

What Wbcom Essential Adds

Wbcom Essential extends the WordPress editor with production-ready building blocks so you can assemble marketing and community pages the same day you activate the theme:

31 Gutenberg blocks (including the 5 BuddyPress blocks below) - Heroes, feature grids, pricing tables, testimonials, team cards, counters, tabs, accordions, call-to-action rows, and more, all in the native block editor.
43 Elementor widgets - The same building set for sites that run Elementor, so your page builder of choice is covered either way.
5 BuddyPress blocks - Drop members, groups, activity, and profile surfaces straight into any page, so a community home screen is a block layout, not a template edit.
Block patterns - Pre-composed section layouts you insert and edit in place, so a full page is a few clicks rather than a from-scratch build.

Because the blocks read the theme's design tokens, you never pick colors twice. Set your palette once in the Customizer and every Wbcom Essential block follows it.

Wbcom Essential is free to start, with a Pro upgrade that adds more blocks, advanced controls, and premium patterns. See the Wbcom Essential product page for the full feature list.

Build Full Pages Without a Page Builder

You do not need Elementor or any third-party builder to lay out a complete page. The Gutenberg block set covers the whole page - hero at the top, feature and pricing sections in the middle, testimonials and a call-to-action at the bottom - inside the editor you already use.

A page built from Wbcom Essential blocks A full page built from the blocks, in BuddyX Pro colors.

Start from a block pattern, swap the copy and images for your own, and the section is done - already in your brand colors, already responsive, already dark-mode aware.

How Wbcom Essential Pairs with BuddyX Pro

Wbcom Essential's blocks are built to read the theme's design tokens, so once the plugin is active every block inherits your theme choices. There is no separate skin to install and no per-block color to set - the fit comes from shared tokens and the standard page frame.

Surface	How it inherits from BuddyX Pro
Colors	Every block inherits your primary and accent colors from the `--bx-color-*` tokens - no hardcoded block palette
Dark mode	Blocks and patterns repaint cleanly when a visitor toggles dark mode, including the `--wp--preset--color--*` mappings the theme sets
Typography	Block headings and body text use the theme's typography presets and self-hosted Inter and Newsreader fonts
Sidebars	Pages built from blocks respect your Customizer sidebar layout (Left, Right, None)
Header layouts	Block pages sit under whichever Pro header layout, top bar, and mega menu you have set
Cards and buttons	Block cards and call-to-action buttons adopt the theme's border radius, hover effects, and button styling

Because Wbcom Essential shares the same design tokens as the theme, your blocks stay on-brand across the whole site with zero extra CSS.

Set It Up

1. Install Wbcom Essential

Download Wbcom Essential from its product page: https://wbcomdesigns.com/downloads/wbcom-essential/ (free).
In wp-admin, go to Plugins > Add New > Upload Plugin, choose the downloaded zip, and click Install Now.
Click Activate. Every block picks up your BuddyX Pro colors right away.

See Plugin Family for the full in-house lineup.

2. Add a Block to a Page

Edit any page or post, or create a new one.
Click the + inserter and search for a Wbcom Essential block or pattern.
Insert it, edit the content, and publish. The block renders in your BuddyX Pro colors right away.

3. Confirm Dark Mode

Toggle dark mode from the header.
Visit the page you built.
Every block and pattern should repaint cleanly in dark and light.

Tip: Color mode is Light and Dark only. Set your palette once in Appearance > Customize and every Wbcom Essential block follows it in both modes, so you never restyle a block by hand.

Plugin Family - The full in-house Wbcom lineup, including Wbcom Essential
Dark Mode - How the theme repaints every surface
Sidebar Layouts - Configure sidebars on block pages
Bundled Plugins - What ships with your BuddyX Pro license

Got a question? We're a friendly team - happy to help. support@wbcomdesigns.com

The Wbcom Plugin Family

This is the single source of truth for the in-house Wbcom ecosystem that BuddyX Pro is built to style. Start here to see the themes, the free companion plugin, and every standalone product you can add - each one made by the same team, sharing the same design tokens, and tested against every BuddyX Pro release. Other docs link back to this page instead of re-listing the catalog, so bookmark it as your map of what to install next.

Every standalone product below is free-to-start with a Pro upgrade, and every one is built to pair with BuddyX Pro: because they read the theme's --bx-color-* design tokens, your primary color and dark mode carry into the plugin's screens, and their pages sit inside the standard BuddyX Pro page frame (header, footer, and your chosen sidebar layout) like any other page - nothing extra to configure.

Themes

Product	What it is	Link
BuddyX (free)	General-purpose, community-ready WordPress theme - the free foundation	https://buddyxtheme.com/
BuddyX Pro	The Pro theme (v5.1.0): presets, sign-in popup, per-page settings, header layouts, WP login theming, WooCommerce shop styling, and full BuddyPress control	https://wbcomdesigns.com/downloads/buddyx-pro-theme/
BuddyX Child Theme (free)	A safe place for your customizations so theme updates never overwrite them	https://github.com/wbcomdesigns/buddyx-child

Not sure whether you need Pro? Pro unlocks header layouts, the top bar, mega menu, WP login form theming, WooCommerce shop styling, the side panel, activity share and reactions, full BuddyPress directory and header layouts, presets, the sign-in popup, and per-page settings. The free theme still gives you dark mode, custom colors, border-radius controls, a sticky header, and 27 block patterns.

Wbcom Essential (free companion)

Install Wbcom Essential right after the theme. It is the free companion plugin that adds building blocks to the WordPress and Elementor editors, and every block inherits your BuddyX Pro colors automatically - no per-block styling needed.

31 Gutenberg blocks (including 5 BuddyPress blocks)
43 Elementor widgets
A set of ready-made block patterns

Wbcom Essential blocks and widgets styled by BuddyX Pro Wbcom Essential blocks picking up the active BuddyX Pro palette and dark mode automatically.

Product page: https://wbcomdesigns.com/downloads/wbcom-essential/ (free)

Where to get it: Get it

Pick a product by goal

Decide what you are building, then add the matching product. Each one has a free edition to start and a Pro edition for the deeper features.

Goal	Product	One-liner	Product page	Edition
Community / social network	BuddyNext	Modern, faster alternative to BuddyPress and BuddyBoss: profiles, feeds, Spaces, messaging	https://buddynext.com/	Free + Pro
Discussions / forums / Q&A	Jetonomy	Forums, threaded Q&A, ideas roadmap, polls	https://jetonomy.org/	Free + Pro
Online courses (LMS)	Learnomy	Courses, lessons, quizzes, certificates, paid enrollments	https://learnomy.app/	Free + Pro
Media albums / galleries	MediaVerse	Media albums and galleries for members	https://wbcomdesigns.com/downloads/mediaverse/	Free + Pro
Gamification	WB Gamification	Points, badges, levels, leaderboards	https://wbcomdesigns.com/downloads/wordpress-gamification-plugin/	Free + Pro
Job board	WP Career Board	Listings, company profiles, resumes, applications	https://wpcareerboard.com/	Free + Pro
Freelance services marketplace	WP Sell Services	Vendor storefronts, orders, payouts	https://wpsellservices.com/	Free + Pro
Events / ticketing	Eventonomy	RSVPs, paid ticketing, venues, QR check-in	https://eventonomy.org/	Free + Pro
Directory	Listora	Member listings, claims, reviews, monetization	https://listora.org/	Free + Pro
Ads / monetization	WB Ad Manager	Display ad zones, sponsorship slots, ad rotation	https://wbcomdesigns.com/downloads/wb-ad-manager/	Free + Pro

BuddyNext

Build a full community or social network - member profiles, activity feeds, Spaces, and private messaging - as a modern, faster alternative to BuddyPress and BuddyBoss. BuddyX Pro is a community theme first, and it ships a targeted BuddyNext compatibility layer (#buddynext-bxpro)). BuddyNext's own surfaces inherit the theme's design tokens for color and dark mode and sit inside your chosen header and sidebar layout.

A community activity feed styled by BuddyX Pro A community feed picking up the theme's header layout, sidebar rules, and dark mode.

Product page: https://buddynext.com/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

Jetonomy

Run discussions, forums, and Q&A - threaded questions with accepted answers, an ideas roadmap with upvotes, and polls. Jetonomy's boards, threads, and reply screens inherit your primary color, typography presets, and light or dark mode from the theme's tokens, and sit in the same sidebar layout you use across the rest of the site.

Jetonomy discussions styled by BuddyX Pro Jetonomy discussion threads inheriting the active BuddyX Pro palette and layout.

Product page: https://jetonomy.org/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

Learnomy

Sell online courses with a first-party LMS - courses, lessons, quizzes, certificates, and paid enrollments. Course archives, lesson players, and the student dashboard adopt the theme's colors, header layout, and dark mode, so learning pages match the rest of your community without custom CSS.

Learnomy courses styled by BuddyX Pro A Learnomy course grid rendered with the theme's colors and post-per-row settings.

Product page: https://learnomy.app/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

MediaVerse

Give members media albums and galleries. MediaVerse album grids and lightbox views use your theme colors and respect the sidebar and content-width settings you have configured, and they switch cleanly between light and dark mode with the header toggle.

Product page: https://wbcomdesigns.com/downloads/mediaverse/ (free to start, Pro upgrade available)

Where to get it: Get it

WB Gamification

Reward engagement with points, badges, levels, and leaderboards. Badge walls, rank displays, and leaderboard tables inherit the BuddyX Pro palette and typography, sit inside your chosen sidebar layout, and read correctly in dark mode.

A gamification leaderboard styled by BuddyX Pro A WB Gamification leaderboard styled with the theme's colors and dark mode.

Product page: https://wbcomdesigns.com/downloads/wordpress-gamification-plugin/ (free to start, Pro upgrade available)

Where to get it: Get it

WP Career Board

Run a job board with listings, company profiles, resumes, and applications. Job archives, single-listing pages, and application forms inherit your primary color, form border-radius, and header layout from the theme's tokens and page frame, and follow your sidebar and dark-mode settings like any other page.

WP Career Board job listings styled by BuddyX Pro A WP Career Board listings page picking up the theme's layout and colors.

Product page: https://wpcareerboard.com/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

WP Sell Services

Turn your community into a freelance services marketplace with vendor storefronts, orders, and payouts. Built on WooCommerce, so BuddyX Pro's shop styling applies directly: storefront grids, service pages, and cart or checkout screens all match your theme colors, layout, and dark mode.

WP Sell Services marketplace styled by BuddyX Pro A WP Sell Services storefront styled through the theme's WooCommerce controls.

Product page: https://wpsellservices.com/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

Eventonomy

Publish events with RSVPs, paid ticketing, venues, and QR check-in. Event calendars, single-event pages, and ticket screens adopt the theme's colors, header layout, and sidebar rules, and dark mode carries through to every event surface.

Eventonomy events styled by BuddyX Pro An Eventonomy events listing rendered with the theme's palette and layout.

Product page: https://eventonomy.org/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

Listora

Build a directory of members, businesses, or listings with claims, reviews, and monetization. Listora archives, single-listing pages, and review blocks inherit your theme colors and typography, use your configured sidebar layout, and switch between light and dark mode with the header toggle.

Listora directory styled by BuddyX Pro A Listora directory grid styled with the theme's colors and content width.

Product page: https://listora.org/ (free to start, Pro upgrade available)

Where to get it: Learn more - Get it

WB Ad Manager

Monetize your community with display ad zones, sponsorship slots, and ad rotation. Ad zones drop into the theme's header, sidebar, and content areas and respect your layout and spacing, so sponsored placements sit inside the design rather than breaking out of it.

Product page: https://wbcomdesigns.com/downloads/wb-ad-manager/ (free to start, Pro upgrade available)

Where to get it: Get it

BuddyPress Community Bundle

If you are extending a BuddyPress or BuddyNext community, the BuddyPress Community Bundle collects 26 premium add-ons in one purchase - Moderation Pro, Profile Pro, Business Profile, Member Blog Pro, Hashtags, Polls, Check-ins Pro, Private Community Pro, and more. Each add-on's screens inherit the same colors, sidebar layout, and dark mode the theme applies to the rest of your BuddyPress community.

Product page: https://wbcomdesigns.com/downloads/buddypress-community-bundle/

Where to get it: Get it

Bundled Plugins - What ships with your BuddyX Pro license and how to install each plugin
Quick Start - First-time setup, including the companion plugins notice
Choose Your Path - Recipes by site type, with the matching product for each goal

Got a question? We are a friendly team, happy to help point you at the right product for what you are building. support@wbcomdesigns.com

Recipes & Tutorials

What you'll build: a working primary navigation menu assigned to your header, then styled with BuddyX Pro's header controls - menu position, the More Menu overflow, sub-menu typography, and the mobile hamburger breakpoint.

Time: ~20 minutes Prerequisites: theme installed and activated (#installation-bxpro) if not yet)

Every site needs a menu before the header looks finished. WordPress core builds the menu; BuddyX Pro decides where it sits, how it behaves when it gets long, and when it collapses to a hamburger on smaller screens. This recipe walks the whole path in order.

Go to Appearance > Menus (or Appearance > Customize > Menus if you prefer the live-preview panel)
Click create a new menu
Give it a name you'll recognize later, e.g. "Primary Navigation"
Click Create Menu

Result: an empty menu now exists, ready for links. Nothing shows on the front end yet - it isn't assigned to a location.

Step 2 - Add pages and links (4 minutes)

In the left column of the Menus screen, open the Pages, Posts, Custom Links, and Categories panels
Tick the items you want (Home, About, Activity, Members, Shop, Contact, etc.) and click Add to Menu
For anything not on your site - an external profile, a mailto link - use Custom Links to add a URL and label
Drag menu items up and down to order them
Drag an item slightly to the right, under another item, to make it a sub-item (this is the dropdown / sub-menu)
Click Save Menu

Keep the top level short. Group secondary pages as sub-items so the header stays tidy - the More Menu (Step 4) and hamburger breakpoint (Step 6) both work better with a lean top row.

Result: your menu now has a structure, with dropdowns wherever you nested items.

BuddyX Pro registers separate menu locations so you can show different navigation to logged-in members and logged-out visitors:

Primary - Logged in users
Primary - Logged out users
Mobile Menu - Logged in users / Mobile Menu - Logged out users
Side Menu and User Menu locations for community layouts

Scroll to Menu Settings at the bottom of the Menus screen
Under Display location, tick Primary - Logged in users
If you want the same menu for visitors who aren't signed in, tick Primary - Logged out users too (or build a second, trimmed menu and assign it there)
Click Save Menu

Result: reload your front end - the menu now appears in the header. From here on, everything is BuddyX Pro styling.

Go to Appearance > Customize > Site Header
Find Header Menu Position and choose Right, Left, or Center
Find More Menu ? and leave it Yes (the default) so any items that don't fit collapse into a tidy "More" dropdown instead of wrapping to a second line
Click Publish

Header Menu Position only appears when your Menu Layout is set to Layout 1 (Logo Left, Menu Right). Layouts 2, 3, and 4 fix the menu position as part of their design. See Header Layouts to pick or change the layout.

Result: the primary menu sits where you chose, and long menus overflow into More rather than breaking the header. Full reference: Header Elements & Icons.

Go to Appearance > Customize > Typography > Menu
Under Settings, set the font family, size, weight, and letter-spacing for the top-level menu items
Under Sub Menu Settings, set the same properties for dropdown (sub-menu) links - these can differ from the top level, e.g. a slightly smaller size
Click Publish

Want a hover animation on menu items too? Add one under Customize > Site Header > Header Menu Effects (Effect 1, 2, or 3, or No Effect). See Header Layouts for the effect options.

Result: menu and dropdown text now match your brand typography, independently of the body font.

Step 6 - Set the mobile hamburger breakpoint (2 minutes)

On narrow screens the desktop menu collapses to a hamburger icon. You decide at what width that switch happens.

Go to Appearance > Customize > Site Header
Drag the Hamburger Menu Breakpoint slider (range 768px to 1600px, default 768px) to the screen width where you want the switch
Preview using the mobile and tablet icons at the bottom of the Customizer
Click Publish

Raise the breakpoint if your menu has many items and starts to wrap on tablets - the hamburger then kicks in earlier (on wider screens) and keeps the header clean. Full mobile reference: Mobile Header.

Result: below your chosen width the header shows the hamburger; above it, the full menu. Resize the browser to confirm the switch lands where you expect.

Verify the whole flow

Visit your site logged out, then logged in, at desktop and mobile widths:

Check	Expected
Menu appears in header	Yes, in the position set in Step 4
Logged-in vs logged-out menu	Matches the locations assigned in Step 3
Long menu handling	Extra items collapse into More, no wrapping
Dropdowns	Sub-items appear on hover / tap, styled per Step 5
Mobile	Below your breakpoint, the hamburger opens the menu

If a change doesn't show, confirm you clicked Publish, hard-reload (Cmd+Shift+R / Ctrl+F5), and purge any caching plugin.

Header Layouts - the four header layouts and Menu Layout choice
Header Elements & Icons - More Menu, search, cart, and account icons
Mobile Header - hamburger breakpoint, mobile menu panel, mobile logo
Header Presets - one-click header starting points
Match the demo design - set up the whole demo look, menu included

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

Recipe: Brand your dark mode

What you'll build: a dark-mode version of your site that reflects YOUR brand (not the default midnight-blue palette). Custom dark backgrounds, custom dark brand accent, a dark-mode-appropriate version of your logo.

Time: ~30 minutes Prerequisites:

BuddyX Pro 5.1.0+ activated
Your brand colors decided (you'll need 2-3 hex values)
A dark-mode-friendly version of your logo (a light-colored version of your brand mark - see Step 4 if you don't have one yet)

What "branding dark mode" actually means

BuddyX Pro 5.1.0 ships a complete dark palette out of the box - a coordinated midnight-blue look (#1A1A2E page bg, #E94560 accent, etc.). Most sites can turn dark mode on with one toggle and it works.

But the default dark palette is brand-neutral. If you have a strong brand identity, your dark mode should reflect it. This recipe walks you through customizing:

Your dark brand color (the accent in dark mode)
Your dark page background (the main backdrop)
Your dark elevated surface (cards, panels, widgets)
Your dark mode logo (a light-colored version of your logo)
Your color mode strategy (force dark / let visitors choose / match OS)

Each is independent - you can customize one or all four.

Decide your dark color strategy first

Pick one approach before diving into the colors:

Approach A - Invert your brand

Your light-mode brand is on a light background; your dark mode mirrors it on a dark background with the same accent color. Example: A coral brand on white in light mode, the same coral on near-black in dark mode.

When to use: when your brand color works on dark backgrounds (most coral / blue / teal / green accents do). Quick to set up.

Approach B - Shift the brand color

Your brand color in light mode is too dark / too saturated to read on dark backgrounds. Pick a lifted (lighter, brighter) version for dark mode. Example: A deep navy brand (#003049) on white in light mode becomes a lifted blue (#5aa3ae) on dark in dark mode.

When to use: when your light-mode brand color is too dark to read on dark backgrounds. Best results with high-saturation accents.

Approach C - Dark mode as a distinct sub-brand

Your dark mode is a deliberate, different visual identity - different accent, different surfaces. Example: A blue light-mode brand and a magenta dark-mode brand.

When to use: rare - usually for tech / gaming brands that have a separate "night mode" identity. Most sites benefit from approach A or B instead.

Pick A unless your brand specifically needs B or C. The instructions below assume A; B and C use the same steps with different hex values.

Step 1 - Pick your dark brand color (5 minutes)

The brand color drives buttons, links, accents, and the "primary" preset across the dark palette.

Decide your dark brand hex. Two ways:

From your existing brand color (approach A above):
- Open your light-mode brand color in a hex picker (e.g. coolors.co)
- Lift it 10-20% - increase the lightness, slightly decrease saturation. For example: #ee4036 → #ff5350.
- Test it visually against a dark background to confirm it stays legible.
From scratch (approach B):
- Pick a hex that contrasts with #0a0a0a to #1a1a2e (typical dark backgrounds). Aim for WCAG-AA contrast (4.5:1 minimum) - use webaim.org/resources/contrastchecker/ to verify.
In WordPress, go to Appearance → Customize → Site Skin
Scroll to find Theme Color (Dark Mode) - the field for dark_site_primary_color
Paste your hex
Click Publish

To preview the change:

Set Color Mode (also in Site Skin) to Dark temporarily - see Step 5 for the permanent strategy
Reload the site front-end
Buttons, links, and accents should now use your new dark brand color

Step 2 - Pick your dark page background (5 minutes)

The page background is the main dark backdrop behind all content.

Common approaches:

Near-black (#0a0a0a to #121212) - modern, like Twitter / GitHub dark
Deep navy / blue-black (#1A1A2E, the default) - gentler than pure black, the BuddyX baseline
Charcoal / warm dark (#1c1c1f, slight warmth) - softer for long reading

In Customize → Site Skin, find Body Background Color (Dark Mode) - the field for dark_body_background_color
Paste your chosen hex
Click Publish

Avoid:

Pure black (#000000) - too high contrast, hurts on OLED screens, looks unfinished
Anything below #0a0a0a lightness - same problem

Step 3 - Pick your dark elevated surface (5 minutes)

The "elevated surface" is cards, panels, widgets, and any UI that needs to feel slightly raised above the page background.

The elevated surface should be slightly lighter than the page background - usually by 8-15 lightness points. Example: page bg #0a0a0a → elevated #16213E or #1f1f1f.

In Customize → Site Skin, find Box Background Color (Dark Mode) - the field for dark_box_background_color
Paste your chosen hex
Click Publish

If you want even more depth:

Secondary background (dark_secondary_background_color) - a subtle tint between page-bg and box-bg, for transitional surfaces
Content background (dark_content_background_color) - the main post / page content area

Most sites only need to customize the page-bg + box-bg pair. The rest can inherit from those two.

Step 4 - Upload a dark mode logo (5 minutes)

Your light-mode logo (designed to read on white) probably won't read well on dark backgrounds. Upload a light-colored version specifically for dark mode.

If you have a dark-mode logo file ready

Go to Customize → Site Identity
Find Dark Mode Logo - a second logo upload field next to your main logo
Click Select Logo, upload your light-colored version
Skip cropping
Click Publish

The swap happens automatically the moment dark mode applies - no extra config needed.

If you don't have a dark-mode logo file yet

Two quick options:

Inverted version: open your logo file in any image editor, invert the colors, save as a separate file. Works for monochrome logos.
Light-color recolor: replace the dark color in your logo with a light color (white / off-white / your brand color lifted). Works for vector logos in Illustrator / Figma / Affinity.

If your logo is a wordmark only (no graphic), you might not need a separate dark logo at all - just rely on dark_site_title_color to render the wordmark in light text. Check your light-mode logo first.

Step 5 - Decide your color mode strategy

Pick one of two approaches in Customize → Site Skin → Color Mode:

Strategy	What visitors see	Best for
Light	Light mode by default (dark palette applies only if a visitor toggles)	Sites whose brand identity is light, or where dark mode is an opt-in extra
Dark	Dark mode by default (light palette applies only if a visitor toggles)	Tech / gaming sites that are dark-first, or sites where you want everyone in the customized dark identity

Then decide if visitors get a toggle to override the default:

Customize → Site Skin → Color Mode → Show color-mode toggle: On = visitors get a sun/moon icon they can click to switch modes
Toggle Position: Floating (side of screen) / Header / Mobile only / Both - pick whichever fits your header crowdedness

Most sites: Light + Show toggle on + Position: Floating - a predictable default with a way for visitors to override.

Step 6 - Verify dark mode looks right

Set Color Mode to Dark temporarily (so you can see the dark version regardless of your OS preference)
Reload the front-end of your site
Check each surface:
- Home page
- A blog post
- The header + menu (with hover states)
- The footer (with widget content)
- A button (your dark brand color should be the bg)
- A link in body text (your dark brand color)
- The site title in the header (should be readable)
If your logo is now invisible, you skipped Step 4 - upload a dark logo
If your brand color is hard to read on dark, lift it more (Step 1)
If the elevated surfaces blend into the page background, increase the lightness difference between them (Step 3)

Once everything looks right, set Color Mode back to your chosen strategy (Light or Dark from Step 5).

Bonus - Verify contrast (WCAG AA)

Accessibility-conscious sites should verify text-on-background contrast meets WCAG AA (4.5:1 for body text, 3:1 for large text + UI elements).

For each text-on-background pair:

Find the two hex values (e.g. text color and background color)
Open webaim.org/resources/contrastchecker/
Paste both hexes
Verify the AA contrast ratio is met (it shows pass/fail)

Critical pairs to check:

Body text color (dark_body_text_color) on page background (dark_body_background_color)
Body text color on box background (dark_box_background_color)
Link color (dark_site_links_color) on body background
Button text (dark_site_buttons_text_color) on button background (dark_site_buttons_background_color)

If a pair fails, adjust the lighter of the two colors to be lighter, or the darker to be darker.

Common questions

My dark brand color works in body text but looks dim on buttons. Why? Buttons are filled surfaces (the brand color IS the background), so the brand color appears at 100% saturation. In body text, the same color appears as small letters against a dark background - it can look weaker. The fix: use the same dark brand color for buttons but lighten the link color separately (dark_site_links_color).

Can I have a different dark brand color from my light brand color? Yes - this is exactly what dark_site_primary_color is for. It defaults to a lifted version of your light brand color, but you can set it to anything. Approach C in the strategy section uses this.

What's the difference between "page background" and "box background"? Page background is the main backdrop behind everything. Box background is cards, widgets, panels - surfaces that should feel slightly raised. The two should differ by ~8-15 lightness points for visible depth.

Block-pattern landing pages still look light in dark mode. Why? This shouldn't happen on 5.1.0+ - the theme ships dark overrides for the WordPress block-library color presets (--wp--preset--color--base, --wp--preset--color--contrast, etc.). If your block pattern uses a different palette slug, see Dark Mode → Block patterns. For child-theme palette slugs, use the buddyxpro_dark_wp_preset_map filter - see Filters Index.

Can I have a separate dark logo for the header but use the main logo elsewhere? The Dark Mode Logo applies everywhere dark mode applies (header, header sticky variant, mobile menu). It doesn't have separate placements. If you need that, you'd need custom CSS.

Dark Mode reference - the full dark-mode documentation with every customizer field
Color Scheme - the light-mode palette settings
Color Presets - pre-built palettes that auto-pair light + dark
Glossary: Hex code - how hex colors work
Filters Index - buddyxpro_dark_wp_preset_map for advanced customization

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

Recipe: Build your homepage

What you'll build: a custom homepage in BuddyX Pro - a page you design with block patterns and Wbcom Essential blocks, given the header style you want, and set as your site's static front page.

Time: ~30 minutes Prerequisites: theme installed and activated (#installation-bxpro) if not yet)

This recipe walks you through building a homepage from scratch, styling its header, and switching your site over to it. Everything you build inherits your BuddyX Pro colors, typography, and dark mode automatically, so you never restyle a block by hand.

Step 1 - Create the page (2 minutes)

Go to Pages > Add New
Give it a title (e.g. Home) - you can hide this title later in Step 5
Click Save draft so the page exists before you start building

You now have an empty page to lay out.

Step 2 - Add block patterns (10 minutes)

Block patterns are pre-built section layouts - a hero, a feature grid, a pricing table - that you drop in and edit in place. BuddyX Pro ships 87 of them.

In the page editor, click the + inserter
Open the Patterns tab
Browse or search a category and click a pattern to insert it
Repeat to stack the sections your homepage needs

A common homepage stack:

A Hero pattern at the top (Hero Centered, Hero Split, or Hero Gradient)
A Features section in the middle (Features Grid 3-Col or Features Cards)
A Testimonials or Content Pricing section
A CTA row at the bottom (CTA Gradient or CTA Simple)

Or start from a ready-made full-page template - the Community Homepage, Courses Homepage, or Marketplace Homepage patterns give you a complete layout in one insert, and you swap the copy and images for your own.

Once inserted, patterns are just regular blocks - click any text to edit it, swap images from the media library, and delete blocks you don't want.

For the full catalog and category list, see Block Patterns.

Step 3 - Add Wbcom Essential blocks (5 minutes)

For sections the built-in patterns don't cover - counters, tabs, accordions, team cards, or live community surfaces - install the free companion plugin Wbcom Essential. It adds 31 Gutenberg blocks including 5 BuddyPress blocks (members, groups, activity), and every one inherits your theme colors and dark mode.

Download it from https://wbcomdesigns.com/downloads/wbcom-essential/ (free), then install and activate the zip from Plugins > Add New > Upload Plugin
Back in your page, click the + inserter and search for a Wbcom Essential block or pattern
Insert it, edit the content, and it renders in your BuddyX Pro colors right away

Dropping in the BuddyPress blocks (Active Members, Groups, Activity Feed) turns your homepage into a community landing screen without any template editing.

See Wbcom Essential for the full block list and how it styles to your theme.

Tip: You can mix both sources freely - a block-pattern hero on top, a Wbcom Essential members grid below. They share the same design tokens, so the whole page stays on-brand.

Step 4 - Pick the header for your homepage (3 minutes)

Your header has two independent choices: the style (its visual personality) and the layout (where the logo and menu sit). Set the site-wide default first.

Go to Appearance > Customize
Navigate to Header > Site Header
Under Header Style, click a preset - Default, Solid, Transparent, Minimal, or Glass
Under Menu Layout, pick one of the four header layouts
Click Publish

If your homepage opens with a full-width hero image, the Transparent style is worth a look - it lets the header sit over the hero with no background fill. You can apply Transparent to just this page in the next step, so the rest of the site keeps your standard header.

See Header Presets for what each of the five styles does, and Header Layouts for the four menu arrangements.

Step 5 - Set it as your front page (2 minutes)

Tell WordPress to show your new page instead of the latest-posts list.

Go to Settings > Reading
Under Your homepage displays, choose A static page
Set Homepage to the page you built
Click Save Changes

Visit your site's root URL logged out to confirm your new homepage loads.

Step 6 (optional) - Fine-tune with Page Settings (3 minutes)

BuddyX Pro's Page Settings panel (in the editor's right-side column) lets you override site-wide settings for just this one page - ideal for a homepage that needs to stand apart from your inner pages.

Open your homepage in the editor and, in the Page Settings panel:

Hide the page title - a homepage rarely needs its title bar. Turn off the title (sub-header) so your hero leads instead of a "Home" heading.
Go full-width - set Content width to Full for an edge-to-edge layout that lets your patterns span the whole viewport.
Transparent header on this page only - set Header style to Transparent here if you want the overlay effect on the homepage but not the rest of the site.
Drop the sidebar - set Sidebar to None so the homepage runs the full width with no sidebar column.

Each setting defaults to "Use site default," so you only change what you need. Click Update after any change.

See Per-Page Settings for every override and how priority resolves.

Result

You have a custom homepage built from block patterns and Wbcom Essential blocks, styled with the header preset and layout you chose, set as your static front page, and optionally trimmed to a full-width, title-free landing surface. Every block follows your theme colors and repaints cleanly in dark mode with no extra CSS.

Block Patterns - the full pattern catalog and categories
Wbcom Essential - the free companion block library
Header Presets - the five header styles
Header Layouts - the four menu arrangements
Per-Page Settings - override site settings on one page
Match the demo design - start from the published demo instead of a blank page

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

What you'll build: a branded sign-in experience that replaces WordPress's plain /wp-login.php page. Visitors who click a "Sign in" link see your branded popup or branded login page instead of WordPress's generic gray screen.

Time: ~20 minutes Prerequisites: BuddyX Pro 5.1.0+ activated

This recipe covers the two paths BuddyX Pro offers:

Path	When to use	What visitors see
Sign-in Popup	Default recommendation. Visitors stay on the page they were on; popup overlays for sign-in.	A branded modal that opens on the same page
Branded `/wp-login.php`	When you want a dedicated full-page login (e.g. for marketing reasons, or because a 3rd-party plugin assumes the WP login URL).	A branded full page at `yoursite.com/wp-login.php`

You can use both at the same time - the popup is for in-context sign-in (header link, comment form prompt), the branded login page handles direct visits to /wp-login.php.

The Sign-in Popup is a modal that opens when a visitor clicks any "Sign in" or "Register" link in your site. The visitor never leaves the page they're on.

Go to Customize → General → Sign-in Popup | Register Form Fields
Set Sign-in Popup to On
Click Publish

Test:

Visit your site logged out
Click any "Sign in" link (in the header user widget, the side panel, the comment form's "Please log in to comment" link)
The popup should open on the current page instead of redirecting to /wp-login.php

Step A2 - Pick the form to show first (1 minute)

In the same Customizer section, set Form Display:

Both - login form with a tab to switch to register (most common)
Login - login form only, no register tab (good for closed/invitation-only sites)
Register - register form first, with a tab to switch to login (good for sign-up-focused launches)

Step A3 - Add a welcome message above the form (3 minutes)

Customize → General → Sign-in Popup | Register Form Fields
Find Popup Description (the buddyx_login_description field)
Write a short message - one line works best. Examples:
- "Welcome back - sign in to access your courses."
- "Join our community of 5,000+ members."
- "Sign in to comment, post, and connect."
Click Publish

The text renders at the top of the popup, above the login form.

By default, after a successful login the visitor returns to the page they were on. You may want a different destination:

Customize → General → Sign-in Popup | Register Form Fields
Find Login Redirect:
- Current page (default) - stay on the page they were on
- Profile page - go to their BuddyPress profile (requires BuddyPress)
- Activity page - go to the community activity feed (requires BuddyPress)
- Custom page - go to a specific URL you provide
If you pick Custom page, Login Redirect URL appears below - paste the full URL (e.g. https://yoursite.com/welcome/)
Do the same for Register Redirect (where they go after signing up)
Click Publish

If you have a 3rd-party authentication plugin (e.g. Login with Google, Login with Facebook) and want to use ITS form inside the BuddyX popup chrome:

Customize → General → Sign-in Popup | Register Form Fields
Set Form Popup to Custom shortcode (instead of "BuddyX Login Form")
Popup Content field appears below - paste the shortcode from your 3rd-party plugin
Click Publish

The BuddyX popup chrome stays; the form body is replaced by the shortcode's output.

Path B - Branded `/wp-login.php` page

Use this when you want the dedicated full-page login experience customized (instead of, or alongside, the popup).

Customize → WP Login Page
Set Enable Custom Login to On
Click Publish

Visit yoursite.com/wp-login.php while logged out to see the default branded layout.

In the same Customizer section, you can customize:

Setting	What it controls
WP Login Logo	A logo image shown at the top of the login form (use a transparent PNG/SVG)
Background Color	The page background
Background Image	An optional background photo (use the Background Image guide for sizing)
Form Background Color	The form panel's background
Button Background Color	The "Log In" / "Register" button colors
Form Text Color	Text inside the form
Link Color	Links (like "Lost your password?")

Pick colors that align with your light-mode palette. The login page typically uses your site's brand color for the button and your hero/header colors for the background.

Step B3 - Choose a layout (2 minutes)

Customize → WP Login Page → Login Page Theme
Pick:
- Default - the WordPress-classic centered form
- Modern - a two-pane layout with imagery on one side, form on the other (most popular)
- Simple - minimal, centered form on plain background
Click Publish

Step B4 - (Optional) Add a Split View image

If you picked Modern, you can add a background image to the left pane:

Customize → WP Login Page → Background Image
Upload a high-resolution image (1920×1080 minimum for sharp rendering)
Click Publish

You can have both active at once. The popup handles in-context sign-in (header links, side panel, comment prompts). The branded login page handles direct visits to /wp-login.php (bookmarks, "Forgot password" email links, 3rd-party plugin redirects).

To do this:

Follow Path A to set up the popup
Follow Path B to brand the login page
Both work independently - no conflict

Testing the full flow

Once configured, test end-to-end as a real visitor would experience it:

Log out of WordPress (or open an incognito browser window)
Visit your site
Test the popup: click any "Sign in" link - popup should open without leaving the page
Test login: enter credentials - should land at your configured Login Redirect destination
Test register: click the "Register" tab in the popup - fill the form - submit
Test the branded page: visit yoursite.com/wp-login.php directly - should see your branded layout
Test the forgot-password flow: click "Lost your password?" - should also use the branded layout
Test redirect after login from the branded page: log in via /wp-login.php - should land at your configured destination

Common questions

My visitors are getting "Forbidden" errors when they try to log in via the popup. Most often a security plugin (Wordfence, Sucuri, iThemes Security) is blocking the AJAX login endpoint. Check the plugin's settings for "Block AJAX login" or similar; allow it for the BuddyX login action. Specific guidance varies by plugin.

The popup doesn't open when I click the "Sign in" link. Three common causes:

Sign-in Popup is set to Off in Customizer - turn it on (Step A1)
The link doesn't have the right CSS class - BuddyX automatically attaches the popup to header/side-panel/comment-form sign-in links. Custom links you add via menus may need the buddyx-login-popup class.
A JS error elsewhere on the page is breaking the popup script. Open the browser console (F12) and look for errors.

Can I disable BuddyX's branded login page and use plain WordPress login? Yes - set Enable Custom Login to Off in Customize → WP Login Page. Visitors to /wp-login.php will see the default WordPress login form.

Where do I configure the password-reset email message? The password-reset email content is controlled by WordPress core, not by the theme. Look for the retrieve_password_message filter, or use a plugin like WP Mail SMTP / Better Notifications for WordPress to customize email content.

My BuddyPress xprofile validation isn't running on signups through the popup. The popup uses a streamlined registration form. If your BuddyPress profile has required custom fields that need full xprofile validation, BuddyX falls back to the full /wp-login.php?action=register page for those signups - this is documented behavior, not a bug. Either simplify your required xprofile fields, or accept the fallback.

Login Page reference - full reference for every login customizer setting
Sign-in Popup (in Login Page doc) - the comprehensive Sign-in Popup section
Branding - site identity (logo + favicon) that the login page shares
Site Skin - the color palette that login page colors inherit from (if you don't override)

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

Recipe: Launch a private / members-only community

What you'll build: a community site where only logged-in (or paid) members see content. Visitors who aren't signed in see a landing page (or are redirected to login). Members get the full community experience - profiles, groups, activity, messaging.

Time: ~1-2 hours Prerequisites:

BuddyX Pro 5.1.0+ activated
First-time setup complete (#quick-start-bxpro))
Decision on signup model: free signup / invitation-only / paid subscription

This is a longer recipe because private-community setup spans multiple plugins + several decision points. Read through once before starting.

Decision 1 - Who can become a member?

Pick one signup model. Each leads to a different setup path.

Anyone can sign up via your registration form. Once signed up, they're a member. Quick to set up; relies on moderation / trust levels to keep quality.

Plugins needed: BuddyPress (or BuddyBoss Platform) - both free.

Option B - Invitation-only

Only people you invite can join. Each member gets an invite link. Closes the gates against random signups; good for tight-knit communities.

Plugins needed: BuddyPress + an invitation plugin (e.g. BuddyPress Group Email Subscription has invite features, or a dedicated invite plugin from wordpress.org).

Option C - Paid subscription

Members pay (one-time or recurring) to join. The membership plugin handles payment + access control.

Plugins needed: BuddyPress + a membership plugin. Common choices:

MemberPress (paid) - most full-featured
Paid Memberships Pro (free core + paid add-ons) - good balance
Restrict Content Pro (paid) - strong recurring-payment support
WooCommerce Memberships (paid) - fits well if you already use WooCommerce

BuddyX Pro works with all of them. Pick the one whose pricing + features fit your budget.

Option D - Hybrid (free + paid tiers)

A free tier (limited access) plus paid tiers (more access). Most membership plugins support this natively.

Plugins needed: same as Option C (the membership plugin handles tier differentiation).

Decision 2 - How private is "private"?

Three levels:

Level	What visitors see at `yoursite.com/`	What visitors see at `yoursite.com/groups/` etc.
Mostly private	A public landing page (Home, About, Pricing - same as a non-private site)	Login required to access
Fully private	Redirected to login page (no public content at all)	Login required
Brochure + private	Public landing pages explain the community, paid pages are behind a paywall	Public can preview titles + read paywall content

Most paid communities use Mostly private (public marketing pages, gated community pages). The walkthrough below uses that as the default; notes call out where to adjust for the other two levels.

Step 1 - Install the required plugins (10 minutes)

For Option A (free signup):

Install + activate BuddyPress (Plugins → Add New → search "BuddyPress" → Install → Activate)

For Option B (invitation-only):

Install + activate BuddyPress
Install + activate an invitation plugin (search for "BuddyPress invite" - pick the highest-rated)

For Options C and D (paid):

Install + activate BuddyPress
Install + activate your chosen membership plugin (MemberPress / PMPro / RCP / WC Memberships)

Step 2 - Configure BuddyPress for a community (10 minutes)

Go to Settings → BuddyPress → Components. Enable:
- Extended Profiles
- Account Settings
- Activity Streams
- Notifications
- Site Tracking (optional)
- Friend Connections
- Private Messaging
- User Groups (highly recommended for community sites)
Save Changes
Go to Settings → BuddyPress → Options:
- Set Allow only registered members to post comments (if you want comments gated)
- Set Allow group creators to create groups based on your policy
Save Changes

See BuddyPress Setup for the full reference.

Step 3 - Lock down content visibility (15 minutes)

This is where you make the site "private." There are two main approaches:

Approach 1: Use the membership plugin's content gating

If you picked MemberPress / PMPro / RCP, this is the cleanest path:

Open the membership plugin's settings
Create your membership tier(s) (e.g. "Member" or "Free" + "Premium")
Set per-page or per-category restrictions:
- Page → Membership Required: pick which tiers can see this page
- Or restrict by category - all posts in "Members Only" category require Member tier
Lock down BuddyPress pages (activity, members, groups, messages) to the Member tier

Approach 2: Use BuddyPress Restrict Access (no membership plugin)

If you skipped a membership plugin (Option A or B):

Install + activate BP Private Site or similar BuddyPress-aware privacy plugin
Configure to redirect non-logged-in visitors to the login page when they try to access community URLs (members, groups, activity)
Choose what's public (marketing pages) vs private (everything BP-related)

Step 4 - Configure the registration flow (10 minutes)

For Option A (free signup):

Go to Settings → General. Make sure Membership: Anyone can register is checked
Set New User Default Role to Subscriber (standard role; BuddyPress upgrades it as needed)
Save Changes

For Option B (invitation-only):

Uncheck Settings → General → Anyone can register
Configure your invitation plugin's settings (invite expiry, max invites per member, etc.)
Members can now only join via invitation links

For Options C/D (paid):

The membership plugin handles registration. Configure its registration form fields, payment provider, and post-signup behavior
Make sure the membership plugin's signup pages aren't restricted by themselves (or visitors can't sign up!)

For private communities, the in-page sign-in popup is much better UX than redirecting to /wp-login.php.

Follow the Customize the Login Flow recipe - specifically Path A (Sign-in Popup)
In step A2, set Form Display to:
- Login if signups are closed (Option B invitation-only with no public signup form)
- Both if visitors can both sign in (returning members) and register (new members)
In step A4, set Login Redirect to:
- Activity page (so members land in the community feed after login)
- or Profile page (so they land on their own profile)
- or a Custom page like a Welcome page

Step 6 - Configure what non-logged-in visitors see (10 minutes)

This is the visible-vs-hidden line for non-members. Pick your privacy level (from Decision 2 above) and follow the relevant path:

"Mostly private" (recommended for most paid communities)

Public pages: Home, About, Pricing, Contact, Privacy Policy, Terms
Private (login required): everything else
Logged-out visitors at yoursite.com/ see your marketing Home page; they hit "Members Only" gates when they click into community surfaces

Set this up:

Make sure your public pages aren't restricted in the membership plugin
Make sure community pages (members, groups, activity, messages) ARE restricted
Test by viewing in an incognito browser window

"Fully private"

Public: nothing (or just the login page itself)
Private: everything

Set this up:

Install a "Force Login" plugin (search wordpress.org for "force login")
Configure to redirect all logged-out visitors to /wp-login.php
Or use your membership plugin's "redirect non-members to login" option

"Brochure + private"

Public: Home, About, marketing pages, blog posts (free content)
Private: premium content (gated articles, member-only forums, paid courses)

Set this up:

Mark only premium pages/categories as restricted in the membership plugin
Free content stays open to public
Premium content shows a paywall / "Sign in to read" prompt to non-members

Step 7 - Set the homepage strategy

For a private community, your homepage is your most important conversion surface. Configure based on privacy level:

Mostly private

Static landing page (set up in Quick Start Step 8) with marketing copy, value proposition, pricing, and a clear "Sign in / Sign up" CTA.

Fully private

The homepage redirects to login. Set this in your force-login plugin's settings.

Brochure + private

Same as Mostly private - marketing landing page that converts visitors into members.

Step 8 - Set up a Welcome flow for new members

After someone signs up, they should land somewhere useful. Configure:

Customize → General → Sign-in Popup | Register Form Fields → Register Redirect: pick where new members land. Recommendations:
- Profile page - they immediately see their (empty) profile and feel compelled to fill it out
- Custom page = a "Welcome" page you create with onboarding steps (join a group, post your first activity, find members like you)
Create the Welcome page if you picked Custom (Pages → Add New → Title: "Welcome" → add onboarding content + links)

A good Welcome page typically has:

"Welcome, [first name]!" greeting (use WordPress's display-name shortcode or a personalization plugin)
3-4 actions: complete profile, join a group, post your first update, find friends
Links to key community resources (the activity feed, the groups list, FAQ)

Step 9 - Test the full flow

End-to-end test in an incognito browser window (or a real second browser logged out):

Visit yoursite.com/ - see the public homepage
Click "Sign in" or "Sign up" - popup opens (if Option A) or paywall page loads (if Option C with a paid signup)
For free signup: fill out registration form → submit → land at Register Redirect
For paid: enter card → complete payment → land at the membership plugin's success page → then at your Welcome
As a logged-in member: visit yoursite.com/members/ - should see the member directory
Visit yoursite.com/groups/ - should see groups
Then: log out
Visit yoursite.com/members/ again - should hit a login prompt / paywall (depending on your privacy level)
Visit yoursite.com/ - should see public homepage (mostly private) or be redirected to login (fully private)

Common questions

Should I require email verification for signups? For free-signup sites, yes - it cuts spam dramatically. WordPress core supports email-verification signup via the "New User Approve" or "User Email Verification" plugins. For paid signups, the payment step effectively verifies the user.

Can I have multiple membership tiers with different access levels? Yes - every membership plugin (MemberPress, PMPro, RCP) supports tiered access. Configure tiers in the plugin, then mark pages/posts/categories as accessible to specific tiers. BuddyX Pro's templates don't need any changes for this.

Do I have to use BuddyPress for the community features? For Option C with paid memberships only, you could skip BuddyPress and use just member-only article content. But for a real community (profiles, messaging, groups, activity), BuddyPress is essentially required. There's no other plugin in the WP ecosystem that matches its feature set for community sites - except BuddyBoss Platform (paid alternative, also fully supported by BuddyX Pro).

Can I make some groups private (members-only of that group)? Yes - BuddyPress has built-in group privacy levels: Public (anyone can view), Private (members can view), Hidden (not even listed publicly). Set on a per-group basis when the group is created.

Will BuddyX Pro's bundled plugins (Jetonomy, MediaVerse, etc.) work in a private community? Yes. Bundled plugins respect WordPress + membership-plugin access controls. Jetonomy forums, MediaVerse video uploads, WB Gamification points - all work for logged-in members.

My free / lower-tier members should see SOME activity but not all. Can I do that? Yes, but it requires the membership plugin's per-component restrictions. Configure your plugin to allow Subscribers (free tier) access to Activity but not Messages, or whatever per-feature split you want. Each membership plugin handles this slightly differently - consult their docs.

Can a member upgrade their tier later? Yes - every paid membership plugin supports upgrades + downgrades. The flow is usually: member visits Account → Upgrade → picks new tier → pays the difference.

Choose Your Path → Private/members-only - the path summary that links here
BuddyPress Settings - full BP reference
Customize the Login Flow - the login-flow recipe used in Step 5
Match the demo design - if you want your public landing page to look like the BuddyX demo
Glossary: MemberPress / PMPro / RCP - what these membership plugins are

Got a question? Private communities have a lot of moving parts - we're a friendly team and happy to help walk you through the setup. Drop us a line at support@wbcomdesigns.com with what you're building and we can recommend a configuration.

Recipe: Match the demo design

What you'll build: a site that looks like the published BuddyX Pro demo at buddyxpro.wbcomdesigns.com - same color palette, typography pairing, header layout, footer structure.

Time: ~30 minutes Prerequisites: theme installed and activated (#installation-bxpro) if not yet)

This recipe is the fastest way to get a finished-looking site if you're not sure where to start with colors / fonts / layout. Apply the demo as a baseline, then tweak from there to make it yours.

The 4 ingredients of the demo look

Looking at the published demo, four customizer choices drive 90% of the visual identity:

Color preset - the demo uses a clean light palette (Default Light) with a coordinated dark variant
Typography preset - the demo uses a modern sans-serif pairing
Header layout - the demo uses Layout 1 (logo left, menu right)
Demo content - the demo's home, about, services, and pricing pages

Pick all four and your site will look like the demo. The rest of the customizer can stay default.

Step 1 - Load the demo content (5 minutes)

This creates the starter pages (Home, About, Services, Pricing, FAQ, Contact, Journal) that the demo uses.

Go to Appearance → Customize
The first time you open Customize on a fresh install, BuddyX Pro shows starter content (this is the "Demo Importer" feature)
If the starter pages are already loaded (you ran Demo Importer before), skip to Step 2
If not, follow the Demo Content guide to import them

The starter content adds:

7 pre-built pages
A primary menu linking them
A homepage set to the Home page (not latest posts)

Step 2 - Apply the Default Light color preset (3 minutes)

In Customizer, open Site Skin
Find the Style preset card grid (visual swatches near the top)
Click Default Light
The live preview updates immediately - you'll see the demo's red-orange accent (#ee4036) replace any prior color choices
Click Publish at the top of the Customizer

If you want to match the demo's dark mode too:

The Default Light preset auto-pairs with a dark variant. When you (or your visitors) toggle dark mode, the dark side comes from the same preset - no extra picking needed.

If you prefer a different accent color (Sapphire blue, Coral orange, Carbon black, etc.), pick that preset instead. The demo's structural look stays the same; only the accent shifts. See Color Presets for all 14.

Step 3 - Apply the Default typography preset (2 minutes)

In Customizer, open Typography
Find the Typography Preset picker
Pick Default - the system-ui baseline (no preset applied). On macOS this renders as San Francisco; on Windows as Segoe UI; on most Linux distros as the system default sans-serif. This matches the demo's stripped-down typographic look.
Click Publish

If you want a different feel:

Inter - clean, neutral (works anywhere)
Geist - modern, technical (good for SaaS)
IBM Plex - corporate, dependable
DM Sans - friendly, approachable
Humanist - warm, readable
Editorial - sophisticated serif (good for long-form content)
Magazine - bold display + readable body (news / blog sites)

See Typography Presets for the full reference.

The demo uses Default (system-ui) specifically. Other presets give you a structurally identical layout with different typographic personality.

In Customizer, open Header → Header Layout
Pick Layout 1 (logo on left, menu on right) - the demo's choice
Click Publish

If the demo content didn't include a primary menu yet, set one up:

Go to Appearance → Menus
Add the demo pages (Home, About, Services, Pricing, Journal, Contact) as menu items
Set the menu's location to Primary Menu
Save

The demo footer has 3 widget columns plus a copyright bar.

Go to Appearance → Widgets
You'll see Footer 1, Footer 2, Footer 3 widget areas (the demo uses all three)
Drop widgets into each:
- Footer 1: a Text widget with a short site description / about blurb
- Footer 2: a Custom HTML widget with social media links, or a Navigation Menu widget linking to About / Contact / Privacy
- Footer 3: a Recent Posts widget showing your 3 latest articles
Save

Set the copyright bar:

In Customizer, open Site Footer → Copyright
Click Publish

Step 6 - Verify the result (3 minutes)

Visit your site (yoursite.com/) logged out. Compare to the demo:

Element	Demo	Your site (should match)
Header background	White	White
Header layout	Logo left, menu right	Logo left, menu right
Accent color	Red-orange `#ee4036`	Red-orange `#ee4036`
Body text color	Dark blue-grey `#003049` headings, mid-grey `#505050` body	Same
Font	Default preset (system-ui baseline)	Same
Home page	Hero + features + pricing + testimonials	Same (from demo content)
Footer	3 widget columns + copyright bar	Same

If anything doesn't match, double-check:

Did you click Publish on each Customizer change?
Did you hard-reload your front-end (Cmd+Shift+R / Ctrl+F5)?
If you have a caching plugin, purge its cache

Step 7 - Make it yours (10 minutes)

Now that you have the demo baseline, customize the parts that should reflect your brand:

Logo: replace the demo logo with yours at Customize → Site Identity → Logo
Site title + tagline: update at Customize → Site Identity
Demo page content: edit each starter page (Pages → All Pages → click a page) and replace placeholder text with your own copy
Primary color: if you want a different accent, change site_primary_color at Customize → Site Skin → Primary Color

The visual structure (header / footer / typography / preset) stays demo-matched; only the specific content + logo are now yours.

Common questions

The demo accent color (#ee4036) doesn't match my brand. Can I keep the demo look but change just the accent? Yes. After Step 2, open Customize → Site Skin → Primary Color and replace #ee4036 with your brand hex. The rest of the preset stays in place. The downside: the per-cluster colors (button bg / link colors / etc.) won't auto-adjust to coordinate with your new primary - you may want to also override those manually.

Can I match the demo's dark mode look? Yes - the Default Light preset auto-pairs with a dark variant. Just turn on Customize → Site Skin → Color Mode → Auto and visitors with dark-mode OS preferences see the dark variant automatically. Or set Color Mode to Dark to force everyone to dark.

The demo has block patterns I want - how do I add them to my pages? When editing a page, click + to add a block, then click the Patterns tab. BuddyX Pro ships 87 patterns (hero sections, pricing tables, contact forms, etc.). See Block Patterns for the catalog.

Do I have to use the demo content's pages? I want different page names. No - the demo content is a starting point, not a requirement. You can delete the starter pages and create your own. The visual styling (preset / typography / header / footer) doesn't depend on the demo content existing.

Demo Content (Starter Pages) - the underlying demo-importer feature
Color Presets - all 14 preset options
Typography Presets - all 7 font pairings
Header Layouts - the 4 header options
Footer Settings - footer customization
Block Patterns - the pattern catalog

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

Recipe: Speed up your BuddyX Pro site

What you'll build: a faster-loading community site - fonts served from your own server, a caching layer in front of WordPress, lazy-loaded images, and only the BuddyPress components you actually use.

Time: ~30 minutes Prerequisites: theme installed and activated (#installation-bxpro) if not yet)

Be honest with yourself about where the time goes. BuddyX Pro is already lightweight - it loads CSS per context (integration stylesheets only load when the plugin is active), adds preconnect and preload hints for fonts, and enhances WordPress's built-in image lazy loading. The theme is rarely your bottleneck.

The two things that move the needle most are a caching plugin and your host. A community site runs logged-in, BuddyPress-heavy pages that skip a lot of page caching, so object caching (Redis/Memcached) and a capable host matter more here than on a plain blog. Do Steps 1 to 4 below, then if the site is still slow, the honest next step is better hosting - not more theme tweaks.

What actually affects speed

Lever	Impact	Who controls it
Host + object cache (Redis/Memcached)	Highest	You / your host
Caching plugin	High	You (Step 2)
Images (size, format, lazy load)	High	You (Step 3)
Number of active plugins	Medium	You
Fonts (how many, served from where)	Medium	You (Step 1)
BuddyPress components loaded	Medium	You (Step 4)
The theme itself	Low - already optimized	BuddyX Pro

Steps 1 to 4 cover the levers you control inside WordPress. See the Performance FAQ for hosting specs, memory limits, and recommended hosts.

Step 1 - Serve fonts locally, not from Google's CDN (10 minutes)

Fonts pulled from fonts.googleapis.com add an external request and, in the EU, raise GDPR questions (loading a font from Google shares the visitor's IP). Serving fonts from your own server removes both problems. BuddyX Pro gives you three routes - pick the one that matches how much control you want.

Option A - Use a typography preset (easiest, already local). Six of the built-in presets (Geist, IBM Plex, DM Sans, Editorial, Magazine, Humanist) ship their font files bundled inside the theme, and Inter is self-hosted via theme.json. When you pick one of these, visitors never hit Google's CDN - no setup, no code.

Go to Appearance > Customize > Typography
Open the Typography Preset picker
Pick Inter, Geist, IBM Plex, DM Sans, Editorial, Magazine, or Humanist
Click Publish

Option B - Use system fonts (zero font requests). The Default preset uses the visitor's own OS font (San Francisco on Mac, Segoe UI on Windows, Roboto on Android). Nothing to download, nothing to serve - the fastest possible option.

Go to Appearance > Customize > Typography
Set the Typography Preset to Default
Click Publish

Option C - Self-host a specific family via the Font Library. Want a particular Google font, but served from your server? Download it, upload it to WordPress's Font Library, and BuddyX Pro stops requesting that family from Google automatically.

Go to Appearance > Fonts and upload the font files (.woff2, .ttf)
Go to Appearance > Customize > Typography and open any panel (Body, Headings, Menu)
Pick your uploaded font from the Family dropdown
Click Publish

Requires WordPress 6.5+ (when the Font Library shipped). BuddyX Pro prints the @font-face rules for the families you actually use and skips requesting a self-hosted family from Google.

Whichever route you take, keep it lean: one or two families, two or three weights total. Every extra weight is another file to load. See Google Fonts for the full loading model and Typography Presets for what each preset pairs.

Result: open your front end, press F12, and filter the Network tab by "Font". You should see font files coming from your own domain (or none at all with the Default preset) - not from fonts.gstatic.com.

Step 2 - Install a caching plugin (5 minutes)

This is the single highest-impact change you can make inside WordPress. A cache serves ready-made HTML to logged-out visitors instead of rebuilding every page from PHP and the database on each request.

Go to Plugins > Add New
Install and activate one caching plugin (not two - they conflict):
- WP Rocket - easiest setup, best results, paid
- LiteSpeed Cache - free, best on LiteSpeed servers
- W3 Total Cache - free, most control, for advanced users
Turn on page caching, and enable minification/combination of CSS and JS
Purge the cache and reload your front end

On a BuddyPress site, many logged-in pages (activity, messages, profile) are deliberately not page-cached because they show per-user data. That is correct behaviour. The bigger win for logged-in traffic is object caching (Redis or Memcached) at the host level - see the Performance FAQ.

Result: load a page logged out, reload it, and the second load should be noticeably faster. Most caching plugins show a "cached" indicator in the page source or their toolbar.

Step 3 - Confirm images are optimized and lazy-loading (5 minutes)

Images are usually the heaviest thing on a page. WordPress 5.5+ lazy-loads images by default (they load as the visitor scrolls to them), and BuddyX Pro extends that to post thumbnails, avatars, cover images, and galleries. You do not enable lazy loading - it is already on. Your job is to make the image files themselves smaller.

Serve WebP instead of JPEG/PNG - roughly 30% smaller at the same quality. Install an optimizer like ShortPixel or Imagify (Plugins > Add New) to auto-convert on upload and bulk-convert your existing library.
Upload images at sensible dimensions - do not drop a 4000px photo into a 1200px slot. See the size table in the Performance FAQ.
Leave lazy loading on. If a page-builder or gallery plugin offers its own lazy-load setting, make sure it is not fighting WordPress's - one lazy-load pass is enough.

Result: run your home page through PageSpeed Insights. "Serve images in next-gen formats" and "Properly size images" should be gone or much smaller in the opportunities list.

Step 4 - Turn off BuddyPress components you don't use (5 minutes)

Every active BuddyPress component adds queries, routes, and assets. If your community does not use Friend Connections, Private Messaging, or the Activity stream, switching them off trims the work each page does. This is a BuddyPress setting, not a theme setting - but it directly affects how fast your BuddyX Pro pages render.

Go to Settings > BuddyPress > Components
Untick the components you genuinely don't need. Common ones to review:
- Friend Connections - off if you don't use follow/friend relationships
- Private Messaging - off if members don't message each other
- Site Tracking - off if you don't surface new-post activity
- Activity Streams - keep this if your home/community pages show the feed (BuddyX Pro's community layout leans on it)
Click Save Settings
Visit your community pages and confirm nothing you rely on disappeared

Be conservative. Turning off a component hides its features and its menu items. If you are unsure whether something is in use, leave it on. You can always disable it later once you have confirmed no one depends on it. See BuddyPress Settings for what each component does.

Result: fewer components means fewer queries per page. On a busy directory or activity page the difference is measurable in Query Monitor's query count.

Step 5 - Measure, then decide if the host is the bottleneck (honest check)

You have done the WordPress-side work. Now measure before doing anything else.

Run the home page and one logged-in community page through PageSpeed Insights or WebPageTest
Install Query Monitor (Plugins > Add New) and load a heavy page while logged in - look at the total query time and the "Server-Timing" / page-generation time
Read the result honestly:
- Fast page-generation time, slow overall - a caching/CDN or front-end issue. Revisit Steps 2 and 3, add a CDN (Cloudflare has a free tier).
- Slow page-generation time even with caching - this is your host or missing object caching. No theme setting fixes a slow server. This is where upgrading hosting (managed WordPress, Redis/Memcached, PHP 8.1+) pays off.

Result: a clear verdict on whether your remaining slowness is inside WordPress (you can fix it) or under WordPress (the host must fix it). See the Performance FAQ for recommended hosts and minimum specs.

Common questions

Do I need to enable conditional CSS loading or the asset optimizer in the theme? No - there is no switch. BuddyX Pro already loads its stylesheets per context: integration CSS (LearnDash, Dokan, WCFM, WooCommerce, bbPress, and the rest) only enqueues when that plugin is active, and font preconnect/preload hints are added automatically. This is on by default and needs no configuration.

I turned on a caching plugin and the site looks broken / dark mode stopped switching. Aggressive CSS/JS combination can occasionally break a script. If dark mode, the login modal, or scroll-to-top stops working after enabling minification, exclude the theme's JS from combination in your caching plugin, or turn combination off (keep minification). Always purge the cache after any Customizer change.

Will serving fonts locally change how my site looks? No. The glyphs are identical - only the source changes from Google's CDN to your server (or the visitor's own OS with the Default preset). The visual result is the same; the external request and the GDPR exposure are gone.

How many plugins is too many? Quality matters more than count. 10 to 20 active plugins is normal; past 30, consolidate. Use Query Monitor to find which plugin adds the most query time rather than guessing. See the plugin-impact table in the Performance FAQ.

My community pages are slow only when logged in. Why? Logged-in BuddyPress pages show per-user data and skip full-page caching by design. The fix is object caching (Redis/Memcached) at the host, not a theme setting - and trimming unused BuddyPress components (Step 4) so each page does less work.

Performance FAQ - hosting specs, memory limits, image sizes, recommended hosts
Google Fonts - how fonts load, and every way to self-host them
Typography Presets - which presets ship fonts locally
BuddyPress Settings - what each component does before you switch it off
Site Loader - manage perceived speed while pages paint

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.

Developer Guide

Child theme setup, hooks, filters, and customisation reference.

Child Theme Guide

A child theme lets you customize BuddyX Pro safely. Your changes survive theme updates, ensuring your customizations remain intact through all future updates.

Why Use a Child Theme?

Without Child Theme:

You customize colors in theme files
Theme gets updated
Your customizations disappear
You redo everything

With Child Theme:

You customize in child theme
Parent theme updates
Your customizations stay
All good

Do You Need One?

Your Plan	Need Child Theme?
Only using Customizer settings	No
Adding custom CSS	Maybe (can use Customizer)
Editing template files	Yes
Adding custom PHP functions	Yes
Modifying theme behavior	Yes
Overriding BuddyPress templates	Yes

Creating a Child Theme

Step 1: Create the Folder

Access your site via FTP or File Manager
Navigate to /wp-content/themes/
Create a new folder: buddyx-pro-child

Step 2: Create style.css

Create a file named style.css in your child theme folder:

/*
 Theme Name:   BuddyX Pro Child
 Theme URI:    https://wbcomdesigns.com/downloads/buddyx-pro-theme/
 Description:  BuddyX Pro Child Theme
 Author:       Your Name
 Template:     buddyx-pro
 Version:      1.0.0
*/

/* Add your custom CSS below this line */

Important: The Template: buddyx-pro line must match the parent theme folder name exactly.

Step 3: Create functions.php

Create functions.php in your child theme folder:

<?php
/**
 * BuddyX Pro Child Theme functions
 */

function buddyx_pro_child_enqueue_styles() {
    wp_enqueue_style(
        'buddyx-pro-parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'buddyx-pro-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'buddyx-pro-parent-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'buddyx_pro_child_enqueue_styles' );

Step 4: Activate Child Theme

Go to Appearance → Themes
Find BuddyX Pro Child
Click Activate

Adding Custom CSS

Add CSS to your child theme's style.css:

/* Custom header background */
.site-header {
    background-color: #1a1a2e;
}

/* Custom button color */
.btn-primary {
    background-color: #e94560;
}

Overriding Templates

Template overrides allow you to customize any template file without modifying the parent theme. WordPress automatically uses child theme templates when they exist.

How Template Overrides Work

Find the template file in the parent theme (/buddyx-pro/)
Copy the file to your child theme, maintaining the same folder structure
Edit the child theme copy
WordPress automatically uses your child theme version

Example: Overriding header.php

Parent theme location:

/wp-content/themes/buddyx-pro/header.php

Copy to child theme:

/wp-content/themes/buddyx-pro-child/header.php

Now edit the child theme copy. WordPress will use your version instead of the parent's.

Common Templates to Override

Template	Purpose	Location
`header.php`	Site header, navigation	Root
`footer.php`	Site footer, widgets	Root
`single.php`	Single blog post	Root
`page.php`	Static pages	Root
`archive.php`	Archive listings	Root
`sidebar.php`	Sidebar content	Root
`index.php`	Main fallback template	Root
`comments.php`	Comment display/form	Root
`search.php`	Search results	Root
`404.php`	Not found page	Root
`searchform.php`	Search form	Root

Template Parts

BuddyX Pro uses template parts for modular components. These are located in the template-parts/ directory:

buddyx-pro/
├── template-parts/
│   ├── content/
│   │   ├── content.php
│   │   ├── content-page.php
│   │   ├── content-single.php
│   │   └── content-none.php
│   ├── header/
│   │   ├── site-branding.php
│   │   └── navigation.php
│   ├── footer/
│   │   └── footer-widgets.php
│   └── sidebar/
│       └── sidebar.php

To override a template part:

Parent: /buddyx-pro/template-parts/content/content-single.php
Child:  /buddyx-pro-child/template-parts/content/content-single.php

BuddyPress Template Overrides

BuddyX Pro includes BuddyPress templates that you can override:

buddyx-pro/
├── buddypress/
│   ├── members/
│   │   ├── single/
│   │   └── index.php
│   ├── groups/
│   │   ├── single/
│   │   └── index.php
│   └── activity/
│       └── index.php

Override Example - Member Profile Header:

Parent: /buddyx-pro/buddypress/members/single/member-header.php
Child:  /buddyx-pro-child/buddypress/members/single/member-header.php

WooCommerce Template Overrides

If using WooCommerce, override templates in a woocommerce/ folder:

Parent: /buddyx-pro/woocommerce/single-product.php
Child:  /buddyx-pro-child/woocommerce/single-product.php

FluentCart Template Overrides

For FluentCart templates:

Parent: /buddyx-pro/archive-fluent-products.php
Child:  /buddyx-pro-child/archive-fluent-products.php

Parent: /buddyx-pro/taxonomy-product-categories.php
Child:  /buddyx-pro-child/taxonomy-product-categories.php

Practical Override Examples

Example 1: Custom Single Post Layout

Override single.php to change blog post layout:

Create: /buddyx-pro-child/single.php

<?php
/**
 * Custom single post template
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <!-- Custom featured image placement -->
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="custom-featured-image">
                        <?php the_post_thumbnail( 'full' ); ?>
                    </div>
                <?php endif; ?>

                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

                    <!-- Custom meta display -->
                    <div class="custom-post-meta">
                        <span class="author">By <?php the_author(); ?></span>
                        <span class="date"><?php echo get_the_date(); ?></span>
                        <?php if ( function_exists( 'buddyxpro_get_reading_time_minutes' ) ) : ?>
                            <span class="reading-time"><?php printf( esc_html__( '%d min read', 'buddyxpro' ), (int) buddyxpro_get_reading_time_minutes() ); ?></span>
                        <?php endif; ?>
                    </div>
                </header>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>

                <!-- Custom author box -->
                <div class="custom-author-box">
                    <?php echo get_avatar( get_the_author_meta( 'ID' ), 100 ); ?>
                    <div class="author-info">
                        <h4><?php the_author(); ?></h4>
                        <p><?php the_author_meta( 'description' ); ?></p>
                    </div>
                </div>

            </article>
            <?php

            // Custom related posts
            get_template_part( 'template-parts/content/related-posts' );

            // Comments
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        endwhile;
        ?>
    </main>
</div>

<?php
get_sidebar();
get_footer();

Example 2: Custom Header with Top Bar

Override header.php to add a top bar:

Create: /buddyx-pro-child/header.php

<?php
/**
 * Custom header with top bar
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div id="page" class="site">

    <!-- Custom Top Bar -->
    <div class="custom-top-bar">
        <div class="container">
            <div class="top-bar-left">
                <span class="phone">📞 <?php echo get_theme_mod( 'phone_number', '1-800-555-1234' ); ?></span>
                <span class="email">✉️ <?php echo get_theme_mod( 'email_address', 'info@example.com' ); ?></span>
            </div>
            <div class="top-bar-right">
                <?php
                // Social icons
                if ( function_exists( 'buddyx_social_icons' ) ) {
                    buddyx_social_icons();
                }
                ?>
            </div>
        </div>
    </div>

    <!-- Original header content -->
    <header id="masthead" class="site-header">
        <?php get_template_part( 'template-parts/header-settings/site-branding' ); ?>
        <?php get_template_part( 'template-parts/header-settings/navigation' ); ?>
    </header>

Add CSS in style.css:

.custom-top-bar {
    background: #1a1a2e;
    color: #ffffff;
    padding: 10px 0;
    font-size: 14px;
}

.custom-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-top-bar .phone,
.custom-top-bar .email {
    margin-right: 20px;
}

Example 3: Custom Archive Template

Override archive.php for a grid layout:

Create: /buddyx-pro-child/archive.php

<?php
/**
 * Custom archive with grid layout
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <header class="archive-header">
            <?php
            the_archive_title( '<h1 class="archive-title">', '</h1>' );
            the_archive_description( '<div class="archive-description">', '</div>' );
            ?>
        </header>

        <?php if ( have_posts() ) : ?>

            <div class="posts-grid">
                <?php
                while ( have_posts() ) :
                    the_post();
                    ?>
                    <article class="grid-item">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <a href="<?php the_permalink(); ?>" class="grid-thumbnail">
                                <?php the_post_thumbnail( 'medium_large' ); ?>
                            </a>
                        <?php endif; ?>

                        <div class="grid-content">
                            <h2 class="grid-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <div class="grid-excerpt">
                                <?php the_excerpt(); ?>
                            </div>
                            <a href="<?php the_permalink(); ?>" class="read-more">Read More →</a>
                        </div>
                    </article>
                    <?php
                endwhile;
                ?>
            </div>

            <?php the_posts_pagination(); ?>

        <?php else : ?>
            <?php get_template_part( 'template-parts/content/content-none' ); ?>
        <?php endif; ?>

    </main>
</div>

<?php
get_sidebar();
get_footer();

Add CSS:

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.grid-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.grid-content {
    padding: 20px;
}

.grid-title a {
    color: #1a1a2e;
    text-decoration: none;
}

.read-more {
    color: #e94560;
    font-weight: 600;
}

Using Theme Hooks Instead of Overrides

Before overriding a template, check if you can use hooks instead. Hooks are cleaner and less likely to cause issues after theme updates.

Adding Content via Hooks

<?php
/**
 * Add content using hooks (in child theme functions.php)
 */

// Add content before the header
add_action( 'buddyx_before_header', function() {
    echo '<div class="announcement-bar">Free shipping on orders over $50!</div>';
} );

// Add content after the main content
add_action( 'buddyx_after_main_content', function() {
    echo '<div class="newsletter-cta">Subscribe to our newsletter!</div>';
} );

// Add content to footer
add_action( 'buddyx_footer_bottom', function() {
    echo '<p class="custom-copyright">Custom copyright text here</p>';
} );

When to Use Hooks vs Template Overrides

Use Hooks When...	Use Template Override When...
Adding content before/after sections	Changing HTML structure
Inserting widgets or shortcodes	Reordering major sections
Adding simple text or elements	Removing default elements
Minor additions to pages	Complete layout redesign

See the Hooks and Filters documentation for a complete list of available hooks.

Template Override Best Practices

1. Copy Complete Files

Always copy the entire template file, not just parts. This ensures all required code is present.

2. Check After Theme Updates

After BuddyX Pro updates, compare your overridden templates with the new parent versions. Important changes may need to be incorporated.

3. Comment Your Changes

Add comments to document your customizations:

<?php
/**
 * Custom single post template
 *
 * Modifications from parent:
 * - Added custom author box (line 45-55)
 * - Changed featured image size (line 20)
 * - Added reading time display (line 30)
 *
 * @modified 2024-01-15
 */

4. Use Template Parts for Reusable Code

Create custom template parts for code you'll use in multiple places:

Create: /buddyx-pro-child/template-parts/custom/author-box.php

<?php
/**
 * Custom author box template part
 */
$author_id = get_the_author_meta( 'ID' );
?>
<div class="custom-author-box">
    <?php echo get_avatar( $author_id, 100 ); ?>
    <div class="author-info">
        <h4><?php the_author(); ?></h4>
        <p><?php the_author_meta( 'description' ); ?></p>
    </div>
</div>

Use in templates:

<?php get_template_part( 'template-parts/custom/author-box' ); ?>

5. Test on Staging First

Always test template overrides on a staging site before deploying to production.

Troubleshooting

Child theme not appearing:

Check Template: buddyx-pro matches parent folder name exactly
Ensure style.css has proper header format
Verify the child theme folder is in /wp-content/themes/

Styles not loading:

Check functions.php enqueue code is correct
Clear browser cache and site cache
Verify parent style dependency in enqueue function

Template override not working:

Confirm file path matches exactly (including subfolder structure)
Clear any caching plugins
Check for PHP errors in the template file
Verify file permissions (644 for files)

BuddyPress templates not overriding:

Ensure folder structure is buddyx-pro-child/buddypress/
Check BuddyPress template compatibility
Clear BuddyPress template cache

White screen after override:

Enable WP_DEBUG to see errors
Check for PHP syntax errors
Verify all required functions exist
Restore original template and override incrementally

Hooks and Filters - Complete list of theme hooks
Template Hierarchy - WordPress template loading order
CSS Customization - Styling without template overrides

Got a question? We're a friendly team - happy to help.

Visit our Documentation Portal
Email us at support@wbcomdesigns.com

Customization Guide

Comprehensive guide to customizing BuddyX Pro theme appearance and functionality.

Getting Started

Prerequisites

Active BuddyX Pro installation
Child theme created (recommended)
Basic PHP, CSS, and JavaScript knowledge
FTP/SFTP access or File Manager
Code editor (VS Code, Sublime Text, etc.)

Recommended Setup

buddyx-pro-child/
├── style.css              # Custom CSS
├── functions.php          # Custom functions
├── assets/
│   ├── css/
│   │   └── custom.css    # Additional CSS
│   ├── js/
│   │   └── custom.js     # Custom JavaScript
│   └── images/           # Custom images
└── inc/
    └── customizations.php # Organized customizations

CSS Customization

Method 1: Customizer Additional CSS

Location: Appearance → Customize → Additional CSS

Quick CSS changes without creating files:

/* Override the brand / accent color (default #ee4036) */
:root {
    --bx-color-accent: #007bff;
    --bx-color-link: #007bff;
    --bx-color-link-hover: #0056b3;
}

/* Custom header styling */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modify button styles */
.button,
button[type="submit"] {
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Method 2: Child Theme style.css

Location: buddyx-pro-child/style.css

For permanent, version-controlled changes:

/*
Theme Name: BuddyX Pro Child
Template: buddyx-pro
*/

/* ==========================================================================
   Typography
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    max-width: 1200px;
}

.site-wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1rem 0;
}

.site-header .site-logo-wrapper img {
    max-width: 180px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation ul {
    gap: 1.5rem;
}

.main-navigation a {
    color: #ffffff;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.main-navigation a:hover {
    opacity: 0.8;
}

/* ==========================================================================
   BuddyPress
   ========================================================================== */

#buddypress .activity-list .activity-content .activity-inner {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
}

#buddypress .activity-meta a {
    color: var(--bx-color-link);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 3rem 0 1rem;
}

.site-footer a {
    color: #ffffff;
}

Method 3: Separate CSS File

File: buddyx-pro-child/assets/css/custom.css

Enqueue in functions.php:

function buddyx_child_custom_styles() {
    wp_enqueue_style(
        'buddyx-child-custom',
        get_stylesheet_directory_uri() . '/assets/css/custom.css',
        array( 'buddyxpro-global' ), // parent theme's global stylesheet handle
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'buddyx_child_custom_styles', 30 );

The parent theme's global stylesheet is registered with the handle buddyxpro-global (see the CSS manifest in inc/Styles/Component.php). Depend on it so your overrides load after the theme's own CSS.

CSS Variables Override

BuddyX Pro 5.1.x emits a single set of design tokens as CSS custom properties on the <html> element. The Tokens component (inc/Tokens/Component.php) maps color and dimension customizer settings onto canonical --bx-color-* and --bx-radius-* variables (plus a thin layer of legacy --color-* / --global-* aliases kept only for pre-5.1.0 back-compat).

Always target the --bx-* tokens in custom CSS. There are no --color-primary, --font-primary, or --spacing-small variables - those never existed in this theme.

Because tokens are emitted on <html>, override them there (or on :root, which resolves to the same element). The theme also emits a separate dark-mode block, so scope dark overrides accordingly.

:root {
    /* Brand / accent (default #ee4036) */
    --bx-color-accent: #007bff;

    /* Body surfaces + text */
    --bx-color-bg: #ffffff;         /* page background */
    --bx-color-bg-page: #ffffff;    /* boxed content background */
    --bx-color-bg-elevated: #ffffff;/* cards / boxes */
    --bx-color-bg-muted: #f5f6f8;   /* secondary surface */
    --bx-color-fg: #333333;         /* body text */
    --bx-color-fg-muted: #6b7280;   /* muted text */
    --bx-color-heading: #1a1a1a;

    /* Links */
    --bx-color-link: #007bff;
    --bx-color-link-hover: #0056b3;

    /* Buttons */
    --bx-color-button-bg: #007bff;
    --bx-color-button-bg-hover: #0056b3;
    --bx-color-button-fg: #ffffff;
    --bx-color-button-fg-hover: #ffffff;

    /* Borders */
    --bx-color-border: #e5e7eb;

    /* Radius (dimension tokens) */
    --bx-radius-global: 8px;   /* default 8px */
    --bx-radius-button: 6px;   /* default 6px */
    --bx-radius-form: 6px;     /* default 6px */

    /* Layout dimensions */
    --bx-sidebar-width: 260px;                 /* default 260px */
    --bx-spacing-single-post-elements: 32px;   /* default 32px */
}

Dark mode is driven by the same token names re-emitted for the dark color scheme, so a color you override on :root above affects light mode only. The theme applies dark mode via the [data-bx-mode="dark"] attribute on <html> (with a body.buddyx-dark-theme fallback). Override dark-mode tokens under that selector:

:root[data-bx-mode="dark"],
body.buddyx-dark-theme {
    --bx-color-accent: #4da3ff;
    --bx-color-bg: #14161a;
    --bx-color-fg: #e6e6e6;
}

There is no separate typography custom property. Fonts are applied by the Fonts component from the customizer typography settings; to change a font in a child theme, set font-family directly on the elements you want (for example body, h1, h2, h3).

For the full canonical token list, see the $simple_color_tokens and $dimension_defaults maps in inc/Tokens/Component.php.

JavaScript Customization

Adding Custom JavaScript

File: buddyx-pro-child/assets/js/custom.js

/**
 * BuddyX Pro Child Theme JavaScript
 *
 * @package BuddyX Pro Child
 */

(function($) {
    'use strict';

    /**
     * Document ready
     */
    $(document).ready(function() {
        console.log('BuddyX Child Theme Loaded');

        // Smooth scroll to anchor links
        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            var target = $(this.hash);
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 80
                }, 600);
            }
        });

        // Add active class to current menu item
        var currentUrl = window.location.href;
        $('.main-navigation a').each(function() {
            if (this.href === currentUrl) {
                $(this).parent().addClass('active');
            }
        });

        // Custom search toggle
        $('#custom-search-toggle').on('click', function(e) {
            e.preventDefault();
            $('.search-form-wrapper').toggleClass('active');
        });

        // Lazy load images
        if ('loading' in HTMLImageElement.prototype) {
            $('img[data-src]').each(function() {
                $(this).attr('src', $(this).attr('data-src'));
                $(this).removeAttr('data-src');
            });
        }
    });

    /**
     * Window load
     */
    $(window).on('load', function() {
        // Remove preloader
        $('.site-loader').fadeOut(300);
    });

    /**
     * Window scroll
     */
    $(window).on('scroll', function() {
        var scroll = $(window).scrollTop();

        // Sticky header
        if (scroll >= 100) {
            $('.site-header').addClass('sticky');
        } else {
            $('.site-header').removeClass('sticky');
        }

        // Back to top button
        if (scroll >= 300) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });

    /**
     * Back to top
     */
    $('.back-to-top').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: 0 }, 600);
    });

})(jQuery);

Enqueue in functions.php:

function buddyx_child_custom_scripts() {
    wp_enqueue_script(
        'buddyx-child-custom',
        get_stylesheet_directory_uri() . '/assets/js/custom.js',
        array( 'jquery' ),
        '1.0.0',
        true
    );

    // Pass PHP data to JavaScript
    wp_localize_script(
        'buddyx-child-custom',
        'buddyxChildData',
        array(
            'ajaxurl'   => admin_url( 'admin-ajax.php' ),
            'nonce'     => wp_create_nonce( 'buddyx_child_nonce' ),
            'siteUrl'   => get_site_url(),
            'themeUrl'  => get_stylesheet_directory_uri(),
            'isLoggedIn' => is_user_logged_in(),
        )
    );
}
add_action( 'wp_enqueue_scripts', 'buddyx_child_custom_scripts' );

AJAX Example

JavaScript:

// custom.js
$('#custom-form').on('submit', function(e) {
    e.preventDefault();

    var formData = {
        action: 'buddyx_child_ajax_action',
        nonce: buddyxChildData.nonce,
        data: $(this).serialize()
    };

    $.ajax({
        url: buddyxChildData.ajaxurl,
        type: 'POST',
        data: formData,
        beforeSend: function() {
            $('.loading').show();
        },
        success: function(response) {
            if (response.success) {
                alert(response.data.message);
            } else {
                alert('Error: ' + response.data.message);
            }
        },
        complete: function() {
            $('.loading').hide();
        }
    });
});

PHP Handler:

// functions.php
function buddyx_child_ajax_handler() {
    check_ajax_referer( 'buddyx_child_nonce', 'nonce' );

    // Process form data
    parse_str( $_POST['data'], $form_data );

    // Your logic here
    $result = true; // Your processing result

    if ( $result ) {
        wp_send_json_success( array(
            'message' => __( 'Success!', 'buddyx-pro-child' ),
        ) );
    } else {
        wp_send_json_error( array(
            'message' => __( 'Error occurred.', 'buddyx-pro-child' ),
        ) );
    }
}
add_action( 'wp_ajax_buddyx_child_ajax_action', 'buddyx_child_ajax_handler' );
add_action( 'wp_ajax_nopriv_buddyx_child_ajax_action', 'buddyx_child_ajax_handler' );

PHP Customization

Custom Functions

File: buddyx-pro-child/inc/customizations.php

<?php
/**
 * Custom Theme Functions
 *
 * @package BuddyX Pro Child
 */

/**
 * Add custom body classes
 */
function buddyx_child_body_classes( $classes ) {
    // Add page-specific classes
    if ( is_page( 'about' ) ) {
        $classes[] = 'page-about';
    }

    // Add user role class
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        $classes[] = 'user-role-' . $user->roles[0];
    }

    // Add custom class based on customizer setting
    if ( get_theme_mod( 'custom_layout', false ) ) {
        $classes[] = 'custom-layout';
    }

    return $classes;
}
add_filter( 'body_class', 'buddyx_child_body_classes' );

/**
 * Custom excerpt length
 */
function buddyx_child_excerpt_length( $length ) {
    if ( is_front_page() ) {
        return 30;
    }
    return 55;
}
add_filter( 'excerpt_length', 'buddyx_child_excerpt_length', 999 );

/**
 * Custom excerpt more
 */
function buddyx_child_excerpt_more( $more ) {
    return '... <a class="read-more" href="' . get_permalink() . '">' . __( 'Read More', 'buddyx-pro-child' ) . '</a>';
}
add_filter( 'excerpt_more', 'buddyx_child_excerpt_more' );

/**
 * Add custom image sizes
 */
function buddyx_child_image_sizes() {
    add_image_size( 'custom-thumbnail', 300, 200, true );
    add_image_size( 'custom-featured', 800, 600, true );
    add_image_size( 'custom-hero', 1920, 1080, true );
}
add_action( 'after_setup_theme', 'buddyx_child_image_sizes' );

/**
 * Modify main query
 */
function buddyx_child_pre_get_posts( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }

    // Show 12 posts per page on archive
    if ( is_archive() ) {
        $query->set( 'posts_per_page', 12 );
    }

    // Exclude category from home
    if ( $query->is_home() ) {
        $query->set( 'cat', '-5' ); // Exclude category ID 5
    }
}
add_action( 'pre_get_posts', 'buddyx_child_pre_get_posts' );

/**
 * Custom post meta
 */
function buddyx_child_post_meta() {
    if ( ! is_single() ) {
        return;
    }

    echo '<div class="custom-post-meta">';
    echo '<span class="author">' . get_the_author() . '</span>';
    echo '<span class="date">' . get_the_date() . '</span>';
    echo '<span class="comments">' . get_comments_number() . ' Comments</span>';
    echo '</div>';
}
add_action( 'buddyx_after_content', 'buddyx_child_post_meta' );

Load in functions.php:

// Load customizations
require_once get_stylesheet_directory() . '/inc/customizations.php';

// functions.php
function buddyx_child_register_sidebars() {
    register_sidebar( array(
        'name'          => __( 'Custom Sidebar', 'buddyx-pro-child' ),
        'id'            => 'custom-sidebar',
        'description'   => __( 'Custom widget area', 'buddyx-pro-child' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'buddyx_child_register_sidebars' );

// In template file or via hook
<?php
if ( is_active_sidebar( 'custom-sidebar' ) ) {
    dynamic_sidebar( 'custom-sidebar' );
}
?>

// inc/widgets/custom-widget.php
class BuddyX_Custom_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'buddyx_custom_widget',
            __( 'Custom Widget', 'buddyx-pro-child' ),
            array(
                'description' => __( 'Display custom content', 'buddyx-pro-child' ),
                'classname'   => 'buddyx-custom-widget',
            )
        );
    }

    public function widget( $args, $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        $content = ! empty( $instance['content'] ) ? $instance['content'] : '';

        echo $args['before_widget'];

        if ( ! empty( $title ) ) {
            echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
        }

        echo '<div class="widget-content">';
        echo wp_kses_post( wpautop( $content ) );
        echo '</div>';

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        $content = ! empty( $instance['content'] ) ? $instance['content'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
                <?php esc_html_e( 'Title:', 'buddyx-pro-child' ); ?>
            </label>
            <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'content' ) ); ?>">
                <?php esc_html_e( 'Content:', 'buddyx-pro-child' ); ?>
            </label>
            <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'content' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'content' ) ); ?>" rows="5"><?php echo esc_textarea( $content ); ?></textarea>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['content'] = wp_kses_post( $new_instance['content'] );
        return $instance;
    }
}

function buddyx_child_register_custom_widget() {
    register_widget( 'BuddyX_Custom_Widget' );
}
add_action( 'widgets_init', 'buddyx_child_register_custom_widget' );

Customizer Integration

Add Customizer Panel

// inc/customizer.php
function buddyx_child_customize_register( $wp_customize ) {

    // Add panel
    $wp_customize->add_panel( 'buddyx_child_panel', array(
        'title'       => __( 'Child Theme Options', 'buddyx-pro-child' ),
        'description' => __( 'Customize child theme settings', 'buddyx-pro-child' ),
        'priority'    => 30,
    ) );

    // Add section
    $wp_customize->add_section( 'buddyx_child_colors', array(
        'title' => __( 'Custom Colors', 'buddyx-pro-child' ),
        'panel' => 'buddyx_child_panel',
    ) );

    // Add setting: Primary color
    $wp_customize->add_setting( 'child_primary_color', array(
        'default'           => '#007bff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage',
    ) );

    // Add control
    $wp_customize->add_control( new WP_Customize_Color_Control(
        $wp_customize,
        'child_primary_color',
        array(
            'label'   => __( 'Primary Color', 'buddyx-pro-child' ),
            'section' => 'buddyx_child_colors',
        )
    ) );

    // Add setting: Toggle option
    $wp_customize->add_setting( 'child_enable_feature', array(
        'default'           => false,
        'sanitize_callback' => 'wp_validate_boolean',
    ) );

    $wp_customize->add_control( 'child_enable_feature', array(
        'label'   => __( 'Enable Custom Feature', 'buddyx-pro-child' ),
        'section' => 'buddyx_child_colors',
        'type'    => 'checkbox',
    ) );

    // Add setting: Text option
    $wp_customize->add_setting( 'child_custom_text', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'child_custom_text', array(
        'label'   => __( 'Custom Text', 'buddyx-pro-child' ),
        'section' => 'buddyx_child_colors',
        'type'    => 'text',
    ) );
}
add_action( 'customize_register', 'buddyx_child_customize_register' );

Use Customizer Values

// In template or functions
$primary_color = get_theme_mod( 'child_primary_color', '#007bff' );
$enable_feature = get_theme_mod( 'child_enable_feature', false );
$custom_text = get_theme_mod( 'child_custom_text', '' );

// Generate CSS from customizer
function buddyx_child_customizer_css() {
    $primary_color = get_theme_mod( 'child_primary_color', '#007bff' );

    $css = "
        :root {
            --child-primary: {$primary_color};
        }
        .button-primary {
            background-color: {$primary_color};
        }
    ";

    wp_add_inline_style( 'buddyxpro-global', $css );
}
add_action( 'wp_enqueue_scripts', 'buddyx_child_customizer_css', 50 );

Shortcode Creation

Simple Shortcode

// functions.php
function buddyx_child_button_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( array(
        'url'   => '#',
        'style' => 'primary',
        'size'  => 'medium',
        'icon'  => '',
    ), $atts );

    $class = 'btn btn-' . esc_attr( $atts['style'] ) . ' btn-' . esc_attr( $atts['size'] );

    $icon_html = '';
    if ( ! empty( $atts['icon'] ) ) {
        $icon_html = '<i class="fa fa-' . esc_attr( $atts['icon'] ) . '"></i> ';
    }

    return sprintf(
        '<a href="%s" class="%s">%s%s</a>',
        esc_url( $atts['url'] ),
        esc_attr( $class ),
        $icon_html,
        esc_html( $content )
    );
}
add_shortcode( 'button', 'buddyx_child_button_shortcode' );

// Usage: [button url="/signup/" style="primary" icon="user"]Sign Up[/button]

Advanced Shortcode with Query

function buddyx_child_recent_posts_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'posts'    => 3,
        'category' => '',
        'layout'   => 'grid',
    ), $atts );

    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => intval( $atts['posts'] ),
        'post_status'    => 'publish',
    );

    if ( ! empty( $atts['category'] ) ) {
        $args['category_name'] = sanitize_text_field( $atts['category'] );
    }

    $query = new WP_Query( $args );

    if ( ! $query->have_posts() ) {
        return '';
    }

    ob_start();
    ?>
    <div class="recent-posts layout-<?php echo esc_attr( $atts['layout'] ); ?>">
        <?php
        while ( $query->have_posts() ) {
            $query->the_post();
            ?>
            <article class="recent-post-item">
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="post-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail( 'medium' ); ?>
                        </a>
                    </div>
                <?php endif; ?>
                <div class="post-content">
                    <h3 class="post-title">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h3>
                    <div class="post-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </div>
            </article>
            <?php
        }
        ?>
    </div>
    <?php
    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode( 'recent_posts', 'buddyx_child_recent_posts_shortcode' );

// Usage: [recent_posts posts="5" category="news" layout="grid"]

Translation/Internationalization

Setup Translation

// functions.php
function buddyx_child_load_textdomain() {
    load_child_theme_textdomain(
        'buddyx-pro-child',
        get_stylesheet_directory() . '/languages'
    );
}
add_action( 'after_setup_theme', 'buddyx_child_load_textdomain' );

Translatable Strings

// Use translation functions
__( 'Text', 'buddyx-pro-child' );                    // Return translated
_e( 'Text', 'buddyx-pro-child' );                    // Echo translated
esc_html__( 'Text', 'buddyx-pro-child' );            // Return and escape
esc_html_e( 'Text', 'buddyx-pro-child' );            // Echo and escape
esc_attr__( 'Text', 'buddyx-pro-child' );            // Return for attributes

// With placeholders
sprintf(
    __( 'Hello %s!', 'buddyx-pro-child' ),
    $name
);

// Plurals
_n(
    '%s item',
    '%s items',
    $count,
    'buddyx-pro-child'
);

Generate Translation Files

# Install WP-CLI i18n command
wp package install wp-cli/i18n-command

# Generate POT file
wp i18n make-pot . languages/buddyx-pro-child.pot

# Update PO files
wp i18n update-po languages/buddyx-pro-child.pot languages/

Performance Optimization

Conditional Script Loading

function buddyx_child_conditional_scripts() {
    // Load only on specific pages
    if ( is_page( 'contact' ) ) {
        wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY', array(), null, true );
    }

    // Load only for logged-in users
    if ( is_user_logged_in() ) {
        wp_enqueue_script( 'user-dashboard', get_stylesheet_directory_uri() . '/assets/js/dashboard.js', array( 'jquery' ), '1.0.0', true );
    }

    // Load only on BuddyPress pages
    if ( function_exists( 'is_buddypress' ) && is_buddypress() ) {
        wp_enqueue_script( 'bp-custom', get_stylesheet_directory_uri() . '/assets/js/buddypress-custom.js', array( 'jquery' ), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'buddyx_child_conditional_scripts' );

Defer/Async Scripts

function buddyx_child_defer_scripts( $tag, $handle, $src ) {
    // Defer non-critical scripts
    $defer_scripts = array( 'buddyx-child-custom', 'analytics' );

    if ( in_array( $handle, $defer_scripts, true ) ) {
        return str_replace( ' src', ' defer src', $tag );
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'buddyx_child_defer_scripts', 10, 3 );

Image Optimization

// Add WebP support
function buddyx_child_upload_mimes( $mimes ) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}
add_filter( 'upload_mimes', 'buddyx_child_upload_mimes' );

// Lazy load images
function buddyx_child_lazy_load_images( $content ) {
    if ( is_feed() || is_admin() ) {
        return $content;
    }

    $content = preg_replace( '/<img(.*?)src=/i', '<img$1loading="lazy" src=', $content );

    return $content;
}
add_filter( 'the_content', 'buddyx_child_lazy_load_images' );

Security Enhancements

Nonce Verification

// Form with nonce
function buddyx_child_custom_form() {
    ?>
    <form method="post" action="">
        <?php wp_nonce_field( 'buddyx_child_form_action', 'buddyx_child_nonce' ); ?>
        <input type="text" name="custom_field" />
        <button type="submit">Submit</button>
    </form>
    <?php
}

// Process form
function buddyx_child_process_form() {
    if ( ! isset( $_POST['buddyx_child_nonce'] ) || ! wp_verify_nonce( $_POST['buddyx_child_nonce'], 'buddyx_child_form_action' ) ) {
        wp_die( __( 'Security check failed', 'buddyx-pro-child' ) );
    }

    $custom_field = sanitize_text_field( $_POST['custom_field'] );
    // Process data
}

Sanitization and Validation

// Sanitize different input types
$text = sanitize_text_field( $_POST['text'] );
$email = sanitize_email( $_POST['email'] );
$url = esc_url_raw( $_POST['url'] );
$html = wp_kses_post( $_POST['html'] );
$int = absint( $_POST['number'] );

// Validate email
if ( ! is_email( $email ) ) {
    // Invalid email
}

// Validate URL
if ( ! filter_var( $url, FILTER_VALIDATE_URL ) ) {
    // Invalid URL
}

Best Practices Checklist

Development

Use child theme for all customizations
Prefix all custom functions
Follow WordPress Coding Standards
Comment your code
Use version control (Git)
Test on multiple devices
Check browser compatibility
Validate HTML/CSS

Security

Escape all output
Sanitize all input
Verify nonces
Check capabilities
Use prepared statements for database queries
Don't trust user input

Performance

Minimize HTTP requests
Optimize images
Use conditional loading
Defer non-critical scripts
Enable caching
Minimize CSS/JS

Accessibility

Use semantic HTML
Add alt text to images
Ensure keyboard navigation
Test with screen readers
Use ARIA labels
Maintain color contrast

Theme Architecture
Hooks & Filters Reference
Creating a Child Theme
Template Hierarchy

BuddyX Pro Functions Reference

Key public functions available in BuddyX Pro for theme and child-theme developers.

Every function listed here is defined in the shipped 5.1.4 code. File paths are exact. Function names that look misspelled (for example buddyx_login_reigister_popup) are reproduced verbatim because that is the real symbol you must call.

Overview

BuddyX Pro exposes helper functions for:

Template rendering (breadcrumbs, sub-header, comments, reading time)
Login / registration flows and BuddyPress integration
Dark / light color-mode handling
Plugin-integration containers (Dokan, WooCommerce, LearnDash, FluentCart)

Functions live in inc/extra.php, the inc/Helpers/* classes-of-functions, inc/class-buddyx-breadcrumbs.php, and the per-integration files under inc/compatibility/. Components (namespaced classes under inc/*/Component.php) are covered in Theme Architecture.

Core Theme Function

buddyxpro()

File: inc/functions.php

Main theme accessor. Returns the shared Template_Tags instance.

function buddyxpro(): BuddyxPro\BuddyxPro\Template_Tags;

Usage:

// Theme version
$version = buddyxpro()->get_version();

// Asset version (filemtime in debug, theme version in production)
$asset_version = buddyxpro()->get_asset_version( $filepath );

// Theme asset URL or inline content
$logo_url    = buddyxpro()->get_theme_asset( 'logo.svg', 'svg' );
$svg_content = buddyxpro()->get_theme_asset( 'icon.svg', 'svg', true );

Template Tag Methods

Accessible through buddyxpro()->method(). get_version(), get_asset_version(), and get_theme_asset() are direct methods on inc/Template_Tags.php. Sidebar / nav helpers such as display_left_sidebar(), is_right_sidebar_active(), display_primary_nav_menu(), is_amp(), the_comments(), print_styles(), and print_scripts() are registered template tags dispatched through the same object.

get_version()

buddyxpro()->get_version(): string;

get_asset_version()

buddyxpro()->get_asset_version( string $filepath ): string;

get_theme_asset()

buddyxpro()->get_theme_asset(
    string $filename,
    string $type = 'images',
    bool   $content = false
): ?string;

Name	Type	Description
`$filename`	string	Asset filename
`$type`	string	Asset subdirectory (`images`, `svg`, ...)
`$content`	bool	Return file content instead of URL

// Image URL
$logo = buddyxpro()->get_theme_asset( 'logo.webp', 'images' );

// Inline SVG content
$icon = buddyxpro()->get_theme_asset( 'icon.svg', 'svg', true );

Layout & Sub-Header Functions

buddyx_site_loader()

File: inc/extra.php

Output the site preloader HTML (rendered when the loader option is enabled).

function buddyx_site_loader(): void;

buddyx_sub_header()

File: inc/extra.php

Render the page sub-header (page-title area). Hooked to the buddyx_sub_header action by default.

function buddyx_sub_header(): void;

buddyx_maybe_render_sub_header()

File: inc/extra.php

Conditionally render the sub-header based on per-page and customizer settings.

function buddyx_maybe_render_sub_header(): void;

buddyx_is_sub_header_enabled()

File: inc/extra.php

Whether the sub-header is enabled for the current view.

function buddyx_is_sub_header_enabled(): bool;

Note: there is no buddyx_site_layout() or buddyx_sidebar_option() function. Read the layout and sidebar directly with get_theme_mod() (for example get_theme_mod( 'site_layout', 'wide' ), get_theme_mod( 'global_sidebar_option', 'right' )), or use the buddyxpro()->display_left_sidebar() / is_right_sidebar_active() template tags.

buddyx_login_reigister_popup()

File: inc/Helpers/Login_Forms.php

Output the login / register popup modal markup. (The spelling is intentional - this is the real function name.)

function buddyx_login_reigister_popup(): void;

buddyx_signin_form()

File: inc/Helpers/Login_Forms.php

AJAX handler for the sign-in form (username/email + password, remember me, redirect, error messages).

function buddyx_signin_form(): void;

buddyx_signup_form()

File: inc/Helpers/Login_Forms.php

AJAX handler for the registration form (validation, password confirmation, BuddyPress integration).

function buddyx_signup_form(): void;

buddyx_register_new_user()

File: inc/Helpers/Login_Forms.php

function buddyx_register_new_user( $user_login, $user_email, $user_pass );

Name	Type	Description
`$user_login`	string	Username
`$user_email`	string	Email address
`$user_pass`	string	Password

Returns: User ID (int) on success, WP_Error on failure.

buddyx_get_buddypress_fields()

File: inc/Helpers/Login_Forms.php

Get the xProfile fields configured for the registration form.

function buddyx_get_buddypress_fields(): array;

BuddyPress Functions

buddyx_buddypress_active()

File: inc/Helpers/Login_Forms.php

Check whether BuddyPress is active.

function buddyx_buddypress_active(): bool;

if ( buddyx_buddypress_active() ) {
    // BuddyPress-specific code
}

buddyx_BuddyPress() still exists as a deprecated backward-compatible alias of buddyx_buddypress_active(). Do not use it in new code.

buddyx_filter_activity_content()

File: inc/Helpers/Activity_Functions.php

Enhance activity-stream content (joined-group, friendship, avatar, and cover-image activities).

function buddyx_filter_activity_content(): void;

buddyx_user_profile_menu()

File: inc/extra.php

Output the user profile dropdown menu in the header.

function buddyx_user_profile_menu(): void;

buddyx_ajax_addremove_friend()

File: inc/extra.php

AJAX handler for add / remove friend actions. Registered on the wp_ajax_buddyx_ajax_addremove_friend action.

function buddyx_ajax_addremove_friend(): void;

Dark / Light Color-Mode Functions

buddyx_resolve_color_mode()

File: inc/Helpers/Dark_Mode.php

Resolve the active color mode (light, dark, or auto) for the current request.

function buddyx_resolve_color_mode(): string;

buddyx_save_dark_mode()

File: inc/Helpers/Dark_Mode.php

AJAX handler that persists the visitor's color-mode preference. Registered on wp_ajax_buddyx_save_dark_mode.

function buddyx_save_dark_mode(): void;

buddyx_color_mode_body_class()

File: inc/Helpers/Dark_Mode.php

Add the color-mode body class.

function buddyx_color_mode_body_class( array $classes ): array;

The color-mode toggle UI itself is rendered by the Color_Mode_Toggle component (inc/Color_Mode_Toggle/Component.php) on the buddyx_header_actions hook. There is no buddyx_mode_switch() or buddyx_is_dark_mode() function.

Comment Functions

buddyx_pro_post_comment_box()

File: inc/extra.php

Output the post comment form (with reactions).

function buddyx_pro_post_comment_box(): void;

buddyx_pro_comments_callback()

File: inc/extra.php

Custom comment-display callback for wp_list_comments().

function buddyx_pro_comments_callback( $comment, $args, $depth ): void;

buddyx_panel_callback()

File: inc/Helpers/Side_Panel.php

Output the side-panel content.

function buddyx_panel_callback(): void;

buddyx_menu_icons_settings()

File: inc/Helpers/Side_Panel.php

Filter the Menu Icons plugin settings.

function buddyx_menu_icons_settings( $settings ): array;

buddyx_site_menu_icon()

File: inc/extra.php

Render the header menu-icon actions area (search, cart, and the buddyx_header_actions hook).

function buddyx_site_menu_icon(): void;

Reading Time Functions

buddyxpro_get_reading_time_minutes()

File: inc/extra.php

Estimate the reading time (in whole minutes) for a post.

function buddyxpro_get_reading_time_minutes( $post = null ): int;

Name	Type	Description
`$post`	int\|WP_Post\|null	Post to measure. Defaults to the current post.

The result is filterable via buddyxpro_reading_time_minutes.

buddyxpro_render_reading_time_meta()

File: inc/extra.php

Echo the reading-time meta markup for the current post.

function buddyxpro_render_reading_time_meta(): void;

buddyx_get_breadcrumb()

File: inc/class-buddyx-breadcrumbs.php

Render (or return) the breadcrumb trail. Wrapper around the BuddyX_Breadcrumbs class.

function buddyx_get_breadcrumb( $echo = true );

Name	Type	Description
`$echo`	bool	Echo the trail (`true`, default) or return it as a string (`false`).

The default args are filterable via buddyx_breadcrumb_trail_args.

// Echo the breadcrumb
buddyx_get_breadcrumb();

// Capture it as a string
$crumbs = buddyx_get_breadcrumb( false );

buddyx_attr()

File: inc/class-buddyx-breadcrumbs.php

Build a contextual HTML attributes string (filtered through buddyx_attr_{$context}).

function buddyx_attr( $context, $attributes = array(), $args = array() ): string;

bbPress Functions

buddyx_bbp_get_reply_avtar()

File: inc/extra.php

Get reply-author avatars for a bbPress topic. (Spelling avtar is the real symbol.)

function buddyx_bbp_get_reply_avtar( $topic_id = 0 ): array;

Dokan Functions

File: inc/compatibility/dokan/dokan-functions.php (loaded only when Dokan is active)

buddyx_store_container_open()

Open the Dokan store-page container wrapper.

function buddyx_store_container_open(): void;

buddyx_store_container_close()

Close the Dokan store-page container wrapper.

function buddyx_store_container_close(): void;

LearnDash Functions

File: inc/compatibility/learndash/learndash-functions.php (loaded only when LearnDash is active)

buddyx_learndash_single_course_header()

Render the single-course header.

function buddyx_learndash_single_course_header(): void;

buddyx_learndash_instructor_header()

Render the instructor profile header.

function buddyx_learndash_instructor_header(): void;

buddyx_learndash_lms_get_course_participants()

AJAX handler that returns course participants. Registered on wp_ajax_buddyx_learndash_lms_get_course_participants.

function buddyx_learndash_lms_get_course_participants(): void;

Widget files live in inc/widgets/ and are registered on widgets_init.

BP_BUDDYX_BP_Login_Widget

File: inc/widgets/login-widget.php

BuddyX login-form widget.

class BP_BUDDYX_BP_Login_Widget extends WP_Widget;

BP_BuddyxPro_Profile_Completion_Widget

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

BuddyPress profile-completion widget.

class BP_BuddyxPro_Profile_Completion_Widget extends WP_Widget;

LD_Course_Features_Widget

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

LearnDash featured-course widget.

class LD_Course_Features_Widget extends WP_Widget;

BuddyxPro_WCV_Widget_Vendor_Profile

File: inc/widgets/class-vendor-profile-widget.php

WC Vendors store / vendor-profile widget (loaded only when a supported marketplace plugin is active).

class BuddyxPro_WCV_Widget_Vendor_Profile extends WC_Widget;

AJAX Actions

Action	Handler	Registered in
`buddyx-signin-form`	`buddyx_signin_form()`	`inc/Helpers/Login_Forms.php`
`buddyx-signup-form`	`buddyx_signup_form()`	`inc/Helpers/Login_Forms.php`
`buddyx_save_dark_mode`	`buddyx_save_dark_mode()`	`inc/Helpers/Dark_Mode.php`
`buddyx_ajax_addremove_friend`	`buddyx_ajax_addremove_friend()`	`inc/extra.php`
`buddyx_theme_unread_notification`	`buddyx_set_unread_notification()`	`inc/compatibility/buddypress/buddypress-functions.php`
`buddyx_learndash_lms_get_course_participants`	`buddyx_learndash_lms_get_course_participants()`	`inc/compatibility/learndash/learndash-functions.php`
`buddyxpro_install_plugin`	`Plugin_Installer\Component::ajax_install_plugin()`	`inc/Plugin_Installer/Component.php`
`buddyx_lms_toggle_theme_color`	`Accessibility\Component::toggle_theme_color()`	`inc/Accessibility/Component.php`

Example AJAX call:

The theme localizes the global front-end script (buddyxpro-custom) with a buddyx_data object that exposes ajax_url and the color-mode nonce:

jQuery.ajax( {
    url:  buddyx_data.ajax_url,
    type: 'POST',
    data: {
        action: 'buddyx_save_dark_mode',
        mode:   'dark',
        nonce:  buddyx_data.dark_mode_nonce
    },
    success: function ( response ) {
        console.log( response );
    }
} );

Reading Theme Options

BuddyX Pro stores its settings as standard theme mods. There is no buddyx_get_option() wrapper - read values with WordPress core get_theme_mod():

$layout  = get_theme_mod( 'site_layout', 'wide' );
$primary = get_theme_mod( 'site_primary_color', '#ee4036' );

Color and dimension theme mods are turned into --bx-color-* / --bx-radius-* CSS custom properties by the Tokens component - see the Customization Guide.

Constants

Constant	Value	Description
`BUDDYXPRO_MINIMUM_WP_VERSION`	`'6.5'`	Minimum WordPress version
`BUDDYXPRO_MINIMUM_PHP_VERSION`	`'8.0'`	Minimum PHP version

Both are defined in functions.php.

Theme Architecture - Component system and structure
Hooks & Filters Reference - Actions and filters
Template Hierarchy - Template and template-part map
Creating a Child Theme - Safe override patterns

Hooks & Filters Reference

Reference of the significant action hooks and filters the BuddyX Pro theme fires. Every hook listed here is fired (do_action) or applied (apply_filters) in the shipped 5.1.4 code. Plugin hooks the theme only listens to (core WordPress, BuddyPress, WooCommerce, LearnDash, etc.) are out of scope - see those projects' own references.

BuddyX Pro fires a large surface (roughly 55 own actions and 70 own filters). This page documents the ones you are most likely to hook. Grep the code for do_action( 'buddyx / apply_filters( 'buddyx to see the complete set.

Action Hooks

Document & Body Hooks

Fired from header.php and footer.php.

Hook	Fires
`buddyx_head_top`	Immediately inside `<head>`
`buddyx_head_bottom`	End of `<head>`, before `</head>`
`buddyx_body_top`	Right after `<body>` opens (also fires `buddyx_wp_body_open`)
`buddyx_page_top`	Top of `#page` wrapper
`buddyx_page_bottom`	Bottom of `#page`, before `wp_footer()`
`buddyx_body_bottom`	After `wp_footer()`, before `</body>`

add_action( 'buddyx_head_bottom', 'my_head_meta' );
function my_head_meta() {
    echo '<meta name="theme-color" content="#ee4036">';
}

Header Hooks

Fired from header.php and the header template parts.

Hook	Fires
`buddyx_header_before`	Before the `<header id="masthead">` element
`buddyx_header_wrapper_before`	Inside the header, before the inner wrapper
`buddyx_header_wrapper_after`	Inside the header, after the inner wrapper
`buddyx_header_after`	After the `</header>` element
`buddyx_header_actions`	Inside the desktop menu-icons area (search / cart / color-mode toggle)
`buddyx_mobile_menu_actions`	Inside the mobile navigation actions (`template-parts/header/navigation.php`)

There is no buddyx_header hook - that name is not fired anywhere in the theme. Use buddyx_header_actions to add header widgets. The Color_Mode_Toggle component hooks its toggle onto buddyx_header_actions at priority 50.

// Add a header widget next to the search / cart icons.
add_action( 'buddyx_header_actions', 'my_header_widget', 20 );
function my_header_widget() {
    echo '<div class="my-header-widget">Hi</div>';
}

Content Wrapper Hooks

The most widely used pair - fired around the main content area from every top-level template (index.php, single.php, page.php, archive.php, buddypress.php, bbpress.php, the FluentCart/LearnDash templates, etc.).

Hook	Fires
`buddyx_before_content`	Before the content container opens
`buddyx_after_content`	After the content container closes

add_action( 'buddyx_before_content', 'my_content_notice' );
function my_content_notice() {
    echo '<div class="my-notice">Custom content here</div>';
}

Sub-Header Hook

Hook	Fires
`buddyx_sub_header`	Page-title / sub-header area, after the site header

Default callback: buddyx_sub_header().

// Replace the default page header.
remove_action( 'buddyx_sub_header', 'buddyx_sub_header' );
add_action( 'buddyx_sub_header', 'my_page_header' );
function my_page_header() {
    echo '<div class="my-page-header">Custom Header</div>';
}

Entry / Loop Hooks

Fired from the template-parts/content/ and template-parts/layout/ parts.

Hook	Fires
`buddyx_entry_before`	Before an entry `<article>`
`buddyx_entry_after`	After an entry `<article>`
`buddyx_entry_content_before`	Before the entry content
`buddyx_entry_content_after`	After the entry content
`buddyx_entry_meta_after`	After the entry meta row
`buddyx_before_archive_loop`	Before the archive loop starts

add_action( 'buddyx_entry_content_after', 'my_after_post' );
function my_after_post() {
    if ( is_singular( 'post' ) ) {
        echo '<div class="author-bio">...</div>';
    }
}

Hook	Fires
`buddyx_before_breadcrumb`	Before the breadcrumb trail
`buddyx_after_breadcrumb`	After the breadcrumb trail

Fired from sidebar.php / sidebar-buddypress.php.

Hook	Fires
`buddyx_sidebar_before`	Before the sidebar widget area
`buddyx_sidebar_after`	After the sidebar widget area

Fired from footer.php and template-parts/footer/info.php.

Hook	Fires
`buddyx_footer_before`	Before the `<footer>` element
`buddyx_footer_after`	After the `<footer>` element
`buddyx_copyright_before`	Before the copyright row
`buddyx_copyright_after`	After the copyright row

add_action( 'buddyx_footer_before', 'my_prefooter' );
function my_prefooter() {
    echo '<div class="pre-footer">Newsletter signup</div>';
}

Side Panel Hooks

Fired from template-parts/header/buddyx-panel.php.

Hook	Fires
`buddyx_before_inner_panel`	Before the inner side-panel content
`buddyx_after_inner_panel`	After the inner side-panel content

Fired from the login/register form parts.

Hook	Fires
`buddyx_login_form_top` / `buddyx_login_form_bottom`	Top / bottom of the login form
`buddyx_register_form_top` / `buddyx_register_form_bottom`	Top / bottom of the registration form
`buddyxpro_recaptcha_after_login_form`	After the login form (reCAPTCHA seam)
`buddyxpro_recaptcha_after_register_form`	After the register form (reCAPTCHA seam)

Comment Hooks

Hook	Fires	Parameters
`buddyx_pro_post_comment_before`	Before the post comments section	-
`buddyx_pro_before_comment_replay`	Before the comment reply link	`$comment_id`, `$comment`
`buddyx_pro_after_comment_replay`	After the comment reply link	`$comment_id`, `$comment`

add_action( 'buddyx_pro_after_comment_replay', 'my_comment_actions', 10, 2 );
function my_comment_actions( $comment_id, $comment ) {
    echo '<button class="report-comment">Report</button>';
}

BuddyPress Directory Hooks

Hook	Fires
`buddyx_before_member_avatar_member_directory`	Before a member avatar in the members directory
`buddyx_before_group_avatar_group_directory`	Before a group avatar in the groups directory
`buddyx_before_item_meta` / `buddyx_after_item_meta`	Around directory item meta
`buddyx_buddypress_member_send_message_button_call`	Around the member "send message" button

Store / Marketplace Hooks

Fired from the Dokan store container (inc/compatibility/dokan/dokan-functions.php).

Hook	Fires
`buddyx_store_container_open`	Inside the store-page container open
`buddyx_store_container_close`	Inside the store-page container close

FluentCart Product Hooks

Fired from the FluentCart single-product template (all default priority 10).

Hook	Fires
`buddyx_fluentcart_before_product_content` / `buddyx_fluentcart_after_product_content`	Start / end of the product template
`buddyx_fluentcart_before_product_header` / `buddyx_fluentcart_after_product_header`	Around product title and meta
`buddyx_fluentcart_before_product_description` / `buddyx_fluentcart_after_product_description`	Around the product description
`buddyx_fluentcart_product_tabs`	Product tabs area
`buddyx_fluentcart_before_related_products` / `buddyx_fluentcart_after_related_products`	Around related products

add_action( 'buddyx_fluentcart_after_product_header', 'my_trust_badges' );
function my_trust_badges() {
    echo '<div class="trust-badges">Secure checkout</div>';
}

Filter Hooks

Asset Manifest Filters (primary extension seams)

These are the recommended entry points for adding, removing, or reconfiguring theme assets. See the Theme Architecture asset section.

buddyxpro_css_files

File: inc/Styles/Component.php

Filters the CSS manifest ($handle => $data map) that drives every conditional stylesheet enqueue. Add an entry to register a new integration stylesheet, or unset one to drop it.

add_filter( 'buddyxpro_css_files', function ( $css_files ) {
    $css_files['my-integration'] = array(
        'file'             => 'my-integration.css',
        'global'           => false,
        'preload_callback' => function () {
            return class_exists( 'My_Plugin' );
        },
        'media'            => 'all',
        'deps'             => array(),
        'loading'          => null,
    );
    return $css_files;
} );

buddyxpro_js_files

File: inc/Scripts/Component.php

Filters the JavaScript manifest that drives every conditional script enqueue (same shape, with footer / localize keys).

add_filter( 'buddyxpro_js_files', function ( $js_files ) {
    unset( $js_files['buddyxpro-entry-share-popup'] ); // drop share popup
    return $js_files;
} );

Customizer / Tokens Filters

Filter	File	Purpose
`buddyxpro_customizer_settings`	`inc/Customizer_Settings/`	Filters the full customizer settings definition
`buddyx_customizer_field_type_map`	`inc/Customizer_Framework/`	Maps field `type` to control class
`buddyx_customizer_field_args`	`inc/Customizer_Framework/`	Filters per-field args before registration
`buddyxpro_color_scheme_presets`	`inc/Customizer_Settings/`	Color-scheme preset list
`buddyxpro_typography_presets`	-	Typography preset list
`buddyxpro_header_presets`	-	Header layout presets
`buddyxpro_google_fonts`	`inc/Fonts/`	Available Google font list

Filter	Purpose
`buddyx_breadcrumb_trail_args`	Default breadcrumb args
`buddyx_breadcrumb_trail_items`	Final breadcrumb items array
`buddyx_breadcrumb_trail_labels`	Breadcrumb label strings
`buddyx_breadcrumb_trail_object`	Short-circuit with a custom trail object
`buddyx_breadcrumb_trail`	Final rendered breadcrumb HTML

Search Toggle Filters

Filter	Returns
`buddyx_search_slide_toggle_data_attrs`	Data-attribute string for the search toggle button
`buddyx_search_field_toggle_data_attrs`	Data-attribute string for the search field container

add_filter( 'buddyx_search_slide_toggle_data_attrs', function () {
    return 'data-animation="slide" data-speed="300"';
} );

Layout / Content Filters

Filter	Purpose
`buddyxpro_minimal_layout_force_no_sidebar`	Force no sidebar in the minimal layout
`buddyxpro_display_title_and_description`	Toggle archive title + description output
`buddyxpro_filter_archive_posts_per_page`	Archive posts-per-page override
`buddyxpro_post_categories_limit`	Max categories shown per entry
`buddyxpro_reading_time_minutes`	Filter the computed reading time
`buddyxpro_page_settings_post_types`	Post types that get the per-page settings meta box
`buddyx_enable_post_thumbnails`	Toggle post-thumbnail support
`buddyx_off_canvas_filter_button_output`	Off-canvas filter button markup

Filter	Purpose
`buddyxpro_login_presets`	Login-page brand presets
`buddyxpro_register_page_login_url`	Register-page login URL
`buddyx_lostpassword_url`	Lost-password URL

Plugin Installer Filter

Filter	Purpose
`buddyxpro_install_catalog`	The recommended-plugins catalog shown by the Plugin Installer / Welcome screen

BuddyPress / LearnDash Filters

Filter	Purpose
`buddyx_bp_is_current_action`	Whether the current BP action matches (used across BP templates)
`buddyx_buddypress_member_send_message_button_url`	Member "send message" button URL
`buddyx_get_member_joined_date`	Member joined-date string
`buddyx_learndash_lms_get_course_participants_per_page`	Participants per page
`buddyx_ld_modify_course_features`	Course features list
`buddyx_ld_filter_course_author_url`	Course author URL

Adding Hooks From a Component

Theme components add their hooks inside initialize():

namespace BuddyxPro\BuddyxPro\MyComponent;

use BuddyxPro\BuddyxPro\Component_Interface;

class Component implements Component_Interface {

    public function get_slug(): string {
        return 'my_component';
    }

    public function initialize() {
        add_action( 'wp_head', array( $this, 'add_meta_tags' ) );
        add_filter( 'body_class', array( $this, 'add_body_classes' ) );
    }

    public function add_body_classes( $classes ) {
        $classes[] = 'my-custom-class';
        return $classes;
    }
}

Best Practices

Use the correct priority (lower = earlier); the color-mode toggle occupies priority 50 on buddyx_header_actions.
Check context (is_singular(), is_page(), is_buddypress()) before outputting.
Escape all output (esc_html(), esc_attr(), esc_url()).
Return a value from filter callbacks - never echo.
Prefer the buddyxpro_css_files / buddyxpro_js_files manifest filters over dequeueing by handle where possible.
Prefix your callbacks so they never collide with the theme's buddyx_* / buddyxpro_* functions.

Theme Architecture
Functions Reference
Template Hierarchy
Creating a Child Theme

Template Hierarchy

Understanding BuddyX Pro's template structure and WordPress template hierarchy for effective customization.

WordPress Template Hierarchy

BuddyX Pro follows the WordPress standard template hierarchy with custom enhancements for BuddyPress, WooCommerce, LearnDash, and FluentCart.

Template files the theme actually ships

These are the top-level template files present in buddyx-pro/ (5.1.4). The theme does not ship front-page.php, home.php, single-post.php, singular.php, or search.php - those views fall through to index.php (or archive.php) per the WordPress hierarchy.

404.php                         offline.php
500.php                         page.php
archive.php                     searchform.php
archive-fluent-products.php     sidebar.php
archive-sfwd-courses.php        sidebar-buddypress.php
bbpress.php                     single.php
buddypress.php                  single-fluent-products.php
comment.php                     single-sfwd-courses.php
comments.php                    single-sfwd-groups.php
footer.php                      taxonomy-product-brands.php
header.php                      taxonomy-product-categories.php
index.php

Basic Hierarchy Flow

WordPress checks templates in this order:
1. Child theme templates
2. Parent theme templates
3. WordPress default templates

Core Templates

Homepage Templates

Priority Order:

1. front-page.php          # Static front page or blog
2. home.php                # Blog homepage
3. page.php                # If front page is a page
4. index.php               # Ultimate fallback

Example: Custom homepage

// front-page.php
<?php get_header(); ?>

<div class="homepage-wrapper">
    <?php
    while ( have_posts() ) {
        the_post();
        get_template_part( 'template-parts/content', 'front-page' );
    }
    ?>
</div>

<?php get_footer(); ?>

Single Post Templates

Priority Order:

1. single-{post-type}-{slug}.php    # Single post by slug
2. single-{post-type}.php           # Single post by type
3. single.php                       # Single post
4. singular.php                     # Any single content
5. index.php                        # Fallback

Examples shipped by the theme:

single-sfwd-courses.php - LearnDash course
single-sfwd-groups.php - LearnDash group
single-fluent-products.php - FluentCart product
single.php - Any single post (blog posts included; there is no single-post.php)

Page Templates

Priority Order:

1. custom-template.php              # Template Name: Custom
2. page-{slug}.php                  # Page by slug
3. page-{id}.php                    # Page by ID
4. page.php                         # Default page
5. singular.php                     # Any singular
6. index.php                        # Fallback

Custom Page Template:

<?php
/**
 * Template Name: Full Width Page
 * Template Post Type: page
 *
 * @package buddyxpro
 */

get_header();
?>

<div class="full-width-content">
    <?php
    while ( have_posts() ) {
        the_post();
        the_content();
    }
    ?>
</div>

<?php get_footer(); ?>

Archive Templates

Priority Order:

1. archive-{post-type}.php          # Custom post type archive
2. archive.php                      # Generic archive
3. index.php                        # Fallback

Examples:

archive-fluent-products.php - FluentCart shop
archive-sfwd-courses.php - LearnDash courses
archive.php - Blog archives

Taxonomy Templates

Priority Order:

1. taxonomy-{taxonomy}-{term}.php   # Specific term
2. taxonomy-{taxonomy}.php          # Taxonomy archive
3. taxonomy.php                     # Any taxonomy
4. archive.php                      # Archive fallback
5. index.php                        # Final fallback

Examples shipped by the theme:

taxonomy-product-categories.php - FluentCart product categories
taxonomy-product-brands.php - FluentCart product brands

Plugin-Specific Templates

BuddyPress Templates

Template: buddypress.php

Used for all BuddyPress pages (members, groups, activity).

<?php
/**
 * BuddyPress Page Template
 *
 * @package buddyxpro
 */

get_header();

$buddypress_sidebar = get_theme_mod( 'buddypress_sidebar_option', 'right' );
?>

<?php do_action( 'buddyx_sub_header' ); ?>

<?php do_action( 'buddyx_before_content' ); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        // BuddyPress content
        if ( function_exists( 'bp_nouveau_wrapper_open' ) ) {
            bp_nouveau_wrapper_open();
        }
        ?>
    </main>
</div>

<?php
if ( 'left' === $buddypress_sidebar || 'right' === $buddypress_sidebar ) {
    get_sidebar();
}
?>

<?php do_action( 'buddyx_after_content' ); ?>

<?php get_footer(); ?>

bbPress Templates

Template: bbpress.php

Used for forums, topics, and replies.

<?php
/**
 * bbPress Page Template
 *
 * @package buddyxpro
 */

get_header();

$bbpress_sidebar = get_theme_mod( 'bbpress_sidebar_option', 'right' );
?>

<?php do_action( 'buddyx_sub_header' ); ?>

<?php do_action( 'buddyx_before_content' ); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) {
            the_post();
            the_content();
        }
        ?>
    </main>
</div>

<?php
if ( 'left' === $bbpress_sidebar || 'right' === $bbpress_sidebar ) {
    get_sidebar();
}
?>

<?php do_action( 'buddyx_after_content' ); ?>

<?php get_footer(); ?>

WooCommerce Templates

Override Path: buddyx-pro/woocommerce/

The theme ships a small set of WooCommerce template overrides (only the files it needs to restyle - everything else falls back to WooCommerce core):

buddyx-pro/woocommerce/
├── archive-product.php            # Shop / product archive
├── single-product.php             # Product page
├── cart/
│   └── cart.php                   # Cart table
├── single-product/
│   └── rating.php                 # Product rating markup
└── global/
    └── quantity-input.php         # Quantity input

LearnDash Templates

The theme ships two LearnDash single templates plus a course archive. Lesson, topic, and quiz views are handled by LearnDash's own templates (the theme does not override them):

archive-sfwd-courses.php   # Course archive
single-sfwd-courses.php    # Course single
single-sfwd-groups.php     # Group single

Example: single-sfwd-groups.php

<?php
get_header();
?>

<?php do_action( 'buddyx_sub_header' ); ?>

<?php do_action( 'buddyx_before_content' ); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) {
            the_post();
            // LearnDash group content
            learndash_group_content();
        }
        ?>
    </main>
</div>

<?php do_action( 'buddyx_after_content' ); ?>

<?php get_footer(); ?>

FluentCart Templates

Templates:

archive-fluent-products.php - Shop page
taxonomy-product-categories.php - Category archive
taxonomy-product-brands.php - Brand archive

Example: archive-fluent-products.php

<?php
get_header();
?>

<?php do_action( 'buddyx_sub_header' ); ?>

<?php do_action( 'buddyx_before_content' ); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        // FluentCart renders its own content
        do_action( 'fluent_cart/template/main_content' );
        ?>
    </main>
</div>

<?php do_action( 'buddyx_after_content' ); ?>

<?php get_footer(); ?>

Template Parts

Template parts are reusable components loaded with get_template_part().

Directory Structure

This mirrors the real template-parts/ tree in 5.1.4 (abridged):

template-parts/
├── buddyx-page-header.php          # Page header wrapper
├── content-bbpress.php             # bbPress content
├── content-buddypress.php          # BuddyPress content
├── content-user-preview.php        # Member preview card
├── form.php                        # Generic form wrapper
├── form-login.php                  # Login form
├── form-register.php               # Registration form
├── form-vcard.php                  # vCard form
├── content/                        # Entry building blocks
│   ├── entry.php                   # Entry dispatcher
│   ├── entry-post.php              # Post entry
│   ├── entry-page.php              # Page entry
│   ├── entry-full-width.php        # Full-width entry
│   ├── entry-attachment.php        # Attachment entry
│   ├── entry-share.php             # Share row
│   ├── entry_header.php            # Entry header
│   ├── entry_title.php             # Entry title
│   ├── entry_content.php           # Entry content
│   ├── entry_summary.php           # Entry summary / excerpt
│   ├── entry_meta.php              # Entry meta
│   ├── entry_media.php             # Entry media
│   ├── entry_thumbnail.php         # Entry thumbnail
│   ├── entry_footer.php            # Entry footer
│   ├── entry_actions.php           # Entry actions
│   ├── entry_categories.php        # Category list
│   ├── entry_tags.php              # Tag list
│   ├── entry_taxonomies.php        # Custom taxonomies
│   ├── page_header.php             # Page-header body
│   ├── pagination.php              # Pagination
│   ├── related-posts.php           # Related posts
│   ├── error.php / error-404.php   # Error states
│   ├── error-500.php / error-offline.php
│   └── entry_header-sfwd-courses.php   # LearnDash course header
├── header/
│   ├── branding.php                # Logo / site title
│   ├── navigation.php              # Primary + mobile nav
│   ├── custom_header.php           # Custom header image
│   ├── buddypress-profile.php      # BP profile menu
│   └── buddyx-panel.php            # Side panel
├── layout/                         # Blog layout variants
│   ├── entry-default-layout.php
│   ├── entry-grid-layout.php
│   ├── entry-list-layout.php
│   ├── entry-masonry-layout.php
│   ├── entry-magazine-layout.php
│   ├── entry-editorial-layout.php
│   └── entry-minimal-layout.php
├── post-format/                    # Post-format media
│   ├── entry-audio.php  entry-gallery.php  entry-image.php
│   └── entry-link.php   entry-quote.php    entry-video.php
└── footer/
    └── info.php                    # Footer info / copyright

There is no template-parts/content.php, content-none.php, content-page.php, header/mobile.php, or footer/footer-widgets.php. Page content is rendered by template-parts/content/entry-page.php (dispatched through entry.php); the mobile menu lives in header/navigation.php; footer widgets render from footer.php directly.

Using Template Parts

// Load an entry part (dispatcher).
get_template_part( 'template-parts/content/entry', get_post_type() );

// Load a specific header part.
get_template_part( 'template-parts/header/branding' );

// Pass variables
set_query_var( 'custom_var', 'value' );
get_template_part( 'template-parts/content/entry' );
// Access in the part: get_query_var( 'custom_var' )

Creating Custom Template Part

// template-parts/content-custom.php
<?php
/**
 * Template part for displaying custom post content
 *
 * @package buddyxpro
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( 'custom-post' ); ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header>

    <div class="entry-content">
        <?php the_content(); ?>
    </div>

    <footer class="entry-footer">
        <?php
        // Custom meta
        echo '<span class="custom-meta">';
        echo esc_html( get_post_meta( get_the_ID(), 'custom_field', true ) );
        echo '</span>';
        ?>
    </footer>
</article>

Partial Templates

File: header.php

Structure:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action( 'buddyx_body_top' ); ?>

<div id="page" class="site">
    <?php do_action( 'buddyx_page_top' ); ?>

    <?php do_action( 'buddyx_header_before' ); ?>
    <header id="masthead" class="site-header">
        <?php do_action( 'buddyx_header_wrapper_before' ); ?>
        <!-- Branding + navigation template parts, header actions -->
        <?php do_action( 'buddyx_header_wrapper_after' ); ?>
    </header>
    <?php do_action( 'buddyx_header_after' ); ?>

There is no buddyx_header hook. The real header hooks are buddyx_header_before, buddyx_header_wrapper_before, buddyx_header_wrapper_after, buddyx_header_after, and buddyx_header_actions (inside the menu-icons area). See Hooks & Filters.

File: footer.php

Structure:

    <?php do_action( 'buddyx_footer_before' ); ?>

    <footer id="colophon" class="site-footer">
        <!-- Footer content -->
    </footer>

    <?php do_action( 'buddyx_footer_after' ); ?>
</div><!-- #page -->

<?php do_action( 'buddyx_page_bottom' ); ?>
<?php wp_footer(); ?>
<?php do_action( 'buddyx_body_bottom' ); ?>

</body>
</html>

File: sidebar.php

Structure:

<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<?php do_action( 'buddyx_sidebar_before' ); ?>

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

<?php do_action( 'buddyx_sidebar_after' ); ?>

AMP Templates

Location: amp/

BuddyX Pro includes AMP-specific templates:

amp/
├── single.php                 # AMP single post
├── archive.php                # AMP archive
└── search.php                 # AMP search results

AMP Template Detection:

// functions.php
add_filter( 'template_include', 'buddyx_theme_amp_templatre_include', '9999992233720368547758099' );
function buddyx_theme_amp_templatre_include( $template_file ) {
    if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
        if ( is_single() ) {
            $template_file = get_template_directory() . '/amp/single.php';
        }
        if ( is_archive() ) {
            $template_file = get_template_directory() . '/amp/archive.php';
        }
    }
    return $template_file;
}

Custom Template Files

Search Results

The theme does not ship a search.php. Search results are rendered by index.php (the WordPress fallback), which loops through template-parts/content/entry for each result. searchform.php provides the search form markup, and amp/search.php handles AMP search. To customise search output, either add a search.php in your child theme or filter the entry parts.

404 Template

File: 404.php

<?php
get_header();
?>

<div class="error-404 not-found">
    <header class="page-header">
        <h1 class="page-title"><?php esc_html_e( 'Oops! Page not found', 'buddyxpro' ); ?></h1>
    </header>

    <div class="page-content">
        <p><?php esc_html_e( 'The page you are looking for might have been removed.', 'buddyxpro' ); ?></p>
        <?php get_search_form(); ?>
    </div>
</div>

<?php get_footer(); ?>

Override Templates in Child Theme

Method 1: Direct Copy

Copy template from parent to child
Keep same directory structure
Modify as needed

# Example: Override header
cp buddyx-pro/header.php buddyx-pro-child/header.php

Method 2: Custom Template Location

// Child theme functions.php
add_filter( 'template_include', 'child_custom_template', 99 );
function child_custom_template( $template ) {
    if ( is_page( 'custom' ) ) {
        $custom_template = get_stylesheet_directory() . '/templates/custom-page.php';
        if ( file_exists( $custom_template ) ) {
            return $custom_template;
        }
    }
    return $template;
}

Method 3: Plugin Integration Override

// Override FluentCart category template
add_filter( 'template_include', 'child_fluentcart_templates', 100 );
function child_fluentcart_templates( $template ) {
    if ( is_tax( 'product-categories' ) ) {
        $custom = get_stylesheet_directory() . '/fluentcart/taxonomy-categories.php';
        if ( file_exists( $custom ) ) {
            return $custom;
        }
    }
    return $template;
}

Template Debugging

Show Current Template

// Add to child theme functions.php
add_action( 'wp_footer', 'show_template_info' );
function show_template_info() {
    if ( current_user_can( 'administrator' ) && WP_DEBUG ) {
        global $template;
        echo '<div style="position:fixed;bottom:0;left:0;background:#000;color:#fff;padding:10px;z-index:9999;">';
        echo '<strong>Template:</strong> ' . basename( $template );
        echo '</div>';
    }
}

Template Hierarchy Debug

// Show template loading order
add_filter( 'template_include', 'debug_template_hierarchy', 9999 );
function debug_template_hierarchy( $template ) {
    if ( WP_DEBUG ) {
        error_log( 'Template loaded: ' . $template );
    }
    return $template;
}

Best Practices

Do

Follow WordPress template hierarchy
Use child theme for overrides
Keep consistent file structure
Document custom templates
Use template parts for reusable components
Test template changes thoroughly
Escape all output
Use proper WordPress functions

Don't

Modify parent theme templates directly
Hardcode URLs or paths
Skip header/footer includes
Duplicate template code
Forget wp_head() and wp_footer()
Mix business logic with presentation
Use PHP short tags

Template Checklist

Before creating a custom template:

Check if template part can be reused
Follow WordPress naming conventions
Include proper DocBlock
Call get_header() and get_footer()
Add theme action hooks
Escape all output
Test responsive design
Validate HTML
Test with WP_DEBUG enabled
Document custom functionality

Theme Architecture
Hooks & Filters Reference
Creating a Child Theme
Customization Guide

Theme Architecture

BuddyX Pro uses a modern, component-based architecture with PSR-4 autoloading for organized, maintainable code.

Overview

The theme follows object-oriented principles with a modular component system. Each feature is encapsulated in its own component that implements the Component_Interface.

Key Features:

PSR-4 autoloading with fallback
Component-based architecture
Template tag system
Namespace: BuddyxPro\BuddyxPro
Minimum requirements: WordPress 6.5+, PHP 8.0+ (BUDDYXPRO_MINIMUM_WP_VERSION / BUDDYXPRO_MINIMUM_PHP_VERSION in functions.php)

Directory Structure

buddyx-pro/
├── assets/               # CSS, JS, images, fonts
│   ├── css/
│   ├── js/
│   ├── images/
│   └── svg/
├── external/             # Optional third-party shim files (legacy, kept empty in 5.1.0+)
├── inc/                  # Theme components (PSR-4 autoloaded)
│   ├── compatibility/    # Plugin integrations
│   │   ├── buddypress/
│   │   ├── woocommerce/
│   │   ├── learndash/
│   │   ├── fluentcart/
│   │   └── ...
│   ├── Customizer/       # WP_Customize bootstrap component
│   ├── Customizer_Framework/  # First-party field API (Field, Panel, Section, Output_Builder)
│   ├── Customizer_Settings/   # Per-section field definitions
│   ├── Tokens/           # --bx-* CSS custom-property emitter
│   ├── Color_Mode_Toggle/# Dark / light toggle
│   ├── Styles/           # CSS enqueue manifest + inline CSS
│   ├── Helpers/          # Procedural helper files (Login_Forms, Dark_Mode, ...)
│   ├── widgets/          # Custom widgets
│   ├── Component_Interface.php
│   ├── Theme.php         # Main theme class
│   ├── Template_Tags.php # Template tag system
│   └── functions.php     # Entry point function
├── template-parts/       # Reusable template parts
├── vendor/               # Composer autoloader
├── functions.php         # Theme initialization
└── style.css             # Theme stylesheet

Core Architecture

Entry Point (functions.php)

// Setup autoloader (Composer or custom fallback)
if ( file_exists( get_template_directory() . '/vendor/autoload.php' ) ) {
    require get_template_directory() . '/vendor/autoload.php';
} else {
    spl_autoload_register( '_buddyxpro_autoload' );
}

// Load entry point function
require get_template_directory() . '/inc/functions.php';

// Initialize theme
call_user_func( 'BuddyxPro\BuddyxPro\buddyxpro' );

Component Interface

All theme components must implement Component_Interface:

namespace BuddyxPro\BuddyxPro;

interface Component_Interface {
    /**
     * Gets the unique identifier for the theme component.
     *
     * @return string Component slug.
     */
    public function get_slug(): string;

    /**
     * Adds the action and filter hooks to integrate with WordPress.
     */
    public function initialize();
}

Main Theme Class (Theme.php)

The Theme class orchestrates all components:

namespace BuddyxPro\BuddyxPro;

class Theme {
    protected $components = array();
    protected \BuddyxPro\BuddyxPro\Template_Tags $template_tags;

    public function __construct( array $components = array() ) {
        // Register components
        foreach ( $components as $component ) {
            $this->components[ $component->get_slug() ] = $component;
        }
    }

    public function initialize() {
        // Initialize all components
        array_walk( $this->components, function( $component ) {
            $component->initialize();
        });
    }
}

Default Components

Theme::get_default_components() (inc/Theme.php) registers these components, in this order:

Localization - Text domain and translations
Migration - Version-to-version data migrations
Base_Support - Core WordPress theme features
Editor - Block editor support
Accessibility - ARIA labels, skip links, theme-color AJAX
Image_Sizes - Custom image sizes
AMP - AMP support
PWA - Progressive Web App support
Comments - Comment markup and callbacks
Nav_Menus - Menu locations
Sidebars - Widget areas
Custom_Background - Custom background support
Custom_Header - Custom header support
Custom_Logo - Custom logo support
Post_Thumbnails - Featured image support
Customizer - WP_Customize bootstrap
Fonts - Font registration and Google Fonts
Styles - Stylesheet enqueue manifest
Scripts - JavaScript enqueue manifest
Excerpts - Excerpt handling
Options - Theme option helpers
Blocks - Gutenberg block support
Block_Patterns - Block pattern registration
Customizer_Settings - Per-section customizer field definitions
Starter_Content - Starter content
Tokens - Emits --bx-color-* / --bx-radius-* custom properties on <html> from color / dimension theme mods
Color_Mode_Toggle - Dark / light color-mode toggle
Page_Settings - Per-page settings meta box
Welcome - Theme welcome / onboarding screen
Plugin_Installer - Recommended-plugin installer

Conditional component:

// Jetpack integration (only when Jetpack is active).
if ( defined( 'JETPACK__VERSION' ) ) {
    $components[] = new Jetpack\Component();
}

Customizer_Framework is not a registered component. It is a first-party static-class library (Field, Panel, Section, Output_Builder) that replaced Kirki in 5.1.0; the Customizer_Settings component consumes it. There is no Dynamic_Style component or inc/Dynamic_Style/ directory - dynamic CSS is produced by Tokens/Component.php (custom properties), Customizer_Framework/Output_Builder.php (per-field output rules), and Styles/Component.php (inline CSS at wp_head).

Plugin integrations (BuddyPress, WooCommerce, LearnDash, Dokan, FluentCart, bbPress, BuddyNext, etc.) are not components - they are procedural files loaded conditionally from functions.php (see "Plugin Integration Pattern" below).

PSR-4 Autoloading

File-to-Class Mapping

Class namespace maps directly to file path:

Namespace: BuddyxPro\BuddyxPro\Customizer\Component
File:      inc/Customizer/Component.php

Namespace: BuddyxPro\BuddyxPro\Tokens\Component
File:      inc/Tokens/Component.php

Custom Autoloader (Fallback)

If Composer is unavailable:

function _buddyxpro_autoload( $class_name ) {
    $namespace = 'BuddyxPro\BuddyxPro';

    if ( 0 !== strpos( $class_name, $namespace . '\\' ) ) {
        return false;
    }

    // Convert namespace to file path
    $parts = explode( '\\', substr( $class_name, strlen( $namespace . '\\' ) ) );
    $path = get_template_directory() . '/inc';

    foreach ( $parts as $part ) {
        $path .= '/' . $part;
    }
    $path .= '.php';

    if ( file_exists( $path ) ) {
        require_once $path;
        return true;
    }

    return false;
}
spl_autoload_register( '_buddyxpro_autoload' );

Template Tag System

Accessing Template Tags

Template tags are accessible via the buddyxpro() function:

// In template files
buddyxpro()->display_header();
buddyxpro()->posted_on();
buddyxpro()->get_version();

Template_Tags Class

The Template_Tags class provides magic method access:

class Template_Tags {
    protected $template_tags = array();

    public function __call( string $method, array $args ) {
        if ( ! isset( $this->template_tags[ $method ] ) ) {
            throw new BadMethodCallException(
                sprintf( 'The template tag %s does not exist.', $method )
            );
        }

        return call_user_func_array(
            $this->template_tags[ $method ]['callback'],
            $args
        );
    }
}

Registering Template Tags

Components implement Templating_Component_Interface:

namespace BuddyxPro\BuddyxPro\MyComponent;

use BuddyxPro\BuddyxPro\Component_Interface;
use BuddyxPro\BuddyxPro\Templating_Component_Interface;

class Component implements Component_Interface, Templating_Component_Interface {

    public function template_tags(): array {
        return array(
            'my_custom_tag' => array( $this, 'render_custom_tag' ),
        );
    }

    public function render_custom_tag() {
        // Template tag logic
    }
}

Plugin Integration Pattern

Plugin integrations are isolated in inc/compatibility/:

Directory Structure

inc/compatibility/
├── buddypress/
│   ├── buddypress-functions.php
│   └── README.md
├── woocommerce/
│   ├── woocommerce-functions.php
│   └── README.md
├── fluentcart/
│   ├── fluentcart-functions.php
│   ├── HOOKS-REFERENCE.md
│   └── README.md
└── learndash/
    ├── learndash-functions.php
    └── README.md

Conditional Loading

In functions.php:

// Load WooCommerce functions
if ( class_exists( 'WooCommerce' ) ) {
    require get_template_directory() . '/inc/compatibility/woocommerce/woocommerce-functions.php';
}

// Load FluentCart functions
if ( defined( 'FLUENTCART_PLUGIN_FILE_PATH' ) ) {
    require get_template_directory() . '/inc/compatibility/fluentcart/fluentcart-functions.php';
}

// Load LearnDash functions
if ( class_exists( 'SFWD_LMS' ) ) {
    require get_template_directory() . '/inc/compatibility/learndash/learndash-functions.php';
}

Integration Class Pattern

class BuddyXPro_FluentCart_Support {
    private static $instance = null;

    public static function get_instance() {
        if ( null === self::$instance ) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    private function __construct() {
        $this->init_hooks();
    }

    private function init_hooks() {
        // Add hooks for plugin integration
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
        add_filter( 'body_class', array( $this, 'add_body_classes' ) );
    }
}

// Initialize
BuddyXPro_FluentCart_Support::get_instance();

Customizer Architecture

Customizer Framework (5.1.0+)

BuddyX Pro 5.1.0 replaced the external Kirki dependency with a first-party Customizer Framework that lives at inc/Customizer_Framework/. The public API matches Kirki's add_*() calls 1:1 so existing field declarations continue to work; the framework owns sanitisation, output, and the preview JS.

// No bootstrap require - the framework is autoloaded as a Component.
use BuddyxPro\BuddyxPro\Customizer_Framework\Field;

Adding Customizer Options

// Panel (registered via WP_Customize_Manager directly - the framework
// only owns sections + fields).
add_action( 'customize_register', function ( $wp_customize ) {
    $wp_customize->add_panel( 'my_panel', array(
        'title'    => __( 'My Panel', 'buddyxpro' ),
        'priority' => 10,
    ) );

    $wp_customize->add_section( 'my_section', array(
        'title' => __( 'My Section', 'buddyxpro' ),
        'panel' => 'my_panel',
    ) );
} );

// Field - framework picks the right control + sanitizer based on `type`.
\BuddyxPro\BuddyxPro\Customizer_Framework\Field::add( 'switch',
    array(
        'settings' => 'my_option',
        'label'    => __( 'Enable Feature', 'buddyxpro' ),
        'section'  => 'my_section',
        'default'  => 'off',
        'choices'  => array(
            'on'  => __( 'Yes', 'buddyxpro' ),
            'off' => __( 'No', 'buddyxpro' ),
        ),
    )
);

Supported field types

color, switch, radio_image, radio_buttonset, select, slider, dimension, typography, background, image, cropped_image, text, textarea, repeater, sortable, custom. See inc/Customizer_Framework/Field.php::$field_types for the canonical map.

Auto-resolved transport

When a field includes an output array (one or more { element, property, units } rules), the framework auto-resolves its transport to postMessage and wires customizer-preview.js to apply the new CSS rule live in the iframe. Set 'transport' => 'refresh' explicitly only when a setting genuinely needs a full reload.

Tokens system

Colour and dimension settings flow through inc/Tokens/Component.php, which writes one set of --bx-color-* / --bx-radius-* CSS custom properties on <html> plus a thin compat layer of legacy aliases (--color-theme-body, --global-border-radius, etc.). New CSS should consume the --bx-* token; aliases exist only for back-compat with pre-5.1.0 selectors. normalize_dimension() defaults bare numbers to px so customizer sliders that don't emit a unit still produce valid CSS.

Output_Builder

inc/Customizer_Framework/Output_Builder.php walks every field with an output rule and emits one combined inline CSS block at wp_head. Typography arrays expand into multi-declaration blocks; backgrounds expand into the 6-key background shorthand; scalar values use the field's _type to pick a default CSS property.

Dynamic Style Generation

Dynamic CSS in 5.1.x is produced by three cooperating pieces - there is no single "Dynamic_Style" component:

inc/Tokens/Component.php maps color / dimension theme mods onto canonical --bx-color-* and --bx-radius-* custom properties (plus legacy aliases) and prints them on <html> at wp_head. Light and dark modes emit separate token blocks.
inc/Customizer_Framework/Output_Builder.php walks every customizer field that declares an output rule and emits one combined inline CSS block.
inc/Styles/Component.php enqueues the CSS manifest and adds any remaining inline CSS (via load_custom_styles() on wp_head).

Child themes should consume the --bx-* tokens rather than regenerating CSS. See the Customization Guide.

Custom Widgets

Widgets are in inc/widgets/:

// Load widgets
require get_template_directory() . '/inc/widgets/login-widget.php';
require get_template_directory() . '/inc/widgets/bp-profile-completion-widget.php';

Class	File
`BP_BUDDYX_BP_Login_Widget`	`inc/widgets/login-widget.php`
`BP_BuddyxPro_Profile_Completion_Widget`	`inc/widgets/bp-profile-completion-widget.php`
`LD_Course_Features_Widget`	`inc/widgets/ld-featured-course-widget.php`
`BuddyxPro_WCV_Widget_Vendor_Profile`	`inc/widgets/class-vendor-profile-widget.php` (extends `WC_Widget`)

class BP_BUDDYX_BP_Login_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'buddyx_login_widget',
            __( 'BuddyX Login', 'buddyxpro' ),
            array( 'description' => __( 'Login form widget', 'buddyxpro' ) )
        );
    }

    public function widget( $args, $instance ) {
        // Widget output
    }
}

// The login widget registers itself on widgets_init.
function buddyx_register_bp_login_widget() {
    register_widget( 'BP_BUDDYX_BP_Login_Widget' );
}
add_action( 'widgets_init', 'buddyx_register_bp_login_widget' );

Helper Functions

Modular Helpers (inc/Helpers/)

// Login and registration popups
require_once get_template_directory() . '/inc/Helpers/Login_Forms.php';

// BuddyPress activity enhancements
require_once get_template_directory() . '/inc/Helpers/Activity_Functions.php';

// Side panel functionality
require_once get_template_directory() . '/inc/Helpers/Side_Panel.php';

// Dark mode toggle
require_once get_template_directory() . '/inc/Helpers/Dark_Mode.php';

Utility Functions (inc/extra.php)

Core template functions:

// Content wrapper hooks
add_action( 'buddyx_before_content', 'buddyx_content_top' );
add_action( 'buddyx_after_content', 'buddyx_content_bottom' );

// Sub header
add_action( 'buddyx_sub_header', 'buddyx_sub_header' );

// Header menu-icon actions area (search / cart). This in turn fires the
// buddyx_header_actions hook - there is no buddyx_header hook.
buddyx_site_menu_icon();

Version Management

Theme Version

// Get theme version
$version = wp_get_theme( get_template() )->get( 'Version' );

// Via template tags
buddyxpro()->get_version();

Asset Versioning

// Development: file modification time
// Production: theme version
buddyxpro()->get_asset_version( $filepath );

Best Practices

Do

Use PSR-4 autoloading for new classes
Implement Component_Interface for new components
Use template tag system for reusable functions
Add plugin integrations to inc/compatibility/
Use BuddyxPro\BuddyxPro\Customizer_Framework\Field::add() for customizer options (no third-party dependency in 5.1.0+)
Prefix all functions with buddyx_ or buddyxpro_
Use namespace BuddyxPro\BuddyxPro for classes

Don't

Modify core theme files directly
Add business logic to templates
Use global variables without prefixing
Skip component initialization
Bypass the autoloader
Hardcode plugin paths

Hooks & Filters Reference
Creating a Child Theme
Template Hierarchy
Customization Guide

FAQ & Support

FAQs, troubleshooting, glossary, and before-you-contact-support checklist.

Before You Contact Support

Complete this checklist to get faster help.

Quick Fixes to Try First

Before emailing support, try these:

Clear browser cache - Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Clear site cache - If using caching plugin, purge all cache
Try incognito mode - Test in private browser window
Try different browser - Chrome, Firefox, Safari, or Edge
Wait 5 minutes - Sometimes servers need time to process

Information to Gather

Support needs this information to help you quickly:

1. Version Numbers

WordPress Version:

Go to Dashboard > Updates
Note the version number (e.g., 6.4.2)

BuddyX Pro Version:

Go to Appearance > Themes
Click on BuddyX Pro
Note version in theme details

PHP Version:

Go to Tools > Site Health > Info > Server
Find PHP version (e.g., 8.1)

2. Screenshot of the Problem

Take a screenshot showing:

The exact error or issue
The URL where it happens
Any error messages

How to screenshot:

Windows: Press Windows + Shift + S
Mac: Press Cmd + Shift + 4

3. Steps to Reproduce

Write down exactly how to see the problem:

Go to [specific page]
Click [specific button]
See [specific error]

4. What You've Already Tried

List troubleshooting steps completed:

Cleared browser cache
Cleared site cache
Disabled plugins
Switched to default theme
Checked Site Health

Site Health Report

Copy your site info for support:

Go to Tools > Site Health
Click Info tab
Click Copy site info to clipboard
Save this text to include in your email

Plugin List

If asked, provide your active plugins:

Go to Plugins > Installed Plugins
Screenshot or list all active plugins

Support Email Template

Copy and fill in:

SUBJECT: [Brief description of issue]

WEBSITE URL: [your-site.com]

WORDPRESS VERSION: [e.g., 6.4.2]
BUDDYX PRO VERSION: [e.g., 5.0.0]
PHP VERSION: [e.g., 8.1]

PROBLEM DESCRIPTION:
[Describe what's happening]

STEPS TO REPRODUCE:
1. [First step]
2. [Second step]
3. [What you see]

WHAT I'VE TRIED:
- [List troubleshooting steps]

SCREENSHOT: [Attach image]

SITE HEALTH INFO: [Paste copied info]

Response Times

License holders: 24-48 business hours
Weekends/holidays: May take longer

Contact

Email: support@wbcomdesigns.com

Include:

Completed checklist above
Screenshot of issue
Site Health info

Related Documentation:

BuddyPress FAQ

Quick answers for BuddyPress and BuddyBoss integration.

Setup

Do I need BuddyPress to use BuddyX Pro?

No, but recommended. Without BuddyPress, you have a standard WordPress theme. With BuddyPress, you get:

Member profiles and directories
Groups and activity streams
Private messaging
Notifications

BuddyPress or BuddyBoss - which should I use?

Choose	If You Need
BuddyPress	Free, community-maintained, lighter
BuddyBoss Platform	More features, better mobile, paid support

Both work fully with BuddyX Pro.

Which template pack is required?

BP Nouveau - Required. BP Legacy is not supported.

To set:

Settings > BuddyPress > Options
Select BP Nouveau under Template Pack
Save

Common Issues

Members page shows 404

Fix:

Settings > Permalinks
Click Save Changes (don't change anything)
This refreshes rewrite rules

If still 404:

Settings > BuddyPress > Pages
Verify Members page is assigned
Create page if missing

Activity stream is empty

Check:

Activity component enabled at Settings > BuddyPress > Components
Create test content (post status update, join group)
Clear cache

Can't upload cover photos

Fix:

Check PHP upload limit (need 10MB+)
Check folder permissions: chmod 755 wp-content/uploads
Verify GD Library or ImageMagick installed

Recommended cover size: 1300x200px, JPG or PNG

Profile pages look broken

Verify using BP Nouveau template pack
Clear all caches (browser + plugin)
Deactivate plugins one by one to find conflict
Check for custom CSS conflicts

Customization

How do I customize member profiles?

Appearance > Customize > Community Settings offers:

Profile header layout (6 styles)
Cover image settings
Avatar shape (circle/square)
Navigation style

How do I customize groups?

Appearance > Customize > Community Settings > Groups Directory offers:

Group header layout (6 styles)
Group directory layout
Group card style

Can members customize their profiles?

If enabled in BuddyPress settings, members can:

Upload avatar and cover image
Edit profile fields
Manage privacy settings

Dark Mode

Does dark mode work with BuddyPress?

Yes. When enabled, all BuddyPress pages automatically switch:

Activity feeds
Member profiles
Group pages
Messages

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Customization FAQ

Quick answers to styling and appearance questions.

Homepage & Layout

How do I build a homepage or landing page?

BuddyX Pro builds homepages from block patterns and Wbcom Essential blocks - no page builder needed, and every block inherits your theme colors and dark mode. The short version:

Pages > Add New, then stack block patterns from the + inserter's Patterns tab
Pick a header style under Appearance > Customize > Site Header
Settings > Reading > Your homepage displays > A static page and select your page

For the full walkthrough - full-page Homepage patterns, community blocks, and per-page overrides - follow Recipe: Build your homepage.

Colors

How do I change site colors?

Appearance > Customize > Site Skin
Choose a Color Preset (10+ options), OR
Set custom colors in Color Scheme
Click Publish

How do I enable dark mode?

Appearance > Customize > Skin
Toggle Enable Dark Mode to Yes
Configure dark mode colors
Click Publish

A toggle icon appears in your header for visitors.

Fonts

How do I change fonts?

Appearance > Customize > Typography
Set Body Typography for main text
Set Heading Typography for H1-H6
Choose from 800+ Google Fonts
Click Publish

Can I use custom fonts (not Google)?

Yes - no code needed. Use WordPress's built-in Font Library:

Go to Appearance > Fonts and upload your font files.
Go to Appearance > Customize > Typography and open any typography panel (Body, Headings, etc.).
Pick your uploaded font from the Family dropdown.
Click Publish.

BuddyX Pro prints the @font-face rules for you and skips requesting that family from Google, so your self-hosted font is the one that loads.

For externally-hosted fonts (Adobe Fonts / Typekit, a private CDN) there are no files to upload, so declare them in child theme CSS instead:

@font-face {
    font-family: 'MyFont';
    src: url('path/to/font.woff2') format('woff2');
}
body { font-family: 'MyFont', sans-serif; }

Custom CSS

Where do I add custom CSS?

Recommended: Appearance > Customize > Additional CSS

Live preview before publishing
Survives theme updates
No child theme needed

My CSS isn't working

Check specificity - Add !important if needed
Clear all caches - Browser + plugin cache
Verify selector - Use browser inspector (F12) to find correct class

Customizer

My Customizer changes aren't saving or showing

Work through these in order - one of them is almost always the cause:

Click Publish - changes in the Customizer are only a live preview until you click the Publish button (top left). Closing the panel without publishing discards them.
Clear every cache - purge your caching plugin (WP Rocket, LiteSpeed, W3TC), your host/server cache, any CDN (Cloudflare), then hard-reload the page (Cmd+Shift+R / Ctrl+F5).
Check for aggressive optimization - CSS/JS combine or "remove unused CSS" features can strip a style. Temporarily turn combination off and re-test.
Test in an incognito window - this rules out a stale browser cache versus a real save problem.

If the value publishes but still doesn't apply on the front end, it may be overridden by a Per-Page Setting on that specific page - check the Page Settings panel when editing it.

Appearance > Customize > Site Header > Header Layout
Choose Layout 1, 2, 3, or 4
Click Publish

See Header Layouts for visual comparison.

Appearance > Customize > Site Header > Sticky Header
Toggle Enable Sticky Header to On
Click Publish

How do I hide header icons?

Appearance > Customize > Site Header > Header Elements
Toggle off: Search, Cart, Notifications, etc.
Click Publish

WordPress core builds the menu; BuddyX Pro decides where it sits and how it behaves:

Build the menu at Appearance > Menus and assign it to a header location (Primary - Logged in / Logged out)
Set its position and the More Menu overflow under Customize > Site Header
Style menu and sub-menu text under Customize > Typography > Menu

BuddyX Pro has no built-in mega menu, but it works with mega-menu plugins like Max Mega Menu. For the complete flow, including the mobile hamburger breakpoint, follow Recipe: Add and style your navigation menu.

Logo

How do I change the logo?

Appearance > Customize > Site Identity
Click Select Logo
Upload your logo (recommended: PNG, 200x60px)
Adjust Logo Width if needed
Click Publish

My logo is too big/small

Adjust the Logo Width slider in Site Identity, or add CSS:

.site-logo-wrapper img {
    max-width: 180px !important;
}

Appearance > Customize > Sidebar
Find the page type (Blog, Pages, Shop, etc.)
Select No Sidebar
Click Publish

Can I have different sidebars per page?

Yes. When editing a page, use the Sidebar meta box to override the default.

Appearance > Customize > Site Footer for layout/background
Appearance > Widgets to add footer content
Add widgets to Footer 1, 2, 3, or 4 columns

How do I change copyright text?

Appearance > Customize > Site Footer > Copyright
Enter your text
Use [current_year] for auto-updating year
Click Publish

Recipe: Build your homepage - lay out a homepage from block patterns
Recipe: Add and style your navigation menu - build and style the header menu
Color Presets
Header Layouts
Footer Settings
Typography

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Developer FAQ

Quick answers for developers and advanced customization.

Child Theme

When should I use a child theme?

Use child theme for:

Custom PHP functions
Template overrides
Extensive CSS changes
Custom page templates

Don't need child theme for:

Customizer settings (saved in database)
Additional CSS panel
Basic usage

How do I create a child theme?

1. Create folder: /wp-content/themes/buddyxpro-child/

2. Create style.css:

/*
Theme Name: BuddyxPro Child
Template: buddyxpro
Version: 1.0.0
*/

3. Create functions.php:

<?php
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});

4. Activate at Appearance > Themes

Template Overrides

How do I override a template?

Find template in parent theme: /buddyxpro/template-parts/
Copy to child theme with same path
Edit child theme copy
WordPress automatically uses child version

Common templates to override

Template	Purpose
`header.php`	Site header
`footer.php`	Site footer
`single.php`	Single post
`archive.php`	Blog archive
`buddypress/*.php`	BuddyPress templates

Hooks & Filters

Where can I add custom code?

Quick: Use Code Snippets plugin

Proper: Child theme functions.php

Common hooks

// Before main content
add_action( 'buddyx_before_content', 'my_function' );

// After main content
add_action( 'buddyx_after_content', 'my_function' );

// In header
add_action( 'buddyx_header', 'my_function', 15 );

// Before footer
add_action( 'buddyx_footer_before', 'my_function' );

Common filters

// Add body class
add_filter( 'body_class', function( $classes ) {
    $classes[] = 'my-custom-class';
    return $classes;
});

// Change excerpt length
add_filter( 'excerpt_length', function() {
    return 30;
});

// Disable dark mode
add_filter( 'buddyx_enable_dark_mode', '__return_false' );

See Hooks Reference for complete list.

Custom Post Types

Does BuddyX Pro style custom post types?

Yes. Register your CPT normally - theme uses WordPress defaults.

For custom templates, create in child theme:

single-{post-type}.php
archive-{post-type}.php

Gutenberg / Block Editor

Does it support Gutenberg?

Yes, fully:

All core blocks styled
Wide and full-width alignment
Theme color palette in editor
Editor styles match frontend

Does it support Full Site Editing?

BuddyX Pro is a classic theme with Customizer. Full Site Editing themes use a different architecture.

JavaScript

How do I add custom JavaScript?

Child theme method:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'my-script',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array( 'jquery' ),
        '1.0',
        true
    );
});

Common JavaScript conflicts

Multiple jQuery versions
JS minification breaking code
Plugin load order issues

Debug: Check browser console (F12) for errors.

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Licensing & Updates FAQ

Quick answers to license and update questions.

License Basics

What's included with my license?

Included	Details
Theme files	Full BuddyX Pro installation
Updates	One-click updates for license period
Support	Email support from our team
Documentation	Full user and developer guides

How many sites can I use it on?

License	Sites	Support Period
Single Site	1	1 year
5 Sites	Up to 5	1 year
Unlimited	Unlimited	1 year

What happens when my license expires?

Theme keeps working - Your site continues normally
No updates - Can't download new versions
No support - Can't submit tickets
Renew anytime - Usually 50% discount

Activating Your License

Where do I enter my license key?

Appearance > Customize
Open Theme License panel
Paste your license key
Click Activate License
Click Publish

Where do I find my license key?

Log into wbcomdesigns.com/my-account
Go to Downloads
Copy your license key

Can I transfer my license to another domain?

Yes:

Deactivate on old site (Customize > Theme License > Deactivate)
Activate on new site with same key

You can also manage sites from your account dashboard.

How do I move my license to a new site if I can't reach the old one?

If the old site is gone, offline, or you no longer have access, you can't deactivate from its Customizer - so free the activation from your account instead:

Log into wbcomdesigns.com/my-account
Go to Licenses (or Downloads) and open your BuddyX Pro key
Deactivate the old site's URL from the list of managed sites
On the new site, go to Customize > Theme License, paste the same key, and click Activate License

Still stuck, or the site limit is full with a URL you can't remove? Email support@wbcomdesigns.com with your license key and we'll reset it for you.

Updates

How do I update the theme?

Automatic (license active):

Go to Dashboard > Updates
Find BuddyX Pro
Click Update Now

Manual (license expired):

Download latest from your account
Appearance > Themes > Add New > Upload
Replace existing version

Will I lose my settings when updating?

No. Customizer settings are stored in the database and preserved during updates.

Update failed - what do I do?

Check your license is active
Try manual update via FTP
Increase PHP memory limit to 256MB
Contact support if still failing

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Mobile & Responsive FAQ

Quick answers about mobile display and responsiveness.

Mobile Support

Is BuddyX Pro mobile responsive?

Yes, fully responsive and mobile-first. Tested on:

iOS (iPhone, iPad)
Android (phones, tablets)
All modern browsers

At the hamburger breakpoint (768px by default) and below:

Navigation collapses to a hamburger icon
Tap to open the mobile menu drawer
Touch-optimized with larger tap targets

The breakpoint is adjustable in the Customizer (see "Can I change the mobile menu breakpoint?" below).

Mobile Issues

Common fixes:

Clear all caches - Browser, plugin, CDN
Disable JS minification in caching plugin
Check for JavaScript errors - Browser console (F12)
Test in incognito mode - Rules out extensions

Elements overlap on mobile

Check custom CSS - Your CSS may not be responsive
Use browser dev tools - Find exact breakpoint where it breaks
Add mobile CSS:

@media (max-width: 767px) {
    /* Your mobile fixes */
}

Text too small on mobile

Appearance > Customize > Typography > Body
Increase Font Size
Use the mobile preview icon to check

Or add CSS:

@media (max-width: 767px) {
    body { font-size: 16px; }
}

Images overflow on mobile

Add to Additional CSS:

img {
    max-width: 100%;
    height: auto;
}

Mobile Customization

Can I use a different logo on mobile?

BuddyX Pro does not have a separate mobile logo upload field. It uses the one logo set in Appearance > Customize > Site Identity, scaled responsively. To swap it on small screens, upload the mobile image to the Media Library and swap it with CSS:

@media (max-width: 767px) {
    .site-branding img { content: url('https://yoursite.com/mobile-logo.webp'); }
}

Can I hide elements on mobile?

Use CSS:

@media (max-width: 767px) {
    .element-to-hide { display: none; }
}

How do I test mobile display?

Quick test:

Browser dev tools (F12 > Toggle device toolbar)
Customizer preview (mobile icon at bottom)

Accurate test:

Real iPhone and Android devices
BrowserStack or LambdaTest (online tools)

Breakpoints

What breakpoints does BuddyX Pro use?

Breakpoint	Device
1200px+	Desktop
1024px	Tablet landscape
768px	Tablet portrait
480px	Large phone
320px	Small phone

Yes, from the Customizer - no code required:

Go to Appearance > Customize > Site Header
Set the Hamburger Menu Breakpoint slider (in pixels)
Click Publish

This is the screen width where the header switches from the desktop menu to the hamburger menu. The default is 768px, and the slider accepts values from 768 to 1600.

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Performance FAQ

Quick answers about site speed and optimization.

Speed Basics

Does BuddyX Pro slow down my site?

No. BuddyX Pro is optimized with:

Minimal CSS/JS files
Conditional asset loading
Lazy loading images
No jQuery where possible

Site speed depends more on hosting, plugins, and images than the theme.

How can I speed up my site?

Top 5 quick wins:

Install caching plugin - WP Rocket or W3 Total Cache
Optimize images - Use WebP, compress before upload
Use CDN - Cloudflare (free tier available)
Reduce plugins - Deactivate unused ones
Upgrade hosting - Managed WordPress hosting

For the full step-by-step - serving fonts locally, caching, image optimization, trimming BuddyPress components, and an honest "is it the host?" check - follow Recipe: Speed up your site.

Plugin	Best For
WP Rocket	Easiest setup, best results (paid)
LiteSpeed Cache	LiteSpeed servers (free)
W3 Total Cache	Advanced users (free)

Memory Issues

Getting "memory exhausted" errors?

Add to wp-config.php:

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

How much memory do I need?

Site Type	Recommended
Blog only	128MB
+ WooCommerce	256MB
+ BuddyPress	256MB
Large community	512MB

Image Optimization

Should I use lazy loading?

Yes, it's enabled by default in WordPress 5.5+. BuddyX Pro enhances it for:

Post thumbnails
Avatar images
Cover images
Gallery images

What image format is best?

WebP - 30% smaller than JPEG with same quality.

Use plugins like ShortPixel or Imagify to auto-convert.

What size should images be?

Image Type	Recommended Size
Logo	200x60px (400x120px for retina)
Blog featured	1200x800px
Cover image	1300x200px
Product image	1200x1200px

Admin/Customizer Slow

Customizer takes forever to load

Increase PHP memory (see above)
Temporarily disable heavy plugins
Reduce Google Fonts loaded
Consider better hosting

Admin dashboard is slow

Add to wp-config.php to reduce Heartbeat API frequency:

define( 'WP_HEARTBEAT_INTERVAL', 60 );

Or disable in admin:

add_action( 'init', function() {
    if ( is_admin() ) {
        wp_deregister_script( 'heartbeat' );
    }
});

Plugin Impact

How many plugins is too many?

Count	Status
10-20	Normal
20-30	Review each one
30+	Consolidate

Quality matters more than quantity. Use Query Monitor plugin to identify slow plugins.

Which plugins use most resources?

Common resource-heavy plugins:

Page builders (Elementor, Beaver Builder)
SEO plugins (Yoast, Rank Math)
Backup plugins (during backup)
Social sharing plugins

Hosting

For community sites (BuddyPress):

Cloudways
Kinsta
WP Engine

Minimum specs:

2GB RAM
SSD storage
PHP 8.1+
Object caching (Redis/Memcached)

Recipe: Speed up your site - the full step-by-step optimization walkthrough
Troubleshooting
Installation Requirements

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Plugin Compatibility FAQ

Quick answers about plugin integrations.

Officially Supported Plugins

Full Integration (styling + Customizer options)

These plugins have dedicated BuddyX Pro styling AND Customizer controls (sidebar layout, cart icon, header position, etc.):

Plugin	What BuddyX Pro Adds
BuddyPress	Member/group templates, profile headers, activity styling, sidebar controls
BuddyBoss Platform	Full compatibility with all features
WooCommerce	Shop layouts, cart icon, sidebar controls, checkout styling
LearnDash	Course grids, focus mode styling, dashboard, sidebar controls
LearnPress	Course styling + sidebar controls
LifterLMS	Course archive styling, sidebar widget areas + archive sidebar control
bbPress	Forum templates, styling, sidebar controls
Elementor	Full support including Theme Builder header/footer locations
FluentCart	Product pages, checkout, sidebar controls
Dokan	Vendor store styling, store header position control, BuddyPress integration

Styled Integration (dedicated CSS, no separate Customizer options)

These load a dedicated BuddyX Pro stylesheet automatically when active, so they match the theme (dark mode included). They have no plugin-specific Customizer controls and follow the theme's global sidebar setting:

Tutor LMS, Sensei LMS
GamiPress, WP Job Manager
The Events Calendar, GeoDirectory
WC Vendors, WCFM Marketplace

Compatible (no dedicated theme styling)

Works with the theme but has no dedicated stylesheet or Customizer options:

Paid Memberships Pro

BuddyPress / BuddyBoss

Which template pack should I use?

BP Nouveau - Required. BP Legacy is not supported.

Set at: Settings > BuddyPress > Options > Template Pack

Does it work with BuddyBoss Platform?

Yes, fully. All BuddyBoss components are styled. Some BuddyBoss Platform Pro customizer options are replaced by BuddyX Pro's customizer.

WooCommerce

How do I show the cart icon in header?

Install and activate WooCommerce
Appearance > Customize > Site Header > Header Elements
Toggle Site Cart to On

Does it support all product types?

Yes - simple, variable, grouped, external, downloadable, virtual, and subscription products.

LearnDash

Which LearnDash template works best?

LearnDash 3.0 (LD30) - Recommended for best BuddyX Pro integration.

Set at: LearnDash LMS > Settings > General > Active Template

Does Focus Mode work?

Yes. BuddyX Pro enhances Focus Mode with:

Dark mode toggle in focus header
Improved mobile sidebar
Theme color integration

Page Builders

Does it work with Elementor?

Yes, fully supported:

All widgets work
Theme Builder supported
Custom headers/footers
Use "Elementor Canvas" for full-width designs

What about other page builders?

Builder	Support Level
Elementor	Full
Beaver Builder	Full
Gutenberg	Full
WPBakery	Basic
Divi	Use Divi theme instead

Caching Plugins

Which caching plugin is best?

Recommended:

WP Rocket (premium, easiest)
LiteSpeed Cache (free, for LiteSpeed servers)
W3 Total Cache (free, more complex)

What settings should I avoid?

Aggressive JS combining (can break menus)
Caching logged-in users (breaks BuddyPress)
Caching cart/checkout pages

Known Conflicts

Plugins to Avoid

Multiple caching plugins at once
Other BuddyPress themes running simultaneously
Outdated BuddyPress customization plugins

Testing New Plugins

Always test on a staging site first. If issues occur:

Deactivate the new plugin
Check if issue resolves
Contact plugin developer or our support

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

WooCommerce FAQ

Quick answers for WooCommerce and e-commerce integration.

Setup

How do I add the cart icon to the header?

Install and activate WooCommerce
Appearance > Customize > Site Header > Header Elements
Toggle Site Cart to On
Click Publish

The cart icon shows item count and opens mini-cart on click.

Shop page shows 404

WooCommerce > Settings > Products
Check Shop Page is assigned
Create "Shop" page if missing
Settings > Permalinks > Click Save to refresh

Layouts

How do I change shop layout?

Appearance > Customize > WooCommerce offers:

Products per row (2, 3, or 4)
Products per page
Product card style
Sale badge style

Appearance > Customize > Sidebar
Find Shop Sidebar setting
Choose: Left, Right, or None

Can I customize single product pages?

Yes, via:

Customize > WooCommerce > Single Product
Elementor WooCommerce Builder (if using Elementor Pro)

Features

Does it support variable products?

Yes, all WooCommerce product types work:

Simple, Variable, Grouped
External/Affiliate
Downloadable, Virtual
Subscription (with extension)

Does it support product quick view?

BuddyX Pro provides the foundation. For full quick view, install:

YITH WooCommerce Quick View
Quick View for WooCommerce

Does mini-cart work?

Yes. When enabled, clicking the cart icon opens a slide-out mini-cart panel showing:

Cart items
Quantities
Subtotal
Links to cart/checkout

Styling

How do I customize the checkout page?

Checkout is automatically styled. For more control:

WooCommerce Checkout Field Editor (rearrange fields)
Elementor WooCommerce Builder (full redesign)

How do I change sale badge style?

Appearance > Customize > WooCommerce > General
Choose Sale Badge Content: Percentage or Text
Choose Sale Badge Style: Circle or Square

How do I hide product elements?

Use CSS to hide elements:

/* Hide SKU */
.product_meta .sku_wrapper { display: none; }

/* Hide categories */
.product_meta .posted_in { display: none; }

Extensions

Does it work with WooCommerce extensions?

Yes, most extensions work seamlessly:

WooCommerce Subscriptions
WooCommerce Bookings
WooCommerce Memberships
Product Add-Ons
PDF Invoices

Does it work with Dokan/multi-vendor?

Yes, BuddyX Pro has dedicated Dokan integration. See Dokan Setup.

Got a question? We're a friendly team - happy to help. Email support@wbcomdesigns.com

Frequently Asked Questions

Find quick answers by topic.

FAQ Categories

Licensing & Updates

License activation, renewals, updates, site limits

Customization

Colors, fonts, header, footer, sidebar, logo, CSS

Plugin Compatibility

BuddyPress, WooCommerce, LearnDash, Elementor, caching

BuddyPress / BuddyBoss

Members, groups, profiles, activity, template packs

WooCommerce

Shop, cart, checkout, products, extensions

Performance

Speed, caching, memory, hosting, optimization

Mobile & Responsive

Mobile menu, breakpoints, responsive issues

Developer

Child themes, hooks, templates, custom code

Quick Answers

Most Asked Questions

Question	Quick Answer
How do I activate my license?	Customize > Theme License > Enter key > Activate
How do I build a homepage?	Pages > Add New with block patterns, then Settings > Reading > A static page
How do I add a menu?	Appearance > Menus > assign to a header location
How do I change colors?	Customize > Site Skin > Color Scheme
How do I enable dark mode?	Customize > Skin > Enable Dark Mode > Yes
How do I show cart icon?	Customize > Site Header > Header Elements > Site Cart
Why is my site slow?	Install caching plugin + optimize images
My changes aren't showing?	Click Publish, then clear plugin + browser cache
Members page shows 404?	Settings > Permalinks > Save Changes

Can't Find Your Answer?

Search documentation at docs.wbcomdesigns.com
Check troubleshooting at Troubleshooting Guide
Contact support at support@wbcomdesigns.com

Before Contacting Support

See Before Contacting Support to gather:

WordPress and theme versions
Screenshot of issue
Steps to reproduce
Site Health info

Getting Started

New to BuddyX Pro?

Support: support@wbcomdesigns.com

Glossary

Plain-English definitions of WordPress, BuddyX Pro, and related terms you'll encounter in these docs. Listed alphabetically - use Cmd+F (Mac) / Ctrl+F (Windows) to find a term quickly.

If a term in the docs isn't defined here and isn't obvious from context, email support@wbcomdesigns.com and we'll add it.

A

Activity Stream (BuddyPress) - The shared feed of recent posts, replies, comments, and updates from all members of your community. Similar to Twitter's home timeline or Facebook's news feed. Set up via the BuddyPress Activity Stream settings.

Admin (WordPress user role) - A user with full control over your site. Can install plugins, change themes, edit content, manage other users. The first user you create when installing WordPress is an Admin.

B

bbPress - A free WordPress plugin that adds discussion forums. Used for traditional forum-style sites where members create topics and reply to each other. Often paired with BuddyPress for full community sites. See bbPress Setup.

Block (WordPress) - The building unit of the modern WordPress editor. Each paragraph, image, heading, button, or video is a "block" you can move around. Replaced the older "classic editor" in WordPress 5.0.

Block Editor (WordPress) - The modern editor used when you create or edit a page/post. Also called "Gutenberg" (the project codename). Lets you drag-and-drop blocks to build pages. The default WordPress experience since 2018.

Block Pattern (WordPress) - A pre-designed group of blocks you can insert with one click. BuddyX Pro ships 87 patterns for hero sections, pricing tables, contact forms, etc. See Block Patterns.

Brand color - A specific color (usually a "hex code" like #FF5733) that represents your company or project. Used consistently across your site for buttons, links, accents.

BuddyBoss Platform - A paid alternative to BuddyPress with extra community features (advanced profile types, monetization, etc.). BuddyX Pro works with both. Sold by buddyboss.com.

BuddyPress - A free, open-source WordPress plugin that adds community features: user registration, member profiles, activity feeds, groups, private messaging. The most popular choice for community sites on WordPress. Free at buddypress.org.

C

Cache - Saved copies of web pages or data, kept to avoid recomputing them. Browsers cache pages so revisits load faster. WordPress can use page caching (via plugins like WP Rocket, W3 Total Cache, LiteSpeed Cache) to serve pages without running PHP each time. After making changes, you may need to clear (or "purge") your cache to see updates.

Capability (WordPress) - A specific permission, like "can publish posts" or "can install plugins." User roles (Admin / Editor / Author / Subscriber) are bundles of capabilities.

Category (WordPress) - A way to group blog posts by broad topic (e.g. "News", "Tutorials"). One post can belong to multiple categories. Categories typically appear in navigation.

CDN (Content Delivery Network) - A network of servers worldwide that store copies of your site's files (images, CSS, JS). When a visitor in Australia loads your site, the CDN serves files from a nearby server instead of your origin server - faster page loads. Common CDNs: Cloudflare, Bunny, KeyCDN.

Child Theme - A custom version of a theme that inherits from a "parent" theme (in our case, BuddyX Pro). Lets you customize without losing your changes when the parent updates. See the Child Theme guide for setup.

Color Mode (BuddyX 5.1.0) - One of three settings for how your site displays: Light, Dark, or Auto. Light always uses bright colors; Dark always uses dark; Auto matches the visitor's device. See Dark Mode.

Color Preset / Style Preset (BuddyX 5.1.0) - A pre-tuned set of colors you apply with one click. BuddyX Pro ships 14 presets (Default Light, Default Dark, Sapphire, Indigo, Coral, Carbon, etc.). Picking a preset rewires every color across the site at once. See Color Presets.

Cookie (web browser) - A small piece of data your site stores in the visitor's browser. Used for things like "remember if this visitor toggled dark mode" or "keep this visitor logged in." Subject to consent laws in many jurisdictions (GDPR, CCPA).

Custom Post Type (CPT) (WordPress) - A custom kind of content beyond the built-in Posts and Pages. Example: WooCommerce adds a "Product" custom post type. LearnDash adds "Course", "Lesson", "Topic" custom post types.

Customizer (WordPress Customizer) - The visual settings panel at Appearance → Customize in your WordPress admin. Lets you change colors, fonts, header layout, etc. with a live preview on the right. The main place you'll spend time configuring BuddyX Pro.

Customizer Framework (BuddyX 5.1.0) - The in-theme framework that powers the BuddyX Customizer controls. Pre-5.1.0, the theme used the third-party Kirki plugin; 5.1.0 ships its own framework, so no extra plugin is needed.

D

Dark Mode - A version of your site that uses dark backgrounds + light text (instead of the traditional light backgrounds + dark text). Easier on the eyes in low light, popular as a 2020s feature. BuddyX Pro can ship dark mode always-on, always-off, or visitor-toggleable. See Dark Mode.

Dashboard (WordPress) - The back-end admin area you see after logging in to your site. The URL is yoursite.com/wp-admin/. Distinct from the "front-end" which is what visitors see.

Database (WordPress) - Where WordPress stores all your content (posts, pages, settings, comments, users). Usually MySQL or MariaDB. You don't need to touch the database directly for normal use; WordPress reads/writes for you.

Demo Content / Starter Pages - Pre-built example pages you can load with one click to see what a finished site could look like. BuddyX Pro 5.1.0 ships starter pages (Home, About, Services, Pricing, etc.) via the Demo Importer.

Dokan - A free + paid WordPress plugin that turns WooCommerce into a multi-vendor marketplace (multiple sellers, one storefront). Like Etsy. BuddyX Pro integrates with Dokan's vendor dashboard styling. See Dokan Marketplace.

E

Editor (WordPress user role) - A user who can write, edit, and publish posts and pages - including other users' content. One step below Admin (can't install plugins or change themes).

Excerpt (WordPress) - A short summary of a blog post used in archive listings (the page that lists multiple posts). Either WordPress auto-generates it from the post's opening, or you write a custom one. BuddyX Pro's blog layout settings let you control excerpt length (default 30 words).

F

Favicon / Site Icon - The small icon shown next to your site title in browser tabs, bookmarks, and mobile home-screen shortcuts. Must be a 512×512 square image. Set in Appearance → Customize → Site Identity.

Featured Image (WordPress) - The main image attached to a blog post. Shown in archive listings, social shares (Facebook/Twitter preview), and at the top of single-post pages. Set in the right-side panel when editing a post.

FluentCart - A newer, simpler e-commerce plugin focused on digital goods (downloadable files, ebooks, courses). Lighter alternative to WooCommerce. BuddyX Pro has dedicated integration styling.

Footer - The bottom section of every page, usually holding copyright text, site links, social icons, and widgets like recent posts or contact info. Configure via Customize → Site Footer.

Forum (community feature) - A traditional discussion area where members create topics and others reply. Usually organized by category. WordPress supports forums via plugins like bbPress. Different from BuddyPress Groups, which are more social-feed style.

Front-end - The public side of your site that visitors see. Opposite of "back-end" / "dashboard" (the admin side at /wp-admin/).

G

GDPR - The European Union's General Data Protection Regulation. Requires sites to disclose what visitor data they collect, get consent for tracking, and let visitors request data deletion. If your site serves any EU traffic (it probably does), you need a Privacy Policy page and (depending on what tracking you use) a cookie consent banner.

Glyph - A single character or icon in a font. The little envelope, magnifying glass, or shopping cart icons in your header are glyphs from icon fonts like FontAwesome.

Group (BuddyPress) - A sub-community within your site. Members join groups based on shared interest, like a Facebook group. Each group has its own activity feed, members list, and (optionally) forum. Different from a bbPress Forum, which is topic-based not membership-based.

H

Header - The top section of every page, holding your logo, main menu, and possibly a search icon, cart icon, notification bell, etc. BuddyX Pro ships 4 header layouts. Configure via Customize → Header.

Header Preset (BuddyX Pro) - A one-click header style that sets your header's visual personality - Default, Solid, Transparent, Minimal, or Glass - without moving your menu or icons. The Header Style (preset) and the Menu Layout are independent choices. Set at Customize → Header → Site Header. See Header Presets.

Hex code (color) - A 6-character code that represents a specific color, like #FF5733 (a red-orange). Prefixed with #. Most color pickers accept hex codes.

Homepage (WordPress) - The page visitors see at your domain root (e.g. yoursite.com/). By default, WordPress shows your latest blog posts here. Most sites override this with a custom "Home" page via Settings → Reading.

Host / Web hosting - The company whose servers your WordPress site runs on. Examples: SiteGround, Cloudways, WP Engine, Kinsta. Different from your "domain registrar" (where you bought your site's URL) - though many companies offer both.

HTTPS / SSL - Encrypted, secure version of HTTP. A site at https:// (with the padlock icon in the browser) has an SSL certificate that encrypts data between visitor and server. Required by Google for SEO; essential for any site collecting payments or logins. Most hosts provide free SSL certificates via Let's Encrypt.

J

Jetpack - A WordPress plugin from Automattic (the company that makes WordPress.com). Offers traffic stats, related posts, social sharing, image optimization, and security features. Free tier is decent; paid tiers add backups and other premium features.

L

Landing page - A standalone page designed to convert visitors to take a specific action (sign up, buy, download). Usually has a hero section, key benefits, social proof, and a clear call-to-action. BuddyX Pro ships landing-page block patterns.

LearnDash - A popular paid WordPress plugin for selling online courses (LMS). Supports lessons, topics, quizzes, certificates, drip schedules, course pricing. BuddyX Pro has deep visual integration with LearnDash's course and lesson templates.

LearnPress - A free WordPress LMS plugin, lighter alternative to LearnDash. Good for trying out the LMS approach before committing to a paid platform.

LifterLMS - Another LMS plugin with strong focus on memberships and bundled course access.

Light Mode - The traditional "bright background, dark text" appearance of most websites. Opposite of Dark Mode. See Color Mode.

Live Preview (WordPress Customizer) - The right-side panel in the Customizer that shows what your settings will look like, updated as you change them. Changes don't apply to the live site until you click Publish.

LMS (Learning Management System) - A platform for delivering online courses. Lets instructors organize lessons, track student progress, deliver quizzes, issue certificates. LearnDash, LearnPress, LifterLMS, TutorLMS, and Sensei are LMS plugins for WordPress.

Loco Translate - A free WordPress plugin for translating themes and plugins into other languages without writing code. Edit translations directly in your WordPress admin. See Translate with Loco.

Logo - The image (usually with your brand name) shown in the header instead of (or alongside) the text site title. Upload via Customize → Site Identity → Logo. Best as a transparent PNG or SVG, 200-300px wide.

M

Marketplace (e-commerce term) - An online store where multiple independent sellers ("vendors") list their own products under one storefront. Like Etsy, Amazon, or eBay. Built with WooCommerce + a marketplace plugin like Dokan, MultiVendorX, WCFM, or WC Vendors.

Member Directory (BuddyPress) - The public page listing all the members of your community. Visitors browse member cards, filter, search. URL is typically /members/.

Member Profile (BuddyPress) - A page representing a single community member with their avatar, name, bio, activity, and social connections. URL is typically /members/<username>/.

MemberPress / Paid Memberships Pro / Restrict Content Pro - Paid plugins that gate site content behind a login or paid subscription. Use these when you want a members-only site or recurring subscriptions for content access.

Menu (WordPress) - The list of links shown in your header (or elsewhere). Built at Appearance → Menus. You can have multiple menus assigned to different "locations" (Primary, Footer, Mobile, etc.).

MultiVendorX (MVX) - A free + paid marketplace plugin alternative to Dokan. Stronger feature set, slightly more technical to configure. BuddyX Pro has integration styling.

N

Nonce (WordPress security) - A "number used once" token that prevents form submissions from being faked by attackers. WordPress generates a fresh nonce for each form; your site only accepts submissions that include a valid one.

P

Page (WordPress) - Static content like Home, About, Contact, Privacy Policy. Unlike Posts, Pages don't have categories, tags, or chronological order. Used for site furniture, not articles.

Patterns (Block Patterns) - See Block Pattern.

Per-Page Settings (BuddyX Pro 5.1.0) - A Page Settings panel in the editor's right-side column that overrides your site-wide settings for just one page or post - sidebar, content width, header style, color mode, hide header/footer, and the site loader. Each option defaults to "Use site default," so nothing changes until you pick a value. See Per-Page Settings.

Permalink - The full URL of a page or post (e.g. yoursite.com/blog/my-first-post/). WordPress lets you choose the URL pattern at Settings → Permalinks.

PHP - The programming language WordPress is written in. You don't need to know PHP for normal use; it's relevant only if you're building a custom plugin or child theme.

Plugin - A WordPress add-on (similar to an app) that adds features. Install via Plugins → Add New. Most popular plugins are free; some are paid or have free + paid tiers. BuddyPress, WooCommerce, LearnDash, Yoast SEO are examples.

Polylang / WPML - Plugins that turn WordPress into a multilingual site. WPML is paid + comprehensive; Polylang has a free tier. Different from Loco Translate, which translates the theme/plugin text but not your content.

Post (WordPress) - A blog entry with date, author, and (usually) categories + tags. Listed chronologically on your blog page. Different from a Page, which is static.

Primary Color (BuddyX Site Skin) - Your main brand color, used across buttons, links, and accent UI. Set via Customize → Site Skin → Primary Color. The most influential single color setting in the theme.

Primary Menu (WordPress) - A "menu location" - a named slot in your header where one of your menus appears. Most themes have at least a Primary Menu location; BuddyX Pro also has Mobile, Footer, and other locations.

Privacy Policy - A page disclosing what data your site collects, how it's used, and how visitors can request deletion. Required by GDPR, CCPA, and similar laws. WordPress ships a template at Settings → Privacy → Create New Page - customize the template to match what your specific site actually does.

Publish (WordPress / Customizer) - The action that makes your changes live to visitors. Drafts are saved-but-not-public; Published content is live. In the Customizer, the Publish button (top right) commits your changes; the Preview area shows them before you publish.

R

Rank Math - A free + paid WordPress SEO plugin, alternative to Yoast SEO. Helps your articles rank in Google by analyzing titles, content length, keywords, and metadata.

Responsive design - A design that adapts to different screen sizes - looks right on desktop, tablet, and phone. BuddyX Pro is fully responsive out of the box; settings let you control specific behavior at each breakpoint.

S

Sensei LMS - An LMS plugin from Automattic (makers of WordPress.com + WooCommerce). Lighter weight than LearnDash, good integration with WooCommerce for course pricing.

Side Panel (BuddyX Pro) - A slide-out navigation drawer that opens from the left when a visitor taps the hamburger toggle. It holds its own menu, with separate locations for logged-in and logged-out users, and is distinct from the mobile header menu - you can run both. Configure at Customize → Site Side Panel. See Side Panel Settings.

Sidebar (WordPress) - A column beside your main content where widgets appear (recent posts, search box, social links, etc.). BuddyX Pro lets you choose left / right / none / both per content type (blog archive, single post, BuddyPress, WooCommerce, etc.) via Customize → Site Sidebar Layout.

Sign-in Popup (BuddyX Pro) - A Pro feature that opens login and registration in an in-page modal instead of redirecting to the full /wp-login.php page, so visitors stay on the content they were reading. Turn it on at Customize → General → Sign-in Popup | Register Form Fields. See Sign-in Popup.

Site Icon - See Favicon.

Site Identity (WordPress Customizer) - The Customizer section where you set your site title, tagline, logo, and favicon. Customize → Site Identity. The first place to visit when setting up a new site.

Site Skin (BuddyX Pro) - The Customizer section where you control all the site's colors, including light + dark palette, color presets, and the Color Mode toggle. Customize → Site Skin. Pre-5.1.0 this was called "Skin Settings"; renamed for clarity.

Slug - The URL-friendly part of a title. The page titled "About Our Company" might have slug about-our-company and URL /about-our-company/. WordPress generates slugs automatically; you can edit them when creating or editing content.

SSL - See HTTPS.

Starter Content - See Demo Content.

Static page - A page set as your homepage (instead of WordPress showing your latest blog posts). Set via Settings → Reading → Your homepage displays → A static page. Most sites use a static "Home" page.

SureCart - A modern e-commerce alternative to WooCommerce, focused on simplified setup and digital goods + subscriptions. BuddyX Pro has dedicated integration styling.

T

Tag (WordPress) - A keyword associated with a blog post (e.g. "react", "tutorial", "beginner"). More granular than Categories; one post can have many tags. Visitors can browse posts by tag.

Tagline (WordPress Site Identity) - A short one-line description of your site that appears below or near the site title. The default tagline is "Just another WordPress site" - change it via Customize → Site Identity.

Taxonomy (WordPress) - A way to organize content. Categories and Tags are the two built-in taxonomies. Plugins can add custom taxonomies (e.g. WooCommerce adds "Product Category" and "Product Tag").

Template - A PHP file that defines how a specific type of page is displayed (single posts, blog archive, search results, etc.). Themes ship templates; you customize them via child themes.

Theme - The visual + structural foundation of your WordPress site. Controls layout, typography, colors, and the templates for different page types. BuddyX Pro is a theme. Only one theme is active at a time; switch via Appearance → Themes.

Typography Preset (BuddyX 5.1.0) - A pre-tuned font pairing (heading font + body font) you apply with one click. BuddyX Pro ships 7 font-pairing presets (Inter, Geist, IBM Plex, DM Sans, Humanist, Editorial, Magazine), plus a Default system-ui baseline that applies no preset. See Typography Presets.

TutorLMS - A free + paid LMS plugin, alternative to LearnDash. Modern UI, good free tier.

W

WC Vendors - A long-established marketplace plugin for WooCommerce. Like Dokan / MultiVendorX / WCFM. BuddyX Pro has integration styling.

WCFM Marketplace - Another WooCommerce marketplace plugin. Strong feature set, configurable commission rules, vendor dashboard. BuddyX Pro integrates with the WCFM vendor pages.

Widget (WordPress) - A reusable content block (like Recent Posts, Search, Tag Cloud) you can drop into your sidebar or footer widget areas. Configure at Appearance → Widgets.

WooCommerce - The free, industry-standard WordPress plugin for selling things online. Handles cart, checkout, payments (via gateways like Stripe and PayPal), shipping, inventory, taxes, and order management. Powers ~30% of all online stores.

WP Admin / WordPress Admin / Dashboard - The back-end area at yoursite.com/wp-admin/. Where you write posts, manage settings, install plugins. Only logged-in users with appropriate roles see this.

WPML - A paid plugin for building multilingual WordPress sites. The most full-featured multilingual solution; alternative to Polylang.

Y

Yoast SEO - A free + paid WordPress SEO plugin, the most widely-used. Helps your articles rank in Google by analyzing titles, content length, keywords, readability, and metadata.

A note on terminology

WordPress and its ecosystem use a lot of overlapping or interchangeable words. A "Customizer" is technically the "WordPress Customizer". "Site Skin" is BuddyX Pro's name for the customizer section that controls colors; some other themes call this "Theme Options" or "Styling". A "dashboard" usually means the WP Admin area but some integrations (like Dokan vendor dashboard) reuse the word.

When in doubt, search the WordPress documentation at wordpress.org/documentation/ or ask us at support@wbcomdesigns.com - we're happy to clarify any term that's not covered here.

FAQ - common questions
Troubleshooting - common issues and fixes
Quick Start - first-time setup walkthrough
Choose Your Path - pick your site type

Troubleshooting

Quick solutions to common BuddyX Pro issues.

Quick Fixes (Try First)

Before anything else:

Clear browser cache - Ctrl+Shift+R (Windows) / Cmd+Shift+R (Mac)
Clear site cache - Purge caching plugin
Try incognito mode - Rules out browser extensions
Wait 5 minutes - Server may need time

Installation Issues

Theme won't activate

Check PHP version:

Tools > Site Health > Info > Server
Need PHP 8.1 or higher
Contact host to upgrade if needed

Check WordPress version: Need WordPress 6.0+. Update at Dashboard > Updates.

Wrong ZIP file: Upload the inner buddyxpro folder, not the download wrapper.

White screen after activation

Increase memory:

// Add to wp-config.php
define( 'WP_MEMORY_LIMIT', '256M' );

Enable debugging:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

Check /wp-content/debug.log for errors.

Customizer Issues

Customizer blank or missing options

BuddyX Pro 5.1.0 dropped the Kirki dependency - the customizer framework is now built into the theme, so there is nothing extra to install. If the customizer panel renders blank, verify:

The theme is fully unzipped under wp-content/themes/buddyx-pro/ (a partial upload missing inc/Customizer_Framework/ will fail to register fields).
No JS error in the browser console (a plugin conflict on customize-controls.js can blank the sidebar).
The user has the edit_theme_options capability.

If the panel still shows nothing, switch the theme, then back to BuddyX Pro, to re-register controls.

Changes not saving

Disable security plugins temporarily
Clear all caches
Try different browser

Changes not showing on frontend

Cache Type	How to Clear
Browser	Ctrl+Shift+R
Plugin	WP Rocket > Clear Cache
CDN	Cloudflare > Purge Everything

Header Issues

Clear all caches
Disable JS minification in caching plugin
Check browser console (F12) for JavaScript errors

Cart icon missing

Verify WooCommerce is active
Customize > Site Header > Header Elements
Toggle Site Cart to On

Logo wrong size

Customize > Site Identity > Logo Width

Or add CSS:

.site-logo-wrapper img { max-width: 180px !important; }

Customize > Site Header > Sticky Header
Toggle Enable Sticky Header to On
Clear cache

BuddyPress Issues

Members page 404

Settings > Permalinks
Click Save Changes (don't change anything)

"Requires BP Nouveau" error

Settings > BuddyPress > Options
Select BP Nouveau under Template Pack
Save

Activity stream empty

Enable Activity at Settings > BuddyPress > Components
Create test content (post status update)
Clear cache

Cover photos won't upload

Check PHP upload limit (need 10MB+)
Check folder permissions: chmod 755 wp-content/uploads

WooCommerce Issues

Shop page 404

WooCommerce > Settings > Products
Verify Shop Page is assigned
Settings > Permalinks > Save Changes

Mini-cart not opening

Clear all caches
Disable JS minification
Check browser console for errors

Performance Issues

Site loading slowly

Quick wins:

Install caching plugin (WP Rocket, W3 Total Cache)
Optimize images (use WebP, compress)
Use CDN (Cloudflare free tier)
Deactivate unused plugins

Customizer slow

Increase PHP memory to 256MB
Reduce Google Fonts loaded
Disable admin-heavy plugins temporarily

Memory exhausted errors

// Add to wp-config.php
define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

Dark Mode Issues

Toggle not appearing

Customize > Site Skin > Color Mode
Toggle Dark Mode Toggle to On
Clear cache

Dark mode colors wrong

Customize > Site Skin > Dark Mode Colors

Configure:

Dark background color
Dark text color
Dark link color

Mobile Issues

Elements overlapping

Check custom CSS isn't breaking mobile
Add mobile-specific CSS:

@media (max-width: 767px) {
    /* Your fixes */
}

Text too small

Customize > Typography > Body Typography

Increase font size, or add CSS:

@media (max-width: 767px) {
    body { font-size: 16px; }
}

Error Messages

500 Internal Server Error

Rename .htaccess to .htaccess-old (test if site loads)
Increase PHP memory/timeout
Check file permissions (files: 644, folders: 755)

Database connection error

Verify credentials in wp-config.php
Contact host - database server may be down

White screen of death

Enable debugging (see above)
Increase memory
Disable plugins via FTP: rename /plugins/ to /plugins-disabled/

Still Stuck?

Before Contacting Support

Gather this info:

WordPress version (Dashboard > Updates)
BuddyX Pro version (Appearance > Themes)
PHP version (Tools > Site Health > Info > Server)
Screenshot of issue
Steps to reproduce

Contact Support

Email: support@wbcomdesigns.com

See Before Contacting Support for checklist.

FAQ - Quick answers by topic
Installation Guide
BuddyPress Setup

Something unclear? Open a support ticket → · Refund policy

Buy BuddyX Pro

Option	Key	Effect
Default (default)	`` (empty)	Inherit the global `sidebar_option` setting
None	`none`	Full-width feed, no sidebar
Left	`left`	Sidebar on the left of the feed
Right	`right`	Sidebar on the right of the feed
Both	`both`	Sidebar on both sides

Getting Started

Complete Setup Guide: From a Fresh WordPress Install to a Live Community

Step 1: Start with a fresh WordPress install

Step 2: Install and activate BuddyX Pro

Step 3: Add your community engine (BuddyNext)

Step 4: Import demo content (recommended)

Step 5: Set your brand (logo, colors, fonts)

Step 6: Build your header, menus, and footer

Step 7: Style your community pages

Step 8: Design your login and sign-in experience

Step 9: Already on BuddyX free? Migrate your settings

Step 10: Go live and check the member journey

Where to go next

Choose Your Path

A site where people sign up, post, and chat

A site to sell physical or digital products

A site to teach online courses or lessons

A site to publish articles or news (blog / magazine)

A site where OTHER people sell things (a marketplace)

A community + an online store at the same time

A community + online courses at the same time

A private / members-only site

Next steps after picking your path

Stuck or confused?

Demo Content (Starter Pages)

What it creates

Why it works this way

Where to find it

Steps - existing site

Steps - fresh install

Customising the result

Resetting

What 5.0.x users will notice

Related

Installation Guide

Before You Begin

Pre-Installation Checklist

Download the Theme

Installation Methods

Method 1: WordPress Admin Upload (Recommended)

Method 2: FTP Upload

Method 3: cPanel File Manager

Post-Installation Setup

Step 1: Install recommended plugins

Step 2: Set up demo content (optional)

Step 3: Configure Basic Settings

Step 4: Set Up Menus

Step 5: Configure Widgets

Updating the Theme

Automatic Updates

Manual Update

Troubleshooting Installation

Upload Failed: File Size Limit

Theme Is Missing stylesheet

White Screen After Activation

Customizer Not Loading

Child Theme Installation

Next Steps

Introduction to BuddyX Pro

What BuddyX Pro is

Theme highlights

Bundled plugin ecosystem (included with every license)

Who BuddyX Pro is for

Third-party plugins also work

What you need

Get started

Quick Start (about 45 minutes)

Choose your path

Customizer overview

Next steps

Quick Start - First-Time Setup

What you'll set up (and why each is mandatory)

Step 1 - Install the theme (2 minutes)

Step 2 - Site identity (5 minutes)

Step 3 - Colors (5 minutes)

Option A - Use a color preset (fastest)

Option B - Set your brand colors manually

Step 4 - Fonts (5 minutes)

Option A - Use a typography preset (fastest)

Option B - Set fonts manually