BuddyX
Get BuddyX Pro

Recipe: Build your homepage

Free & Pro

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 (see Installation 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)

  1. Go to Pages > Add New
  2. Give it a title (e.g. Home) - you can hide this title later in Step 5
  3. 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.

  1. In the page editor, click the + inserter
  2. Open the Patterns tab
  3. Browse or search a category and click a pattern to insert it
  4. 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.

  1. Download it from https://wbcomdesigns.com/downloads/wbcom-essential/ (free), then install and activate the zip from Plugins > Add New > Upload Plugin
  2. Back in your page, click the + inserter and search for a Wbcom Essential block or pattern
  3. 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.

  1. Go to Appearance > Customize
  2. Navigate to Header > Site Header
  3. Under Header Style, click a preset - Default, Solid, Transparent, Minimal, or Glass
  4. Under Menu Layout, pick one of the four header layouts
  5. 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.

  1. Go to Settings > Reading
  2. Under Your homepage displays, choose A static page
  3. Set Homepage to the page you built
  4. 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.

Related

Got a question? We're a friendly team - drop us a line at support@wbcomdesigns.com.