Home » Documentation » Instagram Feed » Displaying Feeds on Your Site » How to Add an Instagram Widget to WordPress

How to Add an Instagram Widget to WordPress

To add an Instagram feed to a WordPress widget area, copy your feed’s custom shortcode from Elevated › Instagram Feed › My Feeds. Navigate to Appearance › Widgets in your admin panel, expand your target sidebar or footer block container, insert a Shortcode block, and paste your code. Once published, your widget will display a responsive social stream that matches your layout dimensions.

Table of Contents

Step 1: Copy Your Instagram Feed Shortcode

Navigate to Elevated › Instagram Feed in your WordPress dashboard and click the My Feeds tab at the top of the interface. Locate your target feed from the list, and click the Copy shortcode button to save the code to your clipboard.

My Feeds list with the Copy shortcode button visible on the new feed card

WordPress uses a block-based widget editor by default to manage sidebars and footers:

  1. Navigate to Appearance › Widgets in your WordPress dashboard.
  2. Click to expand your target widget container, such as Primary Sidebar, Header Widget Area, or Footer Column 2.
  3. Click the + (Add Block) icon inside the expanded section.
  4. Type Shortcode in the block search bar and select the Shortcode block icon.
  5. Paste your copied code [elevated_instagram_feed id=”X”] into the block text field.
  6. Click the blue Update button at the top-right corner of the page to publish the widget.
Widget page showing the shortcode block with your code pasted inside

Step 3: Alternative – Add Widget via WordPress Customizer

If your active theme supports the Customizer, you can add your widget with a live preview of your layout changes:

  1. Navigate to Appearance › Customize in your dashboard.
  2. Click on Widgets inside the Customizer sidebar menu.
  3. Select the target widget area where you want to embed the feed.
  4. Click + Add a Block, select the Shortcode block from the list, and paste your shortcode inside.
  5. Click the blue Publish button at the top of the Customizer sidebar to save your changes.
Add instagram feed shortcode to Widget via WordPress Customizer

Step 4: Alternative – Add Widget via Classic Widgets Screen

If your site uses the legacy Classic Widgets editor:

  1. Navigate to Appearance › Widgets.
  2. Locate the Text or Custom HTML widget from the available list on the left.
  3. Drag and drop the widget into your target sidebar column on the right.
  4. Paste your shortcode directly into the main text content box of the widget.
  5. Click the Save button and then click Done at the bottom of the widget box.
Add Instagram feed to Widget via Classic Widgets Screen

Optimizing Instagram Feeds for Narrow Widget Sidebars

Sidebar areas are narrow, typically measuring between 250 px and 350 px in width. If you embed a standard 4-column grid feed in a sidebar, the thumbnails will squeeze into tiny, unreadable boxes.

To optimize your layout for these narrow spaces, follow these configuration guidelines:

1. Limit Column Counts

Open your feed in the setup wizard and proceed to Step 5 (Layout). Under Columns and Rows, switch the layout mode to Manual and set your Columns count to 1 or 2. This ensures that your photos display clearly in your sidebar.

2. Use Slider Templates

If you want to display many photos but want to conserve vertical page space, select Grid Slider Clean as your template in Step 1. This lets sidebar visitors scroll through your photos horizontally using touch-swipe or navigation arrows.

3. Disable Complex Headers

A full profile header displaying follower counts, following counts, and bios takes up too much vertical space in a sidebar layout. Expand the Header accordion in Step 5 and toggle off extra elements under Header Elements, or choose a Clean template in Step 1 to remove the header completely.

4. Minimize Post Elements

Turn off Likes Count, Comments Count, and Text under Step 4 (Post Elements) to keep your narrow sidebar thumbnails clean and uncluttered.

Troubleshooting Common Widget Issues

The widget displays raw shortcode text instead of the feed

This occurs if the shortcode has been pasted inside a raw code block, preformatted block, or paragraph block rather than a dedicated Shortcode block. To fix this, delete the plain text, add a proper Shortcode block to your widget container, and paste your code inside it. Additionally, ensure the Elevated Instagram Feed plugin is currently active on your site.

The feed is cut off or extends past the sidebar border

This can happen if your feed has a static width set in its layout options. To resolve this, open Step 5 (Layout) of your feed configuration. Under Columns and Rows, set the Width parameter to auto. This allows the feed to automatically adapt its size to fit the container width.

Clicking on sidebar images redirects users away from your website

The default click action can redirect users directly to the external Instagram platform. To keep visitors on your site, open Step 4 (Post Elements) and change Post Click Action to Open in Modal. This enables an on-site lightbox popup that lets users browse your photos without leaving your page.

Related Documentation – Add Instagram Widget

On this page
Want More?

Get Every Elevated Extension You’ll Ever Need—One Payment, Yours for Life

Build faster, smarter, and without limits. A single purchase unlocks our entire library today and every new extension we release in the future. No renewals, no upsells, just lifetime power at your fingertips
+All other extensions for unlimited sites

The All Access Pass, available for a limited time

This exclusive package won't be around forever, as we will eventually move to a subscription model. This is your chance to get in early.
  • All Current Extensions
  • All Future Extensions
  • No Renewal Fees
  • 90-Day Money-Back Guarantee