Start your new blog today
Subscribe and get your FREE Blogging Blastoff Email Course
Get The FREE course

How To Add A Pinterest Widget on Your WordPress blog

3 minute read

WordPress Tutorials

Disclosure: This article contains affiliate links. When you click these links and make a purchase, I may get a small commission. It won’t cost you anything, but it helps me to run this site.  Find out more.

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.

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

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

Step 2 – Generate the Pinterest board widget code

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

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!

This post was proofread by Grammarly

Related posts

Did you love this article? Please share it if you did!