Location Templates

Location templates allow you to create custom layouts for different parts of your WordPress site and assign them to specific locations, pages, or conditions.

Understanding Locations

Locations are the different areas of your WordPress site where you can apply custom templates:

• Header: Site-wide or conditional headers
• Footer: Site-wide or conditional footers
• Single: Individual post/page layouts
• Archive: Category, tag, and taxonomy archive pages
• 404 Page: Error page layout
• Search Results: Search results page layout

Creating Location Templates

Basic Workflow

1. Create Template: Design your template in Elementor
2. Choose Location: Select where the template should appear
3. Set Conditions: Define when and where it displays
4. Publish: Make the template live

Step-by-Step Process

1. Go to WPBits AFE → Theme Builder
2. Click Add New Template
3. Select a Location Type:
   • Header
   • Footer
   • Single Post
   • Single Page
   • Archive
   • 404
   • Search Results
4. Name your template descriptively
5. Click Create Template
6. Design with Elementor
7. Set display conditions
8. Publish

Display Conditions

Display conditions control when and where your templates appear.

Global Templates

Apply to all pages of a type:

• All Pages: Every page on the site
• All Posts: Every blog post
• All Archives: All archive pages

Specific Templates

Target specific content:

• Specific Page: Single page by ID
• Specific Post: Single post by ID
• Specific Category: Posts in a category
• Specific Tag: Posts with a tag
• Specific Custom Post Type: All posts of a CPT

Advanced Conditions

Combine multiple conditions:

• Include: Pages where template shows
• Exclude: Pages where template doesn’t show

Example:

• Include: All Posts
• Exclude: Category “News”
• Result: Shows on all posts except those in News category

Template Priority

When multiple templates match a location, WPBits uses a priority system:

Priority Order (Highest to Lowest)

1. Specific ID: Template assigned to post ID #123
2. Specific Term: Template for “Design” category
3. Post Type: Template for all “Posts”
4. Global: Template for all content

Example Scenario:

You have:

• Template A: All Posts (Global)
• Template B: Category “News”
• Template C: Post ID #456 (in News category)

When viewing post #456:

• Template C displays (highest priority - specific ID)

When viewing other posts in News:

• Template B displays (category-specific)

When viewing posts not in News:

• Template A displays (global fallback)

Common Location Types

Single Post Templates

Custom layout for blog posts:

Available Widgets:

• [WPBits] Post Title
• [WPBits] Post Content
• [WPBits] Breadcrumb
• Featured Image (standard Elementor widget)
• Author Box (custom or widget)
• Related Posts (using Grid Master)
• Comments (standard or custom)

Common Elements:

Section: Hero/Header
├── Breadcrumb
├── Post Title
├── Post Meta (Date, Author, Categories)
└── Featured Image

Section: Content
└── Post Content

Section: Author Bio
└── Author information

Section: Related Posts
└── Grid Master (related posts query)

Section: Comments
└── Comments widget

Single Page Templates

Custom layout for pages:

Use Cases:

• Landing pages
• About page
• Contact page
• Service pages

Typical Structure:

• No breadcrumbs (often)
• Page title (if needed)
• Page content
• Custom sections
• Call-to-action

Archive Templates

See detailed Archive Templates documentation.

404 Error Templates

Custom error page:

Elements to Include:

• Friendly error message
• Search box
• Popular posts
• Navigation menu
• Link to homepage
• Suggested content

Example Layout:

Section: 404 Message
├── Heading: "404 - Page Not Found"
├── Text: Friendly message
└── Search Widget

Section: Helpful Links
└── Grid Master (popular posts)

Section: CTA
└── Button: "Back to Homepage"

Search Results Templates

Custom search results page:

Elements:

• Search query display
• Results count
• Grid Master (Global Query)
• Search form (to refine)
• Breadcrumbs

Conditional Headers & Footers

Create different headers/footers for different pages:

Example Use Cases

Transparent Header for Homepage:

1. Create “Homepage Header” template
2. Design with transparent background
3. Set condition: Display on Homepage only

Minimal Header for Landing Pages:

1. Create “Landing Page Header” template
2. No navigation menu, just logo
3. Set condition: Display on specific pages (landing pages)

Shop Header with Cart:

1. Create “Shop Header” template
2. Include WooCommerce cart icon
3. Set condition: Display on Shop pages only

Managing Multiple Templates

Organization Tips

1. Naming Convention: Use descriptive names

   • “Header - Main Site”
   • “Header - Homepage”
   • “Header - Landing Pages”
   • “Single Post - Default”
   • “Single Post - News Category”

2. Documentation: Keep notes on what each template is for

3. Regular Cleanup: Delete unused templates

Viewing All Templates

In WPBits AFE → Theme Builder:

• See all created templates
• View assigned locations
• Check status (published/draft)
• Edit or delete templates

Best Practices

Design

1. Consistency: Maintain design consistency across similar templates
2. Responsive: Test all templates on mobile/tablet
3. Accessibility: Use proper heading hierarchy
4. Performance: Optimize images and scripts

Content

1. Dynamic Content: Use dynamic widgets when possible
2. Fallbacks: Provide defaults when data is missing
3. Testing: Preview templates on different content types

Maintenance

1. Regular Audits: Review templates periodically
2. Update Compatibility: Test after plugin/theme updates
3. Backup: Export templates before major changes

Importing/Exporting Templates

Export Templates

1. Open template in Elementor
2. Click the down arrow next to Update
3. Select Export Template
4. Save the JSON file

Import Templates

1. In WPBits AFE → Theme Builder
2. Click Import Template
3. Upload the JSON file
4. Template is added to your library

Use Cases:

• Migrate between sites
• Share templates with team
• Backup before changes
• Use across client projects

Troubleshooting

Template Not Displaying

Check:

• Template is published (not draft)
• Display conditions are correct
• No higher-priority template is overriding
• Cache is cleared

Content Not Showing

Check:

• Using correct dynamic widgets
• Post/page has content
• Widget settings are configured properly
• Preview mode vs actual page view

Conflicts with Theme

Solutions:

• Use a minimal/blank theme
• Disable theme’s header/footer via theme settings
• Use CSS to hide theme elements
• Contact theme support about Theme Builder compatibility

Multiple Templates Conflicting

Solution:

• Review template priority
• Check display conditions for overlaps
• Use more specific conditions
• Temporarily disable templates to identify conflict

Advanced Techniques

Conditional Content Within Templates

Use Elementor’s display conditions to show/hide sections:

Example:

• Show banner on homepage only (within global header)
• Hide sidebar on specific pages (within single post template)
• Show promo bar for non-logged-in users

Dynamic Template Selection

Use custom code to programmatically assign templates:

// Example: Different templates based on custom field
add_filter('wpbits_template_id', function($template_id, $location) {
    if ($location === 'single' && get_field('custom_layout')) {
        return get_field('custom_layout');
    }
    return $template_id;
}, 10, 2);

Next Steps

Now that you understand location templates:

1. Create Header & Footer Templates
2. Build Archive Templates
3. Explore Grid Master

Support

Need help with location templates?

• Create Support Ticket
• Contact WPBits