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 – Add the Pinterest PINIT script to the head section of your blog
- Step 2 – Generate the Pinterest board widget code
- Step 3 – Add the Pinterest board widget code to a WordPress Widget
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.
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
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
- Click Install and then Activate
- Now go to HFCM->Add New Snippet
- 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
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.
In this example, we will add the gallery to a WordPress widget in the sidebar.
- Head over to the Pinterest Widget Builder page on the Pinterest website.
- Select the 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.
- Next copy the code shown underneath.
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
- 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
- That’s it!
- You should now see the board feed in the widget area.
- Here I have it in my 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.
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!