Bricks Builder is incredibly flexible, and one of its powerful features is the ability to create custom query types. In this article, you’ll learn how to integrate Instagram posts into Bricks using the Instagram Graph API.

We’ll cover how to:

  • Register a custom query type called instagram_posts.
  • Fetch posts using the Instagram API.
  • Display media content (images/videos) in your Bricks loop using a custom function.

Step 1: Register the Custom Query Type

First, you need to tell Bricks Builder about the new query type instagram_posts. This makes “Instagram Posts” show up in the query loop dropdown in Bricks.

add_filter( 'bricks/setup/control_options', function( $control_options ) {
    $control_options['queryTypes']['instagram_posts'] = esc_html__( 'Instagram Posts', 'my-plugin' );
    return $control_options;
} );

Step 2: Fetch Instagram Posts via API

Now, let’s fetch the Instagram media using the Graph API. This will return a custom loop array that Bricks can iterate over.

Step 3: Access Loop Data with Custom Function

We need a helper function so Bricks can access properties like media_url and caption.

Now in your Bricks template (inside a query loop using Instagram Posts as the type), you can use:

  • echo:wp_get_custom_loop_object_property('media_url')
  • echo:wp_get_custom_loop_object_property('caption')

🚨 Notes & Tips

  • Always sanitize or cache responses to reduce load time and API usage.
  • Instagram tokens usually expire after 60 days (unless refreshed). Use long-lived tokens or implement a refresh mechanism.
  • Instagram’s API has usage limits; avoid excessive requests.

You need allow the code to be executed by following this tutorial