Archive Templates

Archive templates allow you to customize the layout and design of category archives, tag archives, custom taxonomy archives, and other archive pages on your WordPress site.

What are Archive Templates?

Archive templates control how WordPress displays lists of posts grouped by:

• Categories: Posts in a specific category
• Tags: Posts with a specific tag
• Date Archives: Posts from a specific month/year
• Author Archives: Posts by a specific author
• Custom Taxonomies: Custom taxonomy term archives
• Post Type Archives: Archives for custom post types

Creating an Archive Template

Step 1: Create New Template

1. Go to WPBits AFE → Theme Builder
2. Click Add New Template
3. Select Archive as the location
4. Name your template (e.g., “Blog Archive”)
5. Click Create Template

Step 2: Add Archive Title

1. Add [WPBits] Archive Title widget
2. The title automatically shows:
   • “Category: Design” for category archives
   • “Tag: WordPress” for tag archives
   • “Author: John Doe” for author archives
3. Customize typography and styling

Step 3: Add Archive Description (Optional)

1. Add [WPBits] Archive Description widget
2. Shows the category/tag description (if set)
3. Style as needed

Step 4: Add Grid Master

1. Add [WPBits] Grid Master widget
2. Under Query settings:
   • Query Source: Select Global Query
   • This makes it use the archive’s posts
3. Configure layout (columns, gap, etc.)
4. Design the post items

Why Global Query?

Using “Global Query” tells Grid Master to display whatever posts WordPress is querying for the current archive page.

Step 5: Add Breadcrumbs (Optional)

1. Add [WPBits] Breadcrumb widget
2. Provides navigation context
3. Customize separator and styling

Step 6: Publish and Assign

1. Click Publish
2. Set Display Conditions:
   • All Archives: Applies to all archive types
   • Specific Categories: Only certain categories
   • Specific Post Type Archives: Only certain CPT archives

Grid Master with Global Query

Setting Up Global Query

1. Add Grid Master widget
2. Query tab → Query Source: Global Query
3. Configure Layout:
   • Columns: 3 (desktop), 2 (tablet), 1 (mobile)
   • Gap: 30px
4. Design post items using Element Builder

Why Use Global Query?

• Automatically shows the correct posts for each archive
• Works with WordPress pagination
• Respects WordPress’s posts-per-page setting
• Works with archive filtering

Element Builder

Build your post card:

1. Featured Image:

   • Size: Medium or Large
   • Link to post
   • Hover effects

2. Category/Terms:

   • Display post categories
   • Link to category archives

3. Post Title:

   • Link to post
   • Typography styling
   • Hover color

4. Post Excerpt:

   • Length: 150-200 characters
   • Or use custom length

5. Post Meta:

   • Date
   • Author
   • Comment count

6. Read More Link:

   • Custom text
   • Button styling

Pre-Built Archive Templates

Use pre-built templates:

1. Click WPBits logo in Elementor
2. Browse Archive Templates
3. Import a grid template
4. Customize styling to match your brand

Popular styles:

• Classic Grid: Featured image, title, excerpt, meta
• Card Style: Bordered cards with shadows
• Masonry Grid: Pinterest-style layout
• List View: Horizontal layout with image on left

Archive Page Structure

Typical Layout

Section: Breadcrumbs
├── [WPBits] Breadcrumb widget

Section: Archive Header
├── [WPBits] Archive Title
└── [WPBits] Archive Description

Section: Post Grid
└── [WPBits] Grid Master (Global Query)
    ├── Featured Image
    ├── Categories
    ├── Post Title
    ├── Post Excerpt
    ├── Post Meta (Date, Author)
    └── Read More Link

Section: Pagination
└── (Grid Master handles this automatically)

Conditional Archive Templates

Create Different Templates for Different Archives

Blog Category Archive:

1. Create archive template
2. Set Display Condition: Categories → Select blog categories
3. Design with large featured images

Portfolio Archive:

1. Create archive template
2. Set Display Condition: Portfolio post type archive
3. Design with image-focused grid, no excerpts

Author Archive:

1. Create archive template
2. Set Display Condition: Author Archives
3. Add author bio section before Grid Master

Advanced Features

Archive Filtering

Add category filters above the grid:

1. In Grid Master, enable Show Filters
2. Set Filter Type: Categories
3. Choose Filter Style: Buttons or Dropdown
4. Enable Ajax Filtering for no-reload filtering

Sidebar Integration

Add a sidebar to archives:

1. Use a 2-column layout:
   • Column 1 (70%): Grid Master
   • Column 2 (30%): Sidebar widgets
2. Add widgets:
   • Search
   • Categories
   • Popular posts
   • Tags cloud

Custom Field Display

Show custom fields in archive items:

1. In Grid Master Element Builder
2. Add Custom Field element
3. Select your ACF or custom field
4. Style the output

Pagination

Grid Master includes pagination:

Pagination Types

1. Number Pagination: Classic page numbers
2. Load More: Ajax load more button
3. Infinite Scroll: Auto-load on scroll

Configuration

1. In Grid Master → Pagination settings
2. Choose pagination type
3. Customize styling
4. Set posts per page (or use WordPress default)

Responsive Design

Mobile Considerations

• Columns: 3 → 2 → 1 (desktop → tablet → mobile)
• Image Size: Smaller on mobile to load faster
• Excerpt Length: Shorter or hidden on mobile
• Meta: Show only essential meta on mobile
• Spacing: Reduce gap on mobile

Tablet Optimizations

• 2-column grid typically works well
• Maintain readability
• Adjust font sizes if needed

SEO Best Practices

Archive Page SEO

1. Unique Descriptions: Write unique category descriptions
2. Proper Headings: Use H1 for archive title
3. Breadcrumbs: Help search engines understand structure
4. Pagination: Ensure pagination is crawlable
5. Image Alt Text: Add alt text to featured images

Archive Title Widget

Outputs proper heading hierarchy:

• Uses H1 for archive titles
• Includes proper schema markup
• Shows category/tag names dynamically

Common Use Cases

Blog Archive

• Classic blog layout
• Featured images
• Excerpts and meta
• Category filtering
• Number pagination

Portfolio Archive

• Image-heavy grid
• No excerpts
• Hover effects on images
• Filter by portfolio category
• Load more pagination

WooCommerce Shop Archive

Use WooCommerce Grid Master instead:

• Product images
• Price display
• Add to cart buttons
• Product categories filter
• Sale badge

News Archive

• Latest news first
• Prominent date display
• News category tags
• Breaking news highlight
• Infinite scroll

Troubleshooting

Archive Template Not Showing

• Verify template is published
• Check display conditions
• Ensure archive pages exist (posts in categories)
• Clear cache

Wrong Posts Showing

• Verify “Global Query” is selected in Grid Master
• Check that you’re not overriding query settings
• Ensure proper display conditions

Pagination Not Working

• Check Grid Master pagination settings
• Ensure Global Query is used
• Verify WordPress Settings → Reading posts per page
• Clear cache and permalinks

Styling Not Applied

• Theme CSS may override
• Use higher specificity or !important
• Check Elementor Preview mode vs actual archive
• Consider using a minimal theme

Performance Tips

1. Limit Posts per Page: 9-12 posts is optimal
2. Optimize Images: Use appropriate image sizes
3. Lazy Load Images: Enable for images below fold
4. Cache Archives: Use caching plugin
5. Minimize Queries: Don’t add too many custom queries

Next Steps

• Explore Grid Master for advanced grid options
• Create Header & Footer templates
• Learn about Location Templates

Support

Need help with archive templates?

• Create Support Ticket
• Contact WPBits