Back to Community

How to Customize Your Instagram Feed Layout with Custom Templates

Content

Many WordPress users love the Smash Balloon Social Photo Feed plugin for its ease of use. However, a common challenge arises when you need to go beyond the standard shortcode and create a completely unique HTML structure for your feed. This is a frequent request from developers and designers who want full control over the front-end output to match a specific site design.

Why This Happens

The plugin's primary method of display is through its built-in shortcode, which outputs a pre-defined structure. For most users, this is perfect. But for those with highly customized themes or specific design requirements, the standard output can be limiting. The need to access the raw data or completely override the templates is what drives this request.

The Solution: Using the Plugin's Templating System

Based on community discussions and official responses, the recommended method for achieving a custom layout is to use the plugin's built-in templating system. This allows you to override the default template files without modifying the plugin's core code, ensuring your changes are not lost during updates.

Here’s how to do it:

  1. Locate the plugin's template files. The default templates are located in your WordPress installation at wp-content/plugins/instagram-feed/templates/.
  2. Copy the template to your theme. To override a template, you must create a corresponding directory within your active theme. For example, to customize the item template, create a new folder called instagram-feed inside your theme's directory. Then, copy the item.php file from the plugin's templates folder into your new theme folder. The path should be: wp-content/themes/your-theme/instagram-feed/item.php.
  3. Edit the custom template. You can now edit this file in your theme to change the HTML structure, classes, and data output. The template has access to all the post data from the Instagram API in the $post variable, which you can use in your custom loop or structure.

This process is officially supported and is the most sustainable way to create a custom design. The Smash Balloon team provides a comprehensive guide to creating custom templates for those who need more detailed instructions.

Alternative Approach: Using the Shortcode in PHP

If your goal is simply to place the feed in a theme template file rather than on a page or post, you can use WordPress's do_shortcode() function. This allows you to keep the plugin's default functionality but control its placement.

To embed a feed directly into a PHP template file (e.g., index.php, footer.php), use the following code:

<?php echo do_shortcode('[instagram-feed]'); ?>

Important Note: For the plugin's JavaScript and CSS to load correctly, your theme must include the standard WordPress wp_head() and wp_footer() functions in its header.php and footer.php files.

What Isn't Possible

It's important to manage expectations. Based on the analysis of support threads:

  • There is no direct function to return the feed data as a raw PHP array for use in a completely external script.
  • Completely bypassing the plugin's architecture via a hook to get raw data is not available in the free version.

The templating system is the intended and most powerful way to achieve a high degree of customization without compromising the stability of your site or the plugin.

Related Support Threads Support