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

How to Embed an Instagram Feed on WordPress

To embed an Instagram feed on WordPress, copy your feed’s custom shortcode from Step 7 of the setup wizard. Paste this shortcode into a Shortcode block in the Gutenberg Editor, a text field inside your page builder, or any widget area on your site. Once embedded, any changes you make to your feed settings in the plugin admin will update on your live pages automatically.

Table of Contents

Step 1: Get Your Instagram Feed Shortcode

Once your Instagram feed is ready inside the plugin, you can copy its custom shortcode from two locations in the plugin interface:

  • From the Setup Wizard: On Step 7 (Complete), click the copy icon next to the generated shortcode block.
  • From the My Feeds Page: Go to Elevated › Instagram Feed, click the My Feeds tab at the top of the interface, find your target feed, and click the Copy shortcode button.
Wizard Step 7 with the shortcode and Copy shortcode button visible

Step 2: Embed Instagram Feed inside Gutenberg Block Editor (Pages/Posts)

Open the WordPress page or post edit screen where you want to display your Instagram feed:

  1. Click the + (Add Block) icon in the Gutenberg block editor.
  2. Type Shortcode in the block search bar and select the Shortcode block.
  3. Paste your copied Instagram feed shortcode [elevated_instagram_feed id=”X”] directly into the input text area of the block.
  4. Click the Publish or Update button at the top right of the screen.
Gutenberg block editor showing the shortcode block with your code pasted inside

Step 3: Embed Instagram Feed inside Classic Editor

If your WordPress site uses the legacy Classic Editor, here’s how you can embed an Instagram feed:

  1. Open the target page or post edit screen.
  2. Select either the Visual or the Text tab in the main post content area.
  3. Paste your copied feed shortcode directly into the text editor where you want the social grid to appear.
  4. Click the Publish or Update button inside the publish panel in the right sidebar.
Classic Editor showing the shortcode code pasted inside

Step 4: Add Instagram Feed to Widget and Sidebar Areas

To display your feed inside sidebars, or footer widget rows:

  1. Navigate to Appearance › Widgets in your WordPress admin menu.
  2. Locate your target widget block container, such as Primary Sidebar or Footer Column 1.
  3. Click the + (Add Block) icon inside that widget box, search for Shortcode, and select the block.
  4. Paste your shortcode [elevated_instagram_feed id=”X”] into the text area of the block.
  5. Click the blue Update button at the top of the widgets page to apply your changes.
Widget page showing the shortcode block with your code pasted inside

How Do WordPress Shortcodes Work?

The [elevated_instagram_feed id=”X”] shortcode acts as a placeholder. When a visitor lands on a page containing this code, WordPress runs the plugin’s loading engine. The plugin fetches your saved layout rules, color styles, and cached images for that specific feed ID and compiles them into a responsive layout before rendering the page.

A key benefit of the shortcode setup is that it is fully dynamic. If you need to edit your filter rules, change column grids, or adjust hover background colors, you can do so directly within the plugin’s setup wizard. Any changes you make will update automatically on your live pages without requiring you to replace or re-paste the shortcode.

Troubleshooting Common Embedding and Display Issues

The shortcode displays as plain text on the frontend website

This occurs if you have pasted the shortcode 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 page layout, and paste your code inside it. Additionally, ensure the Elevated Instagram Feed plugin is currently active on your site.

The feed is cut off horizontally inside a narrow widget sidebar

If your feed is too wide for your sidebar, the number of visible columns is likely too high for the container space. To resolve this, open Step 5 (Layout) of your feed configuration. Under Columns and Rows, switch the layout mode to Manual and set your Columns count to 1 or 2. Alternatively, choose a slider template like Grid Slider Clean to let users scroll through images horizontally.

The Instagram feed does not appear on my live page after embedding

Verify that you have clicked the Update or Publish button inside the WordPress page editor to save your page modifications. If your page has saved successfully but the feed remains missing, your local cache is likely out of sync. Navigate to the Settings tab in your plugin admin and click the red Clear Cache button next to the Clear Cached Media configuration setting to force your live pages to rebuild.

Embed Instagram Feed – Related Documentation

  • Choosing a Feed Template
    Compare clean grid layouts with traditional slider and masonry mosaic templates.
  • Using the Shortcode
    Detailed guide to standard and advanced shortcode parameters for manual inline feed embedding.
  • Instagram Feed Caching
    How the background cache engine handles, secures, and renders images quickly on page load.
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