Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create a Custom Instagram Photo Feed in WordPress

Do you want to create a custom Instagram feed in WordPress?

An Instagram feed can keep your site fresh and engaging, while also getting you more likes, shares, and Instagram followers.

In this article, we will show you how you can create a custom Instagram feed for your WordPress website.

Creating a custom Instagram feed for your WordPress site

Why Include an Instagram Feed on Your WordPress Site?

Adding an Instagram feed on your WordPress site lets you show fresh content to your visitors without lots of extra work. It also encourages readers to follow you on Instagram.

Instead of manually adding images in the WordPress block editor, you can simply upload them to Instagram and they’ll appear on your website. You can even show other people’s photos on your site by creating a hashtag feed or displaying the posts that other people have tagged your account in.

In the following image you can see an example of a brand that uses a custom Instagram feed to show user-generated content.

An example of a custom Instagram feed

In this way, you can use a custom Instagram feed to provide valuable social proof and make more money online.

That being said, let’s see how you can create a custom Instagram photo feed in WordPress.

How to Create a Custom Instagram Photo Feed in WordPress

The easiest way to add an Instagram photo feed on your site is by using the Smash Balloon Instagram Feed plugin. It is the best Instagram plugin for WordPress and allows you to display content from your Instagram account to your WordPress site in an instant.

First, you’ll need to install and activate the Smash Balloon Instagram Feed plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: In the guide we’re using the premium version of Smash Balloon as it has powerful features that allow you to create a completely custom Instagram feed. This includes creating hashtag feeds and adding shoppable images in WordPress. If you’re just getting started or have a tight budget then there is also a free Smash Balloon Social Photo Feed plugin.

After you’ve installed the plugin, head over to Instagram Feed » Settings.

You can now enter your Smash Balloon license key into the ‘License Key’ field.

Activating the Smash Balloon license key

You can find this information in the confirmation email you got when you purchased Smash Balloon, and also in your Smash Balloon account.

After adding your license key, go ahead and click on the ‘Activate’ button.

Once you’ve done that, you’re ready to create a custom Instagram feed. To get started, select ‘All Feeds’ in the left-hand menu and then click on the ‘Add New’ button.

Creating a new custom Instagram feed with Smash Balloon

Smash Balloon will now show all the different types of Instagram feeds that you can create.

If you simply want to display your Instagram photos, then you can use a Personal Instagram account. However, you’ll need a Business Instagram account if you want to create a hashtag feed or show the posts that your account is tagged in.

The different custom Instagram feed types

Tip: Don’t have a Business Account? To convert your Personal Instagram account into a Business Account, simply follow Smash Balloon’s step by step instructions.

On this screen, find the feed type that you want to create and give it a click. You can then go ahead and click on the ‘Next’ button.

On the next screen, click on the ‘Add source’ button.

Connecting Smash Balloon to your Instagram account

This opens a popup where you can choose whether to connect to a personal Instagram account or a business account.

To connect to a personal Instagram account, click on the ‘Personal’ button. You can then give the ‘Login with Instagram’ button a click and follow the onscreen instructions.

Connecting Instagram to your WordPress account

Do you want to use an Instagram Business account instead?

Then just click on the ‘Business’ radio button. You can then select ‘Login with Facebook‘ and follow the onscreen instructions.

Connecting Facebook, Instagram and WordPress with Smash Balloon

No matter whether you use a personal or Instagram Business account, after making the connection Smash Balloon will take you back to the WordPress dashboard automatically.

If you’re using an Instagram Business account to show photos that have a particular hashtag, then you’ll need to type it into the ‘Hashtag’ field.

If you want to show multiple hashtags in the same feed, then make sure you separate each hashtag with a comma.

Showing Instagram hashtags on your WordPress website

Do you want to show posts that your account was tagged in?

Then you’ll need to find the ‘Tagged’ section and click on its ‘Add Source’ button.

Adding an Instagram source to your WordPress website

You can now follow the onscreen instructions to select the Instagram account that you want to use. For example, if you wanted to show all the posts that the WPBeginner Instagram account was tagged in, then you’d need to select the WPBeginner account.

After working your way through the settings on this screen, click on the ‘Next’ button. This opens an editor where you can customize the Instagram feed.

Smash Balloon shows a live preview of your Instagram feed to the right. On the left is a menu that shows the different settings that you can use to customize the social media feed.

Creating a custom Instagram feed with Smash Balloon

Here, you can change the width and height of your feed, switch the layout, change the number of photos, columns, and more.

To change the layout, simply click on Feed Layout in the left-hand menu.

Changing the feed of your Instagram Smash Balloon layout

You can now choose from a Grid, Carousel, or Masonry layout. There is also a Highlighted layout that highlights every third photo, as you can see in the following image.

As you click on the different layouts, the live preview will automatically update to show the new layout. This makes it easy to try different layouts and find the one you prefer.

A highlighted Instagram feed

By default, Smash Balloon will show your Instagram photos in a four column grid.

To begin with, users will see 20 photos from the custom Instagram feed. They can see additional photos by clicking ‘Load More.’

The Load More button in an Instagram feed

To change how many photos Smash Balloon shows on desktop and mobile devices simply find the ‘Number of Posts’ section.

You can then type a new number into the ‘Desktop’ and ‘Mobile’ fields.

Changing the number of posts in an Instagram feed

By default, Smash Ballon will split your photos into 4 columns on desktop, 2 columns on tablet devices, and a single column on mobile.

Do you want to use a different number of columns? Then just scroll to the ‘Columns’ section in the left-hand menu.

You can then type a new number into the Desktop, Tablet, or Mobile fields.

Changing the number of columns in a custom Instagram feed

To make sure your Instagram feed looks good on mobile devices, it’s smart to view the mobile version of your WordPress website.

There are some more settings that you can use to style the custom Instagram feed. Most of these settings are self-explanatory so you may want to spend some time exploring the different settings on this page.

When you’re happy with how the custom Instagram feed looks, you can click on ‘Save.’

Adding an Instagram feed in WordPress

Showing a Feed of Your Instagram Photos in WordPress

Once you’ve configured an Instagram feed, it’s easy to add it to your WordPress blog by opening the page or post where you want to show the feed.

Here, click on the + symbol to add a new block. You can then type in ‘Instagram Feed’ and click to add the right block to the page.

Smash Balloon's Instagram Feed block

The Instagram feed will be instantly added to the page or post.

At the bottom of the feed, you’ll see buttons where visitors can load more photos or follow you on Instagram.

The Instagram Feed buttons in WordPress

If you’re happy with how it looks, then you can go ahead and publish or update the page.

Another option is to add the Instagram Feed widget to your website. This is a great way to show the Instagram feed on every page of your site. For example, you might add the Instagram widget to the WordPress theme’s sidebar or footer.

To add the Instagram Feed widget to your site, head over to Appearance » Widgets. You can then click on the blue ‘+’ icon towards the top of the screen.

Adding an Instagram Feed to WordPress using widgets

In the panel that appears, type in ‘Instagram Feed’ to find the right widget.

As you can see in the following image, there are two Instagram Feed widgets so make sure you use the right one.

The widget we’re using lets you select which Instagram feed appears on your site, which is perfect if you’ve used Smash Balloon to create multiple different feeds.

Using the WordPress Instagram Feed widget

After finding the right widget, you can simply drag and drop the widget onto the area where you want to show the Instagram feed on your website.

This will add a new Instagram Feed section to the widget editor.

Choosing the right Smash Balloon Instagram widget

Next, you can type in an optional title for the widget. This will appear above the Instagram feed on your website so visitors will be able to see it.

To add a title, simply type in the ‘Title’ field.

Adding a title to the Instagram Feed widget

Next, open the ‘Feed’ dropdown.

You can now go ahead and click on the Instagram feed that you want to show in the widget.

Choosing an Instagram Feed to display

Note: If you’ve created multiple Instagram feeds, then you may be unsure which feed to select. You can see a list of all your Instagram feeds and their names by going to Instagram Feed » All Feeds in the WordPress dashboard.

When you’re happy with how the widget is configured, you can click on the Update button. Now if you visit any page on your site, you’ll see the new Instagram Feed widget live.

An example Instagram feed created with Smash Balloon

Creating Multiple Instagram Feeds in WordPress

What if you want to show different Instagram feeds on your WordPress website?

For example, on the contact us page you might show all the different posts where your account has been tagged, and then show your official Instagram feed on your website’s custom home page.

You can create multiple Instagram feeds by repeating the same process described above. Smash Balloon will then automatically create a different shortcode for each Instagram feed.

To see the shortcodes, simply head over to Instagram Feed » All Feeds and take a look at the ‘Shortcode’ column.

The Smash Balloon shortcodes

You can add any of the custom Instagram feeds to your site by pasting its shortcode into a new Shortcode block or widget area. For step by step instructions, see our beginner’s guide on how to add a shortcode in WordPress.

Another option is to paste the shortcode into a special Instagram Feed block, which makes it easier to customize the feed.

To do this, simply add a new Instagram Feed block to a page, post, or widget-ready area.

By default, the Instagram Feed plugin will display the first custom feed that you created using Smash Balloon. To show a different feed, simply click to select the Instagram Feed block if it isn’t already selected.

Then, in the right-hand menu click to expand the Add Settings section.

Configuring Smash Balloon's Instagram feed

In this section, you can either type in or paste the shortcode for the Instagram feed that you want to show.

Then, just click on the Apply Changes button.

Smash Balloon's Apply Changes button

The Instagram Feed block will now update to show content from the new feed.

When you’re happy with how the feed looks, you can simply update or publish the page.

Other Popular Instagram Feed Settings in WordPress

You might be perfectly happy with how the custom Instagram feed looks, as the Smash Balloon plugin does a great job without any customizations.

However, there are some common tweaks you may want to make depending on how you want to display your Instagram photos.

For example, you might want to show the photos without the captions. This is especially helpful if you’re displaying the feed in a small space.

To hide the captions, simply click to select the Instagram Feed block in the post editor.

Then, in the ‘Add Settings’ section type in the following shortcode:

showcaption=”false”

When it shows up, click on the Apply Changes button to remove the captions from the Instagram feed.

Hiding Instagram captions in the Smash Balloon feed

Another popular option is changing the text of the Load More button. To do this, simply go to Instagram Feed » All Feeds.

You can then find the feed that you want to customize and click on the ‘Edit’ button, which looks like a pencil sign under the ‘Action’ column.

Editing the Smash Balloon Instagram feeds

This opens the Instagram feed for editing.

In the right-hand menu, click on Load More Button.

Customizing the buttons in the Instagram feed

In the ‘Text’ field, simply type in the text that you want to show on the button.

As you’re typing, the Instagram feed preview will update automatically to show the new text.

Creating a custom Instagram feed

When you’re happy with how the button looks, simply click on the ‘Save’ button in the top right corner.

This screen has lots of other settings that you can use to change how the Instagram feed looks on your website.

As you click on the different settings the preview to the right will update automatically. This makes it easy to see how the changes will look on your website.

We hope this article helped you learn how to create a custom Instagram feed in WordPress. You might also want to see our comparison of the best WordPress giveaway plugins to grow your social following, and best email marketing services to increase your website traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

14 CommentsLeave a Reply

  1. FYI – Smash Balloon Instagram Feed Lite / Pro plugin the latest version 2022 does not have a customize section as seen / mentioned in this Post.

    • Thanks for pointing that out, we will be sure to update that section when we update the article!

      Admin

  2. I am a new blogger who is not as tech savvy as I would love to be. This article was loaded with information that I can use. Thank you

  3. I agree with your Plugin choice. I tried several Insta Feed plugins but they got messed up with Facebook / Instagram API changes. Smash Balloon’s worked perfectly. If only other plugins worked as well as these ;-)

  4. Thanks for such a detailed description of WP website Instagram use, I was searching such informative articles from many days, You describe it in very detailed manner.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.