Skip to main content

Overview

Visual Portfolio offers three distinct pagination methods to control how users navigate through portfolio content. Each method provides different user experiences and performance characteristics.

Pagination Types

Paged Pagination

Traditional numbered pagination with page numbers and navigation arrows.

Configuration Options

Template Structure

Paged Configuration

Load More Pagination

A “Load More” button that appends new items to the existing gallery when clicked.

Configuration Options

Template Implementation

Infinite Scroll Pagination

Automatically loads more items as the user scrolls down the page.

Configuration Options

JavaScript Asset

Preview Mode Handling

Infinite scroll is automatically converted to load-more in preview mode:

Pagination Implementation

Layout Elements Configuration

Pagination Styles

  • Default: Standard pagination design
  • Minimal: Simplified minimal design
Style-specific templates are located at:

URL Parameters

Pagination uses the vp_page URL parameter:

Archive Mapping Integration

For WordPress archives, pagination can use friendly URLs:

Pagination Query Handling

Page Number Detection

Query Configuration

Custom Pagination Templates

Create custom pagination templates:

Pagination Hooks

Available Filters

Example: Custom Pagination Text

SEO Considerations

Robots Meta Tags

Paginated pages beyond page 1 receive noindex, follow meta tags:

Canonical URLs

Paginated pages have proper canonical URL handling to avoid duplicate content issues.

Performance Optimization

  • Best for SEO and accessibility
  • Lower server load per request
  • Clear navigation structure
  • Bookmarkable page states
  • Better user experience for browsing
  • Reduces page reloads
  • Users control when to load more
  • Good balance of performance and UX
  • Seamless browsing experience
  • Automatic content loading
  • Best for discovery-focused galleries
  • Consider limiting auto-loads for performance

Best Practices

  1. Choose the right type: Use paged for content-heavy sites, infinite for visual galleries
  2. Set appropriate page size: Balance initial load time with pagination frequency
  3. Customize text labels: Make button text clear and contextual
  4. Test mobile experience: Ensure touch-friendly buttons and smooth scrolling
  5. Monitor performance: Track load times and adjust items per page accordingly