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:
- Locate the plugin's template files. The default templates are located in your WordPress installation at
wp-content/plugins/instagram-feed/templates/. - 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-feedinside your theme's directory. Then, copy theitem.phpfile from the plugin's templates folder into your new theme folder. The path should be:wp-content/themes/your-theme/instagram-feed/item.php. - 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
$postvariable, 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
-
Instagram stories + 24 hours timeframehttps://wordpress.org/support/topic/instagram-stories-24-hours-timeframe/
-
Off topic – YouTubehttps://wordpress.org/support/topic/off-topic-youtube/
-
Adding code in php templatehttps://wordpress.org/support/topic/adding-code-in-php-template/
-
Plugin for Instagram Feedhttps://wordpress.org/support/topic/plugin-for-instagram-feed/
-
Manual Feedhttps://wordpress.org/support/topic/manual-feed/
-
Request for Data Access and Processing Overview – GDPR Compliancehttps://wordpress.org/support/topic/request-for-data-access-and-processing-overview-gdpr-compliance-2/
-
Is it possible to publish a WordPress post from an Instagram post?https://wordpress.org/support/topic/is-it-possible-to-publish-a-wordpress-post-from-an-instagram-post/
-
HTML Tag and Nofollow (Seo)https://wordpress.org/support/topic/html-tag-and-nofollow-seo/
-
Can you set picture groups in the plugin?https://wordpress.org/support/topic/can-you-set-picture-groups-in-the-plugin/
-
In Settings: “Feed Issue Email Reports” can multiple emails be sent reports?https://wordpress.org/support/topic/in-settings-feed-issue-email-reports-can-multiple-emails-be-sent-reports/
-
Multple Feeds on Business Directory Sitehttps://wordpress.org/support/topic/multple-feeds-on-business-directory-site/
-
Shop instagramhttps://wordpress.org/support/topic/shop-instagram/
-
photo contesthttps://wordpress.org/support/topic/photo-contest-2/
-
Overriding templateshttps://wordpress.org/support/topic/overriding-templates-3/
-
Retina Supporthttps://wordpress.org/support/topic/retina-support-7/
-
Can this plugin import Instagram feeds and create WordPress blog posts?https://wordpress.org/support/topic/can-this-plugin-import-instagram-feeds-and-create-wordpress-blog-posts/
-
Plugin installs other plugins as wellhttps://wordpress.org/support/topic/plugin-installs-other-plugins-as-well/
-
Can I get an array with all data?https://wordpress.org/support/topic/can-i-get-an-array-with-all-data/
-
Give Editor access to this pluginhttps://wordpress.org/support/topic/give-editor-access-to-this-plugin/
-
Design button in the middle of instagram feedhttps://wordpress.org/support/topic/design-button-in-the-middle-of-instagram-feed/
-
Pre-sale Questionshttps://wordpress.org/support/topic/pre-sale-questions-36/
-
Method to post to twitterhttps://wordpress.org/support/topic/method-to-post-to-twitter/
-
Option to use custom template?https://wordpress.org/support/topic/option-to-use-custom-template/
-
Is it possible to use this plugin in page template files?https://wordpress.org/support/topic/is-it-possible-to-use-this-plugin-in-page-template-files/
-
Doubt about the pluginhttps://wordpress.org/support/topic/doubt-about-the-plugin-2/
-
Customising HTMLhttps://wordpress.org/support/topic/customising-html/
-
How does this plugin help regarding SEO?https://wordpress.org/support/topic/how-does-this-plugin-help-regarding-seo/
-
Custom WP themeshttps://wordpress.org/support/topic/custom-wp-themes/
-
Lots of optionshttps://wordpress.org/support/topic/lots-of-options-38/
-
Presale questionhttps://wordpress.org/support/topic/presale-question-24/
-
Embed Facebook and Instagram post in posthttps://wordpress.org/support/topic/embed-facebook-and-instagram-post-in-post/
-
DSGVO konformhttps://wordpress.org/support/topic/dsgvo-konform-2/
-
Use plugin pragmaticallyhttps://wordpress.org/support/topic/use-plugin-pragmatically/
-
plugin options not needed as top level item in the admin menuhttps://wordpress.org/support/topic/plugin-options-not-needed-as-top-level-item-in-the-admin-menu-2/
-
Display follower count?https://wordpress.org/support/topic/display-follower-count/
-
Custom slider, get raw datahttps://wordpress.org/support/topic/custom-slider-get-raw-data/
-
“From” address of the notification emailhttps://wordpress.org/support/topic/from-address-of-the-notification-email/