How to Display a Horizontal Instagram Feed in WordPress

How to Display a Horizontal Instagram Feed in WordPress

by Stacey Corrin on July 23, 2020

Do you want to display a horizontal Instagram feed in WordPress? A sleek horizontal feed enhances your site’s design and entices visitors to stay in touch so they can become your followers and fans!

This article shows you how to display a horizontal Instagram feed in WordPress in a few simple steps.

Here’s a table of contents to help you navigate:

  1. Install the Instagram Feed plugin
  2. Connect your Instagram account
  3. Select the horizontal feed layout
  4. Customize the design of your feed
  5. Style your feed’s posts
  6. Publish your feed in WordPress

Are you ready?!

Why Add a Horizontal Instagram Feed in WordPress?

A horizontal Instagram feed is more than just an aesthetic element on your site. Used in the right way, it’s a great tactical tool to boost your business!

It’s also a neat way to show several photos in one place, without the same negative effect on load time as adding those photos side by side would imply.

A horizontal Instagram feed can be used for several different purposes:

  • You can use horizontal feeds to showcase photos filtered by different hashtags. For example, brand photos on your About page, or blog post photos with hashtags relevant to the topic. This is a more personal option than standard stock photos.
  • Since horizontal feeds resemble carousels used on e-commerce sites, you can use them to create a shopping experience.

We’ll explore this more in a bit.

Now that you know why adding horizontal Instagram feeds to your site is smart, let’s look into the nitty-gritty of how to embed one in WordPress!

How to Display a Horizontal Instagram Feed in WordPress

The easiest way to display horizontal Instagram feeds in WordPress is to use a WordPress plugin. That’s because Instagram doesn’t offer an easy option for achieving a horizontal effect using its default embed method.

When you embed Instagram posts in WordPress manually, you can only insert a single post. Whereas with a plugin, you can embed a whole feed of posts with multiple layout options, including horizontal carousel feeds.

So for this tutorial, we’ll be using Smash Balloon’s Instagram Feed plugin to get the design and layout we need.

Smash Balloon Instagram Feed Pro

Instagram Feed from Smash Balloon is the highest rated Instagram feed plugin for WordPress. With its easy-to-use interface, it takes only a few clicks to get your Instagram content looking the way you want with no coding required.

Even better, you can completely customize the design of your feed and filer content to display hashtags, photos, shoppable feeds, and more.

Below you’ll find the steps for displaying horizontal Instagram feeds in WordPress using the Instagram feed WordPress plugin.

1. Install the Instagram Feed Plugin by Smash Balloon

Click here to get started with Instagram Feeds by Smash Balloon and download the plugin to your computer.

Once you’ve done that, upload the plugin and install it on your WordPress website. If you need a little help with that, here’s a handy guide for installing a WordPress plugin.

2. Connect Your Instagram Account

The next step is to link your Instagram profile to your website. To do this, click the blue button labeled “Connect an Instagram Account.”

Connect an Instagram account

When linking your account, you’ll be asked if you want to connect a standard account or a business account.

Some of the feed types included in the plugin require a business account, such as feeds filtered by specific hashtags, showing Instagram stories, and creating “shopping feeds” linking to your eCommerce store.

You can check out this article if you need help learning how to convert your Instagram account to a business profile.

When you’ve finished following the on-screen instructions, your account dashboard displays the Successfully connected label.

After that, you can choose the type of Instagram feed to show on your site, including a standard user feed, hashtag feed, tagged feed, or a combination of multiple Instagram feed types.

Now go ahead and click the Save Changes button.

3. Select the Horizontal Carousel Layout

For the next step, click the Customize tab at the top of your screen.

Instagram feed eneral settings

Under the General section, you can change your feed’s width, height, and background color.

After that is the Layout section, where you can choose a custom layout for your feed. There are 4 different layouts to choose from, all of which create a different visual effect.

Yet, since you want to display a horizontal Instagram feed in WordPress, let’s choose the Carousel option.

Instagram carousel feed layout

This option shows your feed in a slideshow carousel that scrolls horizontally through your posts.

Upon clicking the carousel layout, you’ll see several settings you can use to tweak your design.

Let’s look at the display settings in a little more detail:

  • Number of Rows: Choose between 1 or 2 rows for your horizontal feed.
  • Loop Type: Select either Rewind or Infinite. Infinite lets visitors cycle through all the photos in your feed. Whereas Rewind cycles through a set number of photos.
  • Show Navigation Arrows: Lets you add arrows to move back and forth through your feed.
  • Show Pagination: Includes dot icons under the slideshow indicating how many photos are in your feed.
  • Enable Autoplay: Lets the carousel run automatically.
  • Interval Time: Allows you to specify the time between each photo cycle.

Under those options, you can choose the number of columns and photos in your feed and set the padding in pixels.

Choose the number of photos and columns to display in your feed

Here are some examples of how these settings translate to how your feed displays on your site.

horizontal instagram feed with 2 rows and pagination

This example displays a horizontal Instagram feed with 2 rows and the show pagination box checked. Navigation arrows are unchecked.

horizontal instagram feed with 1 row and navigation arrows

For this example, we chose to display a single row, navigation arrows, and the number of photos set to 4.

horizontal instagram feed with navigation and 2 photos

The final example displays photos in a single row, with navigation arrows and the number of photos set to 2.

4. Customize Your Feed’s Design

On the same page, under the Header section, you can expand several options for customizing the header area of your Instagram feed.

Customize your Instagram feed header area

Here you can change the following settings:

  • Header Style: Choose between a standard, boxed, or centered header.
  • Header Size: Display your header as small, medium, or large.
  • Show Number of Followers: Business accounts can choose to display how many followers their Instagram account has.
  • Show Bio Text: Your bio text is fetched automatically for business accounts and can be entered manually for private accounts.
  • Use Custom Avatar: By that same logic, your profile picture will show up if you have a business account. If you want one for your private account, you can upload it here.
  • Header Text Color: Set the color of your header text.
  • Display Outside of Scrollable Area: If your feed’s dimensions are such that a vertical scroll occurs, it’s a good idea to tick this option. As you scroll down, the header will stay fixed at the top.
  • Include Stories: This option lets business accounts show Instagram stories directly on your WordPress website.
  • Slide Change Interval: Choose the number of milliseconds a story displays before showing the next one. Videos will always change once the video is finished.

Under the Header section, you can choose to enable the Load More Button. This lets visitors see more images than those displayed. When you click to view more options, you can change the buttons colors, text, and more.

Choose to display a load more button in your horizontal instagram feed

Finally, you’ll see the Follow Button section, where you can choose to show a button to encourage users to follow you on Instagram. You can also tweak the colors and text of your button to suit your site’s branding.

Add a button for users to follow you on Instagram

Remember to click the blue Save Changes button at the bottom of the page once you’re happy with your settings.

5. Style the Posts in Your Horizontal Instagram Feed

Now let’s look at how to change the look and feel of posts in your feed. You can do that by clicking the Posts tab at the top of your screen.

The first section is all about your feed’s Photos. You can sort photos by newest to oldest, random, or by likes. It’s also possible to show only photos or videos and create shoppable Instagram feeds by linking your post caption.

Instagram post embed settings

Below that, you can choose the hover style of photos in your feed. Here you can change the hover and background colors, and select which information to display.

Instagram photo hover style

The Caption section lets you change your caption text; it’s color and size. Plus, you can choose to hide your photo caption if you prefer.

Choose a caption style for Instagram photos

Further down the page, you can show or hide the likes, and comments icons, as well as comments in the lightbox people see when clicking photos in your feed.

lightbox comments settings

Again, remember to click Save Changes before you move on to publishing your Instagram feed.

6. Publish Your Horizontal Instagram Feed in WordPress

The Instagram Feed plugin offers several ways to display your horizontal Instagram feed in WordPress.

The different methods include:

  1. Instagram Feed WordPress Block: Add your horizontal feed to posts or pages using the WordPress block editor.
  2. Instagram Feed Shortcode: Embed your Instagram feed into posts or pages using the classic WordPress editor, or inside your WordPress theme with the shortcode.
  3. Instagram Feed WordPress Widget: Use the ready-made widget to display your feed in WordPress sidebar areas.

Don’t worry if this sounds overwhelming. We’ll show you how to use each method.

Instagram Feed WordPress Block

Create a new page in WordPress by navigating to Pages » Add New.

Inside the block editor, click the Plus (+) icon to add a new WordPress content block. Then in the panel that appears, scroll to the Widgets section and click the Instagram Feed block to add it to your page.

Add the Instagram feed WordPress block

WordPress will generate a preview of your feed so you can make any changes before you publish.

Preview instagram feed in block editor

Now when you preview your new page, you’ll see a stunning horizontal Instagram feed live on your website.

publsihed horizontal instagram feed in WordPress

Instagram Feed Shortcode

To embed your feed with a shortcode, create a new post or page. Then in the classic editor, paste the shortcode as shown below.

Instagram Hashtag Feed shortcode

Instagram Feed WordPress Widget

To display your Instagram feed in widget-ready areas of WordPress like your footer or primary sidebar, first head to Appearance » Widgets from your WordPress dashboard.

add the instagram feed widget to your sidebar in WordPress

Next, find the Instagram Feed WordPress widget, and drag it to your chosen sidebar area. Remember to click the Save button on the widget.

Now when you navigate to the front of your website, you’ll see your Instagram feed displayed horizontally in your sidebar.

Horizontal instagram feed sidebar widget in WordPress

There you have it!

We hope this article helped you learn how to display a horizontal Instagram feed in WordPress. Now all you need is to embed one on your site to engage your audience and transform them into loyal fans and potential customers.

What are you waiting for?

Get started with Instagram Feeds by Smash Balloon here.

And remember to follow us on Facebook and Twitter to get the latest articles as soon as they’re released.

Want to Try our Instagram plugin for Free?

Enter the URL of Your WordPress website to install Instagram Feed Lite.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Leave a Reply

Your email address will not be published. Required fields are marked *