How To Add A Pinterest Widget on Your WordPress blog

Share the love!

Adding a Pinterest widget to your WordPress blog, either in the sidebar, header or footer area is a great way to demonstrate your social proof and to get more followers on your Pinterest profile.

In this post, I will show you how to create a widget containing a Pinterest feed gallery.

There are three steps to get this done:

Step 1 needs to be done only once. When the PINIT script has been added you can create as many widgets to your sidebar as you wish without having to repeat that step.

How To Add A Pinterest Widget on Your WordPress blog
Please pin me on Pinterest!

Step 1 – Add the Pinterest PINIT script to the head section of your blog

This must be done only once however many times you add a widget to a sidebar or anywhere else on your site.

If you are using the GeneratePress premium theme follow the directions in the next section, if not skip to the following section to add the script using a plugin instead.

Adding the script with the GeneratePress (premium) theme

If you have GeneratePress premium theme, you can use the premium add-on to add a code snippet to the head section:

  • Go to Appearance->Elements
  • Add a new Hook element
  • Paste the below code into the Code box.
 <script async defer src="//assets.pinterest.com/js/pinit.js"></script> 
  • Select wp_head in the Settings tab
  • Select Entire site in the Display Rules tab
  • Click Publish or Update
GeneratePress Hook Settings
GeneratePress Hook Display Settings

Don’t have GeneratePress? No problem, use a plugin instead

If you don’t have the GeneratePress theme you can achieve exactly the same thing with the Header Footer Code Manager plugin.

If you don’t already have it installed:

  • Go to Plugins->Add New
  • Type header footer in the Search Plugins box
  • Find this plugin by 99robots
Header footer code manager WordPress plugins
Header footer code manager WordPress plugins
  • Click Install and then Activate
  • Now go to HFCM->Add New Snippet
Add new header footer code
Add new header footer code
  • Select Site Wide from the Site Display list
  • Select Header from the Location list
  • Paste this code into the Snippet/Code box
 <script async defer src="//assets.pinterest.com/js/pinit.js"></script> 
  • Click Save
Add new header footer code snippet screen
Add new header footer code snippet screen

Are you enjoying this post?

Join my mailing list here and get access to all my free resources

Step 2 – Generate the Pinterest board widget code

Make sure you have added the pinit.js script added to your head section as in Step 1 before you carry on.

Here we will be adding a board widget so you can have a gallery showing off your latest pins from a particular board.

Pinterest board gallery widget in WordPress
Pinterest board gallery widget in WordPress

In this example, we will add the gallery to a WordPress widget in the sidebar.

Select Pinterest board tab
Select Pinterest board tab
  • Enter the URL of the Pinterest board that you want to embed.
  • Select the size. Choose from Square, Sidebar, Header, or you can create your own dimensions. The size you choose will depend on what area of your site the widget will be on.
Pinterest board widget
Pinterest board widget
  • Next copy the code shown underneath.
Pinterest widget code
Pinterest widget code

Step 3 – Add the Pinterest board widget code to a WordPress Widget

Now head back to WordPress because we are now going to put the code in our sidebar.

  • Go to Appearance->Widgets
  • Scroll down until you find the Text Widget
  • Select the widget area that you want the Pinterest feed to appear
  • Click Add Widget
Add text widget
Add text widget
  • Now find the widget area that you added the text widget
  • Add a title, for example, Follow me on Pinterest
  • Make sure the Text tab is selected
  • Paste the code that you copied from Pinterest into the content area
  • Click Save
Edit text widget
Edit text widget
  • That’s it!
  • You should now see the board feed in the widget area.
  • Here I have it in my sidebar:
Pinterest board widget in WordPress sidebar
Pinterest board widget in WordPress sidebar

Follow the same directions to add a pin or profile feed to the sidebar, by selecting the corresponding tab on the Pinterest Widget Builder page.

Pinterest pin or profile widget creation
Pinterest pin or profile widget creation

Wrapping up

In this tutorial, we have added a Pinterest feed to a widget area on our WordPress blog. This is a fantastic way to get more Pinterest followers, and it looks attractive too! It’s a win-win!

Further reading

Join my mailing list here and get access to all my free resources

Share the love!

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.