How do I add an Instagram widget to WordPress?

Update: You can now use our SnapWidget WP Instagram Widget to add an Instagram feed to your WordPress website. This applies to adding your widget to Left and Right sidebars as well as Footers.

Even though WordPress is known as THE blogging software to use, it has evolved a lot through the years. It is now a robust CMS (content management system). This means you can merely create a blog or you can build a fully functional website or mobile application.

Let’s not forget that it is not only free but also open source. Which means that you have the ability to tinker away at the code. Modifying it to your heart’s content.

You basically need web hosting. That’s it. Once you sort your hosting out, you will be well on your way to have access to more than 2600 themes and 31 000 plugins to do with as you please.

Let’s have a quick look at how you can add your Instagram widget to your WordPress site.

Note: This only applies to wordpress.org installations as wordpress.com does not support the use of iFrames. It also applies to WordPress installations done on self-hosted sites by means of e.g. Softaculous.

A widget can be added in different ways, i.e. pre-defined widget area (this differs from theme to theme) as well as directly in your post (applicable to all themes). In this tutorial we will look at the following themes (the most popular themes):

• Make (this theme includes a Page Builder),
• Twenty Ten and
• Twenty Fifteen.

For this complete tutorial on the pre-defined widget area inclusion of the widget, we will be using the Make theme. At the end of this tutorial, we will indicate what widgets are available in the other mentioned themes.

Themes with a page builder (Make)

Make Theme

1. Log in to WordPress and go to your Dashboard.
2. The current theme will be displayed under At a Glance.
3. Click on Customize Your Site under Get Started.
4. Click on Sidebars & Widgets.
5. You will be presented with 4 Widget Areas where you can include your widget.
6. Select Area to add snippet.
7. Click on Add a Widget.
8. Click on Custom HTML.
9. Add a Title and insert your snippet in the Content box.
10. Looking at your website with the Make theme, these are the areas where your widget can be placed.
11. To save your widget and publish it to your website, click on Save & Publish.

Other themes with pre-defined widget areas.

Theme Twenty Ten

1. Log in to WordPress and go to your Dashboard.
2. The current theme will be displayed under At a Glance.
3. Click on Customize Your Site under Get Started.
4. Click on Widgets.
5. You will be presented with 6 Widget Areas where you can include your widget.
6. Select Area to add snippet.
7. Including you widget in any of these areas is the same as in the above Make theme example.
8. Looking at your website with the Twenty Ten theme, these are the areas where your widget can be placed.
9. To save your widget and publish it to your website, click on Save & Publish.

Theme Twenty Fifteen

1. Log in to WordPress and go to your Dashboard.
2. The current theme will be displayed under At a Glance.
3. Click on Customize Your Site under Get Started.
4. Click on Widgets
5. Click on Add a Widget.

Theme Twenty Fifteen only allows adding your widget to the sidebar. Including your widget in this area is the same as in the above Make theme example.

You can move the widget to another slot in the sidebar by using the re-order option, e.g.move it to the top just above the Search option.

Your widget will then be displayed as follows on the preview.

To save your widget and publish it to your website, click on Save & Publish.

Inserting your widget into your blog post area.

This process is the same for any theme. It allows you to place your widget anywhere in the blog post area. This is not seen as a WordPress widget and therefore has no Title included as in the pre-defined Widget Areas. If you require a Title (or Header) for your widget, you can add this by using additional HTML tags in your snippet, e.g.

• A header line: <h3>Our Products</h3> – Use <h1>, <h2>, <h3> depending on required header,
• A bold line: <strong>Our Products</strong>,
• An italic line: <em>Our Products</em> or
• A bold italic line: <strong><em>Our Products</em></strong>

Remember to go check out our youtube tutorial here: https://buff.ly/2yuFYqq