Skip to content
  • Why WPGetAPI?
  • Examples
  • Pricing
  • Plugins
    • PRO Plugin
    • API to Posts Plugin
    • OAuth 2.0 Plugin
  • Docs
  • Support
    • Frequently Asked Questions
    • Feature Request
    • Support Ticket
  • account_circle
PRO Plugin
Howdy! How can we help you?
  • Introduction

    • Quick Start
    • Frequently Asked Questions
    • Will this work with my API?
    • Understanding API docs
    • Step by Step Example
  • Setup

    • Setup Page
    • Endpoint Page
    • Parameters - Query String
    • Parameters - Headers
    • Parameters - Body POST
    • Shortcode
    • Template Tag
    • Gutenberg Block
  • Connecting your API

    • API Key in Headers
    • API Key in Query String
    • Authentication & Authorization
  • Output API Data

    • Format API to HTML
    • Format API to HTML Table
    • Format API to Image Gallery
    • Format JSON Data
  • Integrations

    • Send form data to API
    • WPForms to API
    • Gravity Forms to API
    • Contact Form 7 to API
    • WooCommerce to API
    • WooCommerce API Product Sync
    • wpDataTables to API
    • Connect WordPress to OpenAI
    • Connect RapidAPI to WordPress
    • Connect Zoho CRM to WordPress
    • Page Builders (Elementor, DIVI)
    • Formidable Forms to API
    • Elementor Form to API
    • JetFormBuilder to API
    • Fluent Forms to API
    • WS Form to API
    • Ninja Tables to API
    • Easy Digital Downloads(EDD) API Product Sync
    • Ultimate Member Forms to API
  • Tips & Tricks

    • Filters & Action Hooks
    • Code Snippets Plugin
    • Troubleshooting
    • Code Snippets
  • PRO Plugin

    • Installation
    • Actions
    • Tokens
    • Caching
    • Nested data
    • Chaining API calls
    • Dynamic Variables
    • Format API to HTML
    • Call API on user registration
    • Using AJAX to trigger API call
    • Base64 Encoding
    • Licensing
    • Filters & Action Hooks
  • OAuth 2.0 Plugin

    • Installation
    • How it works
    • Grant Type - Client Credentials
    • Grant Type - Authorization Code
    • Licensing
  • API to Posts Plugin

    • Installation
    • Getting Started
    • Multiple Endpoints
    • Mapping Fields
    • Filters & Action Hooks
    • Pagination

Here we have set up a very simple image gallery that firstly grabs 6 images from the Pixabay API, loops through the returned images and outputs them into a slider/gallery using Fotorama jQuery image gallery. Below is a screenshot of what our gallery looks like.

Setting up the API

We are using the Pixabay API which is very simple to use. It simply requires you to register (via Google or email) and you are instantly given an API key that you can use.

Our endpoint settings in WPGetAPI are shown below. Because we will be using the template tag, you need to ensure that the Results Format is set to PHP array data.

Checking our API data

We can check the output of our API call by using the following snippet. This snippet can be pasted into your theme files or you could use a PHP code snippet plugin such as this one – https://wordpress.org/plugins/code-snippets/

The code snippet plugin allows you to create ‘code snippets’ with whatever code you like (such as the code below) that can then be inserted into a page using a shortcode. It is very handy.

// call the api and store the response in $data
$data = wpgetapi_endpoint( 'pixabay', 'api', array('debug' => false) );
// output the result of $data using our inbuilt 'pretty print' function
wpgetapi_pp( $data );

The data should look something like in the below image.

Looping through images

Below is the code we used to add the required scripts, call the API using the wpgetapi_endpoint() function and then loop through the images and output them. This code can be added to a theme template file or you could use the code snippets plugin mentioned earlier.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<?php
// call the api and store the response in $data
$data = wpgetapi_endpoint( 'pixabay', 'api', array('debug' => false) );

// make sure we have the data
if( isset( $data['hits'] ) ) : ?>

    <!-- wrap in our fotorama div -->
    <div class="fotorama" data-nav="thumbs">

        <?php 
        // loop through the images
        foreach ( $data['hits'] as $index => $image ) : ?>
            
            <!-- add the image URL into a HTML <img> -->
            <img src="<?php esc_attr_e( $image['webformatURL'] ); ?>" />

        <?php endforeach; ?>

    </div>

<?php endif; ?>

A note on this code. The Javascript and the CSS files are not included the correct ‘WordPress way’. These files should be enqueued as explained here. The code still works and does its job, but technically it is not the right way to do it, we have just done it this way to easily illustrate how it can be done.

Read more info on the Fotorama image gallery plugin here.

On this page
contact_support

Still not sure?

APIs can be daunting and sometimes downright confusing.

But we are here to help! Our support is amazing and we can assist you with any setup required and ensure your API integrations are a success!

Ask Us Anything

Connect your WordPress website to external APIs without writing a single line of code. Send data from WordPress to your API or display data from your API within WordPress.

Support

  • Documentation
  • Support Ticket
  • Refund Policy
  • Contact Us
  • About Us
  • Affiliates

Articles

  • Quick Start Guide
  • WooCommerce Orders to API
  • WooCommerce API Products Sync
  • Contact Form 7 to API
  • WPForms to API
  • Gravity Forms to API
  • WordPress to RapidAPI

WordPress API Plugins

  • Free WPGetAPI Plugin
  • PRO Plugin
  • API to Posts Plugin Plugin
  • OAuth 2.0 Authorization Plugin

© 2025 WPGetAPI. All Rights Reserved.

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.