Embed a Pinterest board in WordPress

Prerequisites

• WordPress site.
• Pinterest account.
• A Pinterest board to embed on your WordPress site. Note that this doesn’t have to be your own board.

Configure WordPress

A specific instruction must appear in one of the PHP files on your WordPress site in order for embedded Pinterest boards to be displayed.

Don’t worry – you don’t need to write code to do this. 🙂

This instruction just tells WordPress to include some commands that tell it how to handle the Pinterest board.

• Check to see if this is already set up.
  • If you have Jetpack installed, check to see if you have this file:
     
    wp-content/plugins/jetpack/modules/shortcodes/pinterest.php

    If you do, make sure it contains something like this:

    $script_src = '//assets.pinterest.com/js/pinit.js';
wp_enqueue_script( 'pinterest-embed', $script_src, array(), false, true );

  • If you don’t have Jetpack installed, see if this line or something similar is present in your PHP files (search for “pinit.js”). It would likely be in header.php, but could be in another location.
     
    <script async defer src="//assets.pinterest.com/js/pinit.js"></script>

• If this is not set up, add this text to the file header.php for your theme, and save the modified file.
   
  <script async defer src="//assets.pinterest.com/js/pinit.js"></script>

  Note that if you’re not running a child theme, this line will be overwritten if your theme is updated. (Unless you’re doing something that’s very customized, you should be using a child theme for this very reason – because who wants their modifications to be lost?)

Embed your Pinterest board

• Go to the board you want to include, and copy the URL.
   
  
   
• Go to the Pinterest Widget builder page.
• Click on Board widget.
   
  
   
• Paste the URL you copied into the Pinterest board URL field.
• Select the desired size.
• Copy the code displayed in the box under “Copy and paste this code…”
• Edit the WordPress page or post or widget where you want the Pinterest board to be displayed.
• Paste in the code you copied. This should work in the Visual Editor as well as in the Text Editor in WordPress.
• Preview what you’ve done to make sure everything is displaying properly, and then save it.

You can modify the HTML to adjust the size, change the alignment, etc. For example, this text centers the board.

<center><a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/jamieauthor/underground-images/"></a></center>

And here’s the result.