How to add a responsive Pinterest board to your Beaver Builder WordPress blog

You can embed a Pinterest board directly into any WordPress page, blog post, or widget area – no plugin needed!

For this tutorial, I’ll assume that you are using the Beaver Builder Framework with a child theme. However, you should be able to implement this on most WordPress blogs.

---

Step 1

Find the Pinterest Board you want to embed and select it

---

---

Step 2

Once you are on the board, select the 3 dots and choose “Create widget”. This will take you to the Pinterest Widget Builder.

---

---

Step 3

On the Pinterest Widget builder page select the “Board” option and choose “Create your own” under the Size dropdown menu.

---

---

Step 4

Change the Board width to whatever your minimum container size is. You can also update the Board height to your preferred settings. In this example, I have my board width set to 1200px and board height to 500px.

---

---

Step 5

Review your preview and copy the first line of code. Keep it handy, as we will need that later.

---

---

Step 6

Navigate to your blog post and open up the text editor and MAKE CERTAIN to switch from the Visual editor to the Text editor first! Paste the following code directly into the text editor and replace the embed code with the one that we copied from Pinterest earlier. Then save and publish the post.

---

Paste into text editor:

<div class="super-responsive-wrapper">
<div class="board-wrapper">
<!-- Your embed code here -->
</div>
</div>

*Make sure to replace the embed code with the one we copied earlier.

WARNING: DO NOT EVER switch back to the Visual Editor for posts where you’ve added the above code. If you do, the editor will strip out your code and it will be lost! If you want to fix this issue, and you feel comfortable editing your functions.php file, you can try this solution. It forces the text editor as the default on specific pages or posts. You’ll need to know the page ID for each post where you want this to work. I tried it out and it solved the problem for me.

---

Step 7

Add the following custom CSS code:

---

.super-responsive-wrapper {
width: 100%;
margin: auto;
}

.board-wrapper {
margin: auto;
text-align: center;
}

.board-wrapper span {
overflow: hidden;
max-width: 100%!important;
}

---

Step 8

Go back to the Pinterest widget builder page and copy the pinit.js code.

---

---

Step 9

Navigate to your customizer and add the code into Code > Footer Code

---

---

Step 10

View your post and test out your responsive Pinterest board!

---

---

Conclusion

---

If you followed the steps above you should have successfully embedded a responsive Pinterest board into your page or post. A special thanks to Michael Pilsner for providing the code for the responsive portion of this tutorial.

*This post includes affiliate links to my favorite theme framework and page builder, Beaver Builder.