How to Display a Horizontal Instagram Feed in WordPress

How to Display a Horizontal Instagram Feed in WordPress

Last updated on February 24th, 2021

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 social media 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 to integrate social media into your website with the help of embedded horizontal Instagram feeds? Let’s dive in.

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 increase sales and grow your business.

It’s also a neat way to show several Instagram photos in one place, while giving your users the control to scroll through your content at their own pace.

horizontal instagram feed wordpress example

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

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. But 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 hashtag feeds, photo feed, shoppable feeds, and more.

The best part? Once you connect your account to the plugin, it automatically communicates with Instagram API so it can help you easily display your horizontal Instagram feed — even if you’re not tech-savvy.

Below you’ll find the steps for displaying horizontal Instagram feeds in WordPress using the Instagram feed 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.

Now, it’s time to configure the plugin.

2. Connect Your Instagram Account

The next step is to link your Instagram profile to your website. Instagram Feed Pro makes this easy for you, since you don’t need to manually create access tokens anymore. The plugin will connect to Instagram’s API so you can seamlessly display your horizontal Instagram feed on your website.

To easily connect your account, click the blue button labeled Connect an Instagram Account.

Connect an Instagram account

When linking your account, a popup will ask you 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

Interested in designing your horizontal Instagram feed? Great! Instagram Feed Pro has lots of customization options that you can choose from.

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 layout templates to choose from such as grid layout, carousel, masonry and highlight layout. Each of these layouts creates a different visual effect.

And 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 Instagram images 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 to access the styling settings.

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. 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 Widget in WordPress

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 the pro version of Instagram Feeds by Smash Balloon here.

Or if you want to check it out first, you can see this article to know how you can get the free version of Instagram Feed Pro.

Free plugins have limited features to extend your website’s functionality, though. For example, the free feature of Instagram Feed Pro doesn’t have the horizontal Instagram layout feature.

So if you’re interested in unlocking additional features for your Instagram marketing so you can take your business to the top, get the premium version of Instagram Feed Pro here.

And remember to follow us on Facebook and Twitter to get the latest articles on how to successfully market your business on your social networks.

Want to Try our Instagram plugin for Free?

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

Comments

  1. Erika

    Horizontal on Insta…finally yay!

    Reply
  2. Michael Perkins

    Left a comment yesterday, no comments at all?

    Reply
  3. Mohd Khairi bin Wahab

    hi thanks for the great plugin, im using it and i like it

    Reply
  4. Michelle David

    I learned something new today thank you!

    Reply
  5. carl pucul

    Nice!

    Reply
  6. Lynn Pierce

    Really could us this.

    Reply
  7. Sarah Jane EHrhart

    I could certainly use all the help I can get! Great article!

    Reply
  8. Melinda Mattox

    These posts are always so helpful and this one is no exception. Thanks!

    Reply
  9. Starr McDaniel

    Fantastic presentation

    Reply
  10. RICHARD SKUSE

    GOOD TO KNOW

    Reply
  11. Lhossainourgaga

    Amazing

    Reply
  12. Patrick M

    I keep coming back for more!

    Reply
  13. Michelle David

    This will be very helpful as I start my new career in the coming months!

    Reply
  14. Joel Bousema

    Nice

    Reply
  15. Vitkai László

    Great!

    Reply

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 *