Posted by Aimee Cozza on October 15th, 2018

I love using Pinterest to embed content into WordPress. It’s great! It’s an endless source of content, and for the most part all of the credit you need to offer back to the original creator of the pin is already contained within the pin. You aren’t hosting images on your own space as well, so it’s an all around win. Embedding pins from Pinterest is as easy as pasting in a little bit of embed code. Easy enough, right? However, the problem with WordPress is often that content (including code) pasted in will disappear as soon as the visual editor is used. This is something that will be more addressed with Gutenberg come November, but I’m not entirely sold on Gutenberg nor do I use page builders for most common pages and posts. So, how can we bypass this?

Shortcode for Days

The easiest way is to bypass WordPress’ handling of code entirely. Usually this is done by utilizing shortcode! In this example, I want to create a piece of shortcode that will put in all of the necessary embed code for me. All I have to do is enclose the URL I want to embed with my shortcode. It will look like this:

[pin]http://www.pinterest.com/pinURL[/pin]

Easy enough!

Step 1. Make sure that you have the Pinterest embed JS placed somewhere in your theme files, probably in footer.php or header.php (only if you’re using a child theme, and if you’re not, you probably should be if you’re making theme changes). The code is the following:

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

Once you have the code placed, you can both embed pins the normal method, or start using my shortcode.

Step 2. Install this Pinterest shortcode in your theme’s functions.php (again, only if you’re using a child theme).

function pinterest_shortcode($atts = '', $content = null)
{
$a = shortcode_atts( array(
'width' => 'large',
), $atts );
    // do something to $content
 return '<a data-pin-do="embedPin" data-pin-width="' . $a['width'] . '" href="'.$content.'"></a>';
return $content;
}
add_shortcode('pin', 'pinterest_shortcode');

Step 3. Give it a try! Try enclosing a pinterest pin URL with [pin][/pin].

Step 4. Optional: The default size I have set for pins is “large”, but you can also use any of the other sizes Pinterest offers including small, medium, and large. Just edit the

[pin] opening tag like so:

[pin width=small]URL goes here[/pin]

[pin width=medium]URL goes here[/pin]

[pin width=large]URL goes here[/pin]

Limitations

For some reason, I noticed that you just cannot embed certain pins, whether it’s with the embed code officially delivered from Pinterest or with the shortcode. Usually you can tell by looking at the URL of the pin. If it looks like https://www.pinterest.com/pin/ and then has just a bunch of numbers, it will be fine to embed. If it looks like the following though, it won’t work:
https://www.pinterest.com/pin/AegI-7QA___Fx0_c4gCLFbUOohFywGDfYxAvOTI3WPwy2YqGruy4NFA/

How about a plugin?

Even easier… We’ve developed a plugin that will place the official Pinterest script for you and make pinning with our shortcode easy! Want to give it a try? Check it out on our Pinterest Shortcode page.

Did this help? Let us know in the comments below!