Harper - Instagram Feed

The Harper theme displays two Instagram feeds:

  • Header Instagram Feed: Displays above the top navigation bar
  • Footer Instagram Feed: Displays at the bottom of your site, above the 3-column footer area

In this tutorial, we'll walk you through how to set up and configure Instagram feeds for both locations.

Header Instagram Feed

We recommend starting with the Header Instagram Feed instructions first, before moving onto the Footer Instagram Feed instructions.

1. Connect your Instagram account & create a feed

Click here and follow the instructions to connect your Instagram account to the Instagram Feed plugin on your website, and create your first feed. Then return to this tutorial!

2. Customize the appearance of your Instagram Feed

After following the tutorial above and selecting a feed source, you'll be taken to an area where you can customize the appearance of your feed. It should look like this:

To set up your feed like the demo, you're going to make a few simple modifications to the feed settings. There are four sections that you will modify, which we'll go through below:

Feed Layout

  • Padding: 0
  • Number of Posts (Desktop): 9
  • Columns (Desktop): 9

Header

  • Deselect the "Enable" box

Load More Button

  • Deselect the "Enable" box

Follow Button

  • Deselect the "Enable" box

In the feed preview, your feed should now roughly resemble the demo. You're welcome to customize the feed further if you wish — these are just the settings to set up the feed as shown in the demo. Once your feed is customized how you want, click Save.

3. Add the Instagram feed to your website

Note: If you imported the demo widgets, you should be able to skip this step! Visit your site to check if your feed is displaying.

1. Click "Back to All Feeds" (or go to Instagram Feed > All Feeds).

2. Under Shortcode, click the Copy icon:

3. Go to Appearance > Widgets. Drag a Custom HTML widget into the Before Nav widget area.

4. Paste your Instagram feed shortcode. Save.

Footer Instagram Feed

1. Create a second feed

Go to Instagram Feed > All Feeds > Add New. Since you've already connected your Instagram account, your account will be available as an existing "source" as you create your feed. Continue through the different prompts (similar process as before) until your feed is created.

2. Customize the appearance of your Instagram Feed

Next, you'll be taken to an area where you can customize the appearance of your feed. For the Harper Footer Instagram Feed, there are four sections that you will modify:

Feed Layout

  • Padding: 3
  • Number of Posts (Desktop): 10
  • Columns (Desktop): 5

Header

  • Deselect the "Enable" box

Load More Button

  • Deselect the "Enable" box

Follow Button

  • Deselect the "Enable" box

In the feed preview, your feed should now roughly resemble the demo. You're welcome to customize the feed further if you wish — these are just the settings to set up the feed as shown in the demo. Once your feed is customized how you want, click Save.

3. Add the Instagram feed to your website

Note: If you imported the demo widgets, you should be able to skip this step! Visit your site to check if your feed is displaying.

1. Click "Back to All Feeds" (or go to Instagram Feed > All Feeds).

2. Under Shortcode, click the Copy icon:

Note: The shortcode for your second feed should say feed=2, or possibly a different number if you have used this plugin in the past.

3. Go to Appearance > Widgets. Drag a Custom HTML widget into the Instagram Footer widget area. Paste your Instagram feed shortcode, and then click Save.

4. To add the "instagram" title, drag a Text widget into the Instagram Footer widget area (above the Text widget you added in step 3). Add your desired title in the widget title box ("instagram" in the demo). In the text box, type Follow @your-username and click the link icon to link the text to your Instagram profile. Save.