BuddyX
Get BuddyX Pro

Customization FAQ

Free & Pro

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:

  1. Pages > Add New, then stack block patterns from the + inserter's Patterns tab
  2. Pick a header style under Appearance > Customize > Site Header
  3. 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?

  1. Appearance > Customize > Site Skin
  2. Choose a Color Preset (10+ options), OR
  3. Set custom colors in Color Scheme
  4. Click Publish

How do I enable dark mode?

  1. Appearance > Customize > Skin
  2. Toggle Enable Dark Mode to Yes
  3. Configure dark mode colors
  4. Click Publish

A toggle icon appears in your header for visitors.

Fonts

How do I change fonts?

  1. Appearance > Customize > Typography
  2. Set Body Typography for main text
  3. Set Heading Typography for H1-H6
  4. Choose from 800+ Google Fonts
  5. Click Publish

Can I use custom fonts (not Google)?

Yes - no code needed. Use WordPress's built-in Font Library:

  1. Go to Appearance > Fonts and upload your font files.
  2. Go to Appearance > Customize > Typography and open any typography panel (Body, Headings, etc.).
  3. Pick your uploaded font from the Family dropdown.
  4. 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

  1. Check specificity - Add !important if needed
  2. Clear all caches - Browser + plugin cache
  3. 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:

  1. 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.
  2. 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).
  3. Check for aggressive optimization - CSS/JS combine or "remove unused CSS" features can strip a style. Temporarily turn combination off and re-test.
  4. 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.

Header

How do I change the header layout?

  1. Appearance > Customize > Site Header > Header Layout
  2. Choose Layout 1, 2, 3, or 4
  3. Click Publish

See Header Layouts for visual comparison.

How do I make the header sticky?

  1. Appearance > Customize > Site Header > Sticky Header
  2. Toggle Enable Sticky Header to On
  3. Click Publish

How do I hide header icons?

  1. Appearance > Customize > Site Header > Header Elements
  2. Toggle off: Search, Cart, Notifications, etc.
  3. Click Publish

How do I add and style my navigation menu?

WordPress core builds the menu; BuddyX Pro decides where it sits and how it behaves:

  1. Build the menu at Appearance > Menus and assign it to a header location (Primary - Logged in / Logged out)
  2. Set its position and the More Menu overflow under Customize > Site Header
  3. 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?

  1. Appearance > Customize > Site Identity
  2. Click Select Logo
  3. Upload your logo (recommended: PNG, 200x60px)
  4. Adjust Logo Width if needed
  5. 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;
}

Sidebar

How do I remove the sidebar?

  1. Appearance > Customize > Sidebar
  2. Find the page type (Blog, Pages, Shop, etc.)
  3. Select No Sidebar
  4. Click Publish

Can I have different sidebars per page?

Yes. When editing a page, use the Sidebar meta box to override the default.

Footer

How do I customize the footer?

  1. Appearance > Customize > Site Footer for layout/background
  2. Appearance > Widgets to add footer content
  3. Add widgets to Footer 1, 2, 3, or 4 columns

How do I change copyright text?

  1. Appearance > Customize > Site Footer > Copyright
  2. Enter your text
  3. Use [current_year] for auto-updating year
  4. Click Publish

Related

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