Skip to main content

JSON & REST APIs

Collection elements can work with data sources beyond WordPress content and GraphQL queries. You can use JSON arrays for static data and REST API responses for external data directly within Collection elements.

Collection Element Only

These data sources work exclusively with Collection elements and are not available in other contexts.

JSON Arrays​

JSON arrays let you create static, structured data directly within Collection elements without needing WordPress posts or custom queries.

Basic JSON Syntax​

Numbers:

[1, 2, 3, 4, 5]

Strings:

["Design", "Development", "Marketing", "Support"]

Mixed types:

["John Doe", 32, "Designer", true]

Using JSON in Collection Elements​

  1. Add Collection Element to your template
  2. Enter JSON data in the Data Source text area
  3. Add elements inside the Template element
  4. Bind data fields using {{key}} syntax for object properties

Usage Examples​

<!-- JSON: pasted inside the Collection element
[
  "Design", 
  "Development", 
  "Marketing"
] 
-->
<!-- Collection template: -->
<div class="service-item">
  <h3>{{.}}</h3>
</div>

REST API Responses​

Collection elements can consume REST API endpoints that return JSON arrays, enabling integration with external services and databases.

API Requirements​

Response format: API must return a JSON array

Valid API response:

[
  {"id": 1, "title": "First Post", "author": "John"},
  {"id": 2, "title": "Second Post", "author": "Jane"}
]

Invalid API response:

{
  "posts": [
    {"id": 1, "title": "First Post"}
  ]
}

Setting Up REST API Data Source​

  1. Add Collection Element to your template
  2. Enter API URL (must return JSON array)
  3. Add elements inside Template element
  4. Bind API response fields using {{field_name}} syntax

Common API Integrations​

GitHub repositories:

API URL: https://api.github.com/repos/WordPress/WordPress/contributors
Template: {{avatar}}, {{login}}, {{html_url}}

News feeds (JSON format):

API URL: https://wordpress.org/news/wp-json/wp/v2/posts
Template: {{title.rendered}}, {{excerpt.rendered}}, {{jetpack_featured_media_url}}

Product catalogs:

API URL: https://fakestoreapi.com/products
Template: {{title}}, {{price}}, {{description}}

Error Handling​

  • API unavailable: Collection displays empty if API request fails
  • Invalid JSON: Collection displays error message
  • Wrong format: Collection displays empty if response isn't an array
  • Rate limits: Responses are cached to prevent excessive API calls

Choosing Your Data Source​

Use JSON Arrays when:

  • Data is static and doesn't change frequently
  • You need quick prototyping with sample data
  • Building testimonials, team lists, or feature lists
  • No external dependencies required

Use REST APIs when:

  • Data changes frequently and needs real-time updates
  • Integrating with external services (GitHub, social media, etc.)
  • Building dashboards with live data
  • Content comes from external systems

Use WordPress/GraphQL when:

  • Data is managed within WordPress
  • You need WordPress features (categories, custom fields, etc.)
  • Building content-driven sites
  • Leveraging WordPress's editing interface

These Collection data sources provide flexible options for displaying structured content without requiring WordPress posts or complex database queries, perfect for modern web development workflows that combine multiple data sources.

What's Next​