Skip to content
WPBits WPBits WPBits Documentation

Theme Builder Overview

WPBits Theme Builder is a powerful feature that allows you to replace and customize any part of your WordPress theme using Elementor, without writing code.

What is Theme Builder?

Section titled “What is Theme Builder?”

Theme Builder lets you change the header, footer, archive, single post, and many other components that are normally managed and styled by your active theme. Instead of being limited by your theme’s design, you can create custom templates for any location on your site.

Key Capabilities

Section titled “Key Capabilities”

Customizable Locations

Section titled “Customizable Locations”
  • Headers: Create custom headers with navigation, logos, and search
  • Footers: Design unique footer layouts with widgets and menus
  • Archive Pages: Customize category, tag, and custom taxonomy archives
  • Single Posts: Design custom single post layouts
  • Single Pages: Custom page templates
  • 404 Pages: Create branded error pages
  • Search Results: Custom search result pages
  • Author Archives: Custom author page layouts

Theme Builder Widgets

Section titled “Theme Builder Widgets”

Special widgets available only in Theme Builder templates:

  • [WPBits] Breadcrumb: Dynamic breadcrumb navigation
  • [WPBits] Post Content: Display post/page content
  • [WPBits] Post Title: Dynamic post titles
  • [WPBits] Archive Title: Archive page titles
  • [WPBits] Archive Description: Archive descriptions
  • [WPBits] Site Logo: Your WordPress site logo
  • [WPBits] Site Navigation: Custom menus with mega menu support

Benefits

Section titled “Benefits”

Design Freedom

Section titled “Design Freedom”
  • Not limited by theme restrictions
  • Use Elementor’s full design capabilities
  • Create unique layouts for different sections

Consistency

Section titled “Consistency”
  • Maintain consistent design across all pages
  • Reusable templates for similar content types
  • Global styling updates

Performance

Section titled “Performance”
  • Replace heavy theme templates with optimized designs
  • Control exactly what loads on each page
  • Reduce unnecessary theme bloat

Getting Started

Section titled “Getting Started”

Basic Workflow

Section titled “Basic Workflow”
  1. Create Template: Design your template using Elementor
  2. Set Location: Assign template to specific locations
  3. Preview: Test on different pages
  4. Publish: Make template live

Accessing Theme Builder

Section titled “Accessing Theme Builder”
  1. In WordPress admin, go to WPBits AFE → Theme Builder
  2. Click Add New Template
  3. Select the template location (Header, Footer, Archive, etc.)
  4. Click Create Template
  5. Design your template with Elementor

Template Hierarchy

Section titled “Template Hierarchy”

How Templates are Applied

Section titled “How Templates are Applied”

WPBits Theme Builder follows WordPress template hierarchy:

  1. Most Specific: Custom template for specific page ID
  2. Category-Specific: Template for specific category
  3. Post Type: Template for all posts of a type
  4. Global: Template for all matching locations

Example Hierarchy

Section titled “Example Hierarchy”

For a blog post:

  1. Custom template assigned to Post ID #123
  2. Template for “News” category
  3. Template for all “Posts”
  4. Default blog post template

Template Types

Section titled “Template Types”

Header Templates

Section titled “Header Templates”

Create custom site headers with:

  • Site logo
  • Navigation menus (including mega menus)
  • Search bars
  • Social icons
  • Call-to-action buttons
  • Contact information

Learn more about headers →

Section titled “Footer Templates”

Design custom footers with:

  • Widget areas
  • Footer menus
  • Copyright text
  • Social links
  • Newsletter signups
  • Contact forms

Learn more about footers →

Archive Templates

Section titled “Archive Templates”

Customize archive pages with:

  • Archive title and description
  • Grid Master for post loops
  • Filtering options
  • Pagination
  • Breadcrumbs

Learn more about archives →

Single Post Templates

Section titled “Single Post Templates”

Design individual post layouts:

  • Post title and content
  • Featured image
  • Author bio
  • Related posts
  • Comments section
  • Social sharing

Pre-Built Templates

Section titled “Pre-Built Templates”

Speed up development with pre-built templates:

  1. Click the WPBits logo in Elementor
  2. Browse Theme Builder Templates
  3. Import a template
  4. Customize to match your brand

Available Template Categories

Section titled “Available Template Categories”
  • Header templates (various styles)
  • Footer templates
  • Archive grids
  • Single post layouts
  • 404 pages

Dynamic Content

Section titled “Dynamic Content”

Theme Builder templates support dynamic content:

  • Post Title: Automatically shows current post title
  • Post Content: Displays the main content
  • Featured Image: Shows post thumbnail
  • Author Info: Dynamic author details
  • Post Meta: Date, categories, tags
  • Custom Fields: ACF and other custom field plugins

Conditional Display

Section titled “Conditional Display”

Show templates based on conditions:

  • Specific Pages: Only on certain page IDs
  • Categories: Only in specific categories
  • Post Types: Only for certain post types
  • User Roles: Only for logged-in users
  • Archives: Only on archive pages

Best Practices

Section titled “Best Practices”

Performance

Section titled “Performance”
  1. Minimize Widgets: Use only necessary widgets
  2. Optimize Images: Compress header/footer images
  3. Limit Scripts: Avoid heavy JavaScript in global templates
  4. Cache: Enable caching for template output

Design

Section titled “Design”
  1. Responsive: Test on all device sizes
  2. Accessibility: Use proper heading hierarchy
  3. Navigation: Ensure menus work on mobile
  4. Branding: Maintain consistent brand identity

Content

Section titled “Content”
  1. Dynamic: Use dynamic widgets for changing content
  2. Fallbacks: Provide defaults when data is missing
  3. Testing: Preview on different page types

Common Use Cases

Section titled “Common Use Cases”

Complete Theme Override

Section titled “Complete Theme Override”

Replace your entire theme’s front-end:

  1. Create header template
  2. Create footer template
  3. Create archive templates
  4. Create single post template
  5. Assign templates to locations

Partial Customization

Section titled “Partial Customization”

Keep your theme but customize specific parts:

  1. Replace only the header
  2. Keep theme’s content area
  3. Custom footer

Landing Pages

Section titled “Landing Pages”

Create unique headers/footers for landing pages:

  1. Create special header without navigation
  2. Create minimal footer
  3. Assign only to specific pages

Troubleshooting

Section titled “Troubleshooting”

Template Not Showing

Section titled “Template Not Showing”
  • Check template is published (not draft)
  • Verify location assignment
  • Check conditional display rules
  • Clear cache

Content Not Displaying

Section titled “Content Not Displaying”
  • Ensure you’re using correct dynamic widgets
  • Check widget settings
  • Verify post has content

Styling Conflicts

Section titled “Styling Conflicts”
  • Theme CSS may override your styles
  • Use custom CSS with !important if needed
  • Consider using a blank/minimal theme

Migration from Theme

Section titled “Migration from Theme”

Switching from Theme Templates

Section titled “Switching from Theme Templates”
  1. Analyze Current Design: Screenshot your current layouts
  2. Recreate in Elementor: Build templates matching current design
  3. Test Thoroughly: Check all page types
  4. Go Live: Publish templates
  5. Monitor: Watch for any issues

Next Steps

Section titled “Next Steps”

Ready to start building?

  1. Create Header & Footer Templates
  2. Build Archive Templates
  3. Set Up Location Templates

Support

Section titled “Support”

Need help with Theme Builder?