N
HeadlessCoreHeadless Core
Back to Home

Site Modes (Multipurpose Theme)

HeadlessCore is a multipurpose headless theme. One WordPress install + one Next.js app can power eight different site types. Select the mode in Headless Core → Settings → Home Page Layout.

Available modes

Mode homeLayout Homepage shows Demo URL
Multi-demo showcase multi Grid of all 7 demo layouts /
Blog / Magazine blog Blog listing with search /blog
Corporate / Agency corporate Agency layout + team/FAQ/pricing /corporate
Portfolio / Freelancer portfolio Projects, skills, timeline /portfolio
Local Business business Services + testimonials /business
Landing Page landing Single-page campaign (minimal nav) /landing
Shop / E-commerce shop Product catalog /shop
WordPress Page wp_page Gutenberg page at / —

How routing works

When homeLayout is set to anything other than multi, the Next.js homepage (src/app/page.tsx) renders the matching layout component directly — no redirect needed.

// Simplified logic in page.tsx
if (settings.homeLayout === "business") return <BusinessPage />;
if (settings.homeLayout === "shop") return <ShopPage />;
if (settings.homeLayout === "landing") return <LandingPage />;
// ...

The src/lib/siteMode.ts module centralises mode config, sitemap routes, and navigation behaviour.

Mode details

Multi (multi)

Default for new installs. Homepage shows a card grid linking to all demo layouts. Ideal for theme marketplaces, agency portfolios, or evaluating layouts before choosing one.

Routes: /, /blog, /corporate, /portfolio, /business, /landing, /shop

Blog (blog)

Editorial layout with server-side search, category filters, and pagination.

URL params: ?q=search&category=slug&page=2

WordPress content: Posts, categories

Key files:

  • src/app/blog/page.tsx
  • src/lib/blogSearch.ts
  • getBlogPostsPaginated() in graphql.ts

Corporate (corporate)

Agency profile with services, case studies, team, FAQ, pricing, and contact form.

WordPress content:

Section CPT
Services service
Case studies portfolio_item
Team team_member
FAQ faq
Pricing pricing_plan

Key components: TeamSection, FaqSection, PricingSection

Portfolio (portfolio)

Personal brand layout with project grid, skills JSON, and career timeline.

WordPress content: Projects CPT, siteProfile, portfolioSkills, portfolioTimeline

Business (business)

Local service business with hero, services, testimonials, and contact CTA.

WordPress content: Services CPT, Testimonials CPT, site profile

Landing (landing)

Single-page campaign layout. Minimal navigation — header shows only logo, theme toggle, and WP admin link. Footer is hidden.

Ideal for ad campaigns, product launches, and lead-gen pages.

Shop (shop)

Product catalog grid. Data sources (in priority order):

  1. Headless Products CPT (headless_product) — built-in, no WooCommerce required
  2. WooCommerce products via WPGraphQL for WooCommerce (fallback)

Key files:

  • src/app/shop/page.tsx
  • getHeadlessProducts(), getShopProducts() in graphql.ts

WordPress Page (wp_page)

Renders a published WordPress page as the homepage using the Gutenberg BlockRenderer. Set the page slug in theme settings.

Key files:

  • src/components/BlockRenderer.tsx
  • src/app/[...slug]/page.tsx

Landing mode — minimal navigation

When homeLayout is landing, isMinimalNavigation() in siteMode.ts returns true. The global header hides nav links and the footer is removed.

Site profile (shared settings)

Under Multipurpose Site Profile in theme settings:

Field Used by
Tagline All modes
Hero title / highlight / subtitle Corporate, Business, Landing
CTA label and URL Corporate, Business, Landing
Contact email and phone Corporate, Business
Portfolio bio and avatar Portfolio
Skills JSON Portfolio
Timeline JSON Portfolio

Exposed as themeSettings.siteProfile in GraphQL.

Switching modes in production

  1. Change Home Page Layout in wp-admin and save.
  2. On-demand revalidation clears the Next.js cache for /.
  3. Visit your frontend — the new layout appears within seconds.

No code deploy required.

Sitemap behaviour

The sitemap (src/app/sitemap.ts) respects the active mode via getSitemapRoutes():

Mode Included routes
multi All demo paths
blog /, /blog + post URLs
corporate /, /corporate
portfolio /, /portfolio
business /, /business
landing /, /landing
shop /, /shop
wp_page / + page URIs

Recommended use cases

Use case Recommended mode
Agency client sites corporate or business
Personal brand / freelancer portfolio
News / magazine / blog blog
Product launch / ads landing
E-commerce catalog shop
Custom Gutenberg homepage wp_page
Sales demo / theme marketplace multi