How to Display Pins on Blog Pages in WordPress

When it comes to getting your content to make the rounds on Pinterest, you probably know the basics like creating a pinnable image and having a Pinterest sharing button. But you can take pinnability (yeah, I made that word up) one step further by adding popular pins to your special blog pages in WordPress! To explain what I mean, here’s what I did on my About page to showcase some of my popular content.

You can pin those posts directly from my About page. Also, if someone clicks on the image, they are taken to the actual blog post. Why? A blog reader might pin a post to read later. Or perhaps they’ve read it before, but now decide their Pinterest followers might like the post, too. You might be wondering why you’d want to do this versus having a plugin that displays a PinIt button when you hover over the image. Well, I use that too but I love this idea because your reader gets to see how many times a post has been pinned.

Ideas for Displaying Pins

You can use this pin layout on any of your blog pages. Some ideas where you can add them:

• An About page (see how it works on the page)
• Resources page
• Start Here/New Here page
• Popular Posts on any page (like a page that highlights a special category)
• A page that showcases a popular blog series (you could link to the posts in the series using pinnable images)

Special note: From my experience, the counter only displays on blog pages, not posts. You could try the steps below and try it out on a post, but for me, it only displays on pages. You CAN add these pinnable images and buttons to your sidebar though, which I’ll explain at the end of this post!

How to Display Pins

Displaying pins in this layout is pretty simple, but does require a good deal of copying and pasting code. Hope your fingers are ready! There are four main parts to displaying pins in this way:

• A simple table (makes them display in one single row)
• Code to display each pinnable image
• Code to embed each Pin It button (which you’ll generate from Pinterest in just a sec)
• Javascript code to make the counter display (also from Pinterest)

Don’t let all the talk about code scare you off. I’ll walk you through it all easy peasy. The end result is totally worth it!

1. Create the table.

First you need to create a table. The table I use is one row deep and three columns wide. If you want more rows, just repeat the code again (my About page uses two tables). To create a table within your page, click the Text editor tab in WordPress. Move your cursor to where you’d like to add the table. Then copy and paste this code for a basic table with no border.

<table border="0">
<tbody>
<tr>
<td><center>CODE FOR IMAGE 1</center></td>
<td><center>CODE FOR IMAGE 2</center></td>
<td><center>CODE FOR IMAGE 3</center></td>
</tr>
<tr>
<td><center>PIN IT CODE FOR IMAGE 1</center></td>
<td><center>PIN IT CODE FOR IMAGE 2</center></td>
<td><center>PIN IT CODE FOR IMAGE 3</center></td>
</tr>
</tbody>
</table>

In case you’re curious (and even if you aren’t) the <tr> stands for table row and the <td> stands for table data. If you switch back to the page’s Visual Tab, it looks like this (the dotted lines just denote an invisible border):

2. Add a pinnable image.

Now, you want to add an image to the first cell of your table. You also want the image to link to its blog post. That way, if someone clicks the image, they’ll be taken directly to the blog post and can always pin it from there. This just takes a little copy and pasting on your part. Copy this code then fill it in with your blog post information.

<a href="URL OF BLOG POST HERE"><img alt="TITLE OF BLOG POST HERE" src="URL OF IMAGE HERE" width="190"></a>

(To get the code for your image, go to the URL of the post you want to use (not from within your blog), then right click on the pinnable image and select Copy Link Address.) Since your image is much larger on your actual blog post, you want to shrink it to fit in the table. In the code, you can see that I chose 190 pixels since my main column is about 600 pixels. By only specifying the image’s width, WordPress resizes the image proportionally.

For my table, my code looks like this:

<table border="0">
<tbody>
<tr>
<td><center><a href="https://www.blogclarity.net/2011/02/comment-vomit-how-not-to-leave-comments/"><img alt="Comment Vomit: How Not to Leave Blog Comments" src="https://www.blogclarity.net/wp-content/uploads/2011/02/comment-vomit-pinterest.png" width="190"></a></center></td>
<td><center>CODE FOR IMAGE 2</center></td>
<td><center>CODE FOR IMAGE 3</center></td>
</tr>
<tr>
<td><center>PIN IT CODE FOR IMAGE 1</center></td>
<td><center>PIN IT CODE FOR IMAGE 2</center></td>
<td><center>PIN IT CODE FOR IMAGE 3</center></td>
</tr>
</tbody>
</table>

And my table so far looks like this:

3. Add the PinIt Button for your image.

Now you want to make it as easy as possible to pin your content by adding the Pin It button underneath the image. To do this, you first have to generate some code on Pinterest. Go to the Pinterest Widgets page and select the Pin It Button tab.

Now just paste your URLs for the blog post and the image in their respective fields. For Pin Count, I selected Beside the Button, but you can do it however you’d like. Be sure to enter a description too! When you’re done, select Build It! Scroll past the Preview and copy the code shown under Insert the Link. Paste the code into your table where it says “PIN IT CODE FOR IMAGE 1.”

If you tab back to your Visual Editor, it looks like this:

4. Add Pinterest’s Javascript code.

In order for the pin counter to display, you need to add one little piece of code to your site. This counter updates any time someone pins (or re-pins) your blog post! If you already use a Pin It plugin, you may not need to do this step. Preview your page and see if the counter displays. If it does, go to step 5. If not, continue on, my friend. On the Pinterest Widget Builder page, if you scroll down past Insert Your Link, you will see Load the Javascript. Copy it or just copy it from here:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

So where do you add the code?  It depends on your theme! Many themes or frameworks, like the Genesis Framework, make it easy to paste code like this. If you’re on Genesis, go to Genesis –> Theme Settings then scroll down to Header and Footer Scripts. Paste the code into the second box, which essentially places your code before the </body> closing tag.

If your theme doesn’t offer the ability to drop code in like this, then go to Appearance –> Editor and select the footer.php file from the right column. At the bottom of that file you’ll see the </body> tag. Paste your script code ABOVE that tag, then save the file.

You only need to PASTE THIS CODE ONCE, regardless of how many pages you add the Pin It buttons to. Yay!

5. Repeat steps 2 and 3 to complete your table.

Head back over to your blog page to finish your table. Just repeat steps 2 and 3 for your other pin-worthy posts. When you’re done you’ll have one three-column row of images. Ta-da!

Bonus- Add Individual Pins to Your Sidebar, Too!

You can also display images with the Pin It button counters on your sidebar! For this you won’t need a table. Instead, just take the code for your image (starting with the code <center> and ending after the </center>) and paste it into a new Text sidebar widget. You might need to adjust the width of the image to fit your sidebar. Then underneath that, copy and paste the Pinterest Pin It button code into the Text sidebar widget. Save it. That’s it!

I’d love to see how you put this tutorial to good use over on your own blog! Let me know if you end up giving it a try.

Like this post? Give it a pin!