How to Hide Pinterest Pins in Your Blog Post
How to Hide Pinterest Pins in Your Blog Post

Who would have thought when Pinterest came out in 2010 it would be an invaluable way to drive traffic to your site?

I remember the days when I used to use Pinterest to look up recipes, decor ideas and funny memes. Now it’s used by mom bloggers everywhere to drive traffic and market their content.

The key to tapping into Pinterest marketing is by adding pin images to your post that allows readers to share your content with their followers.

While you can just throw down some pins in your content and call it a day, those large images can be distracting and affect the readability of your posts.

Instead, I’m going to show you an easy and painless way to hide pins in your post while allowing them to be accessible to your readers:

 


.

1. Add the CSS Code

We’re going to use CSS coding to tell the browser not to display the Pinterest images in your post.

Head to your WordPress dashboard and hover over the “Appearance” option on the left-hand side. Click on “Customize”.

If you’ve never used WP’s Customizer before, this is a handy way to make overall changes to your site as well as easily add CSS code without touching your site’s backend.

Once you’re there, look for the last option called “Additional CSS” and click on it.

If this is your first time adding CSS code, you’re going to get a message explaining on how to use this section. Ignore it and make it go away by selecting “close”.

In the text box, add the following CSS:

.pinterest-hidden {display: none;}

Simple.

We’re going to assign this to the images once they’re placed in the post, but this basically means that whatever images are designated with the tag “pinterest-hidden” are not going to be displayed.

Click “Publish”. Once the button says “Published”, click the “x” to close the customizer.

2. Add Your Pins to Your Post

Once you have created a new post, scroll to the end of your wonderful content and click the “Add Media” button at the top of the editor.

If you’re using the Gutenberg editor, click the little “+” button and select “image”.

Located your pins and add them all.

When you click on the image, a little box will pop up allowing you to choose the alignment. Not important. Click on the little pencil – this will take you into the editing screen.

Click on the “Advanced Option” option. You’ll see two fields but you want the one that says “Image CSS Class”.

This is where we are going to assign that CSS code we added to the image. Type in:

pinterest-hidden

This will hide the Pinterest images in your post.

Before we leave this screen, however, we want to ensure the Pinterest images are added at full size. Otherwise, Pinterest will only pick up the reduced image size and that’s no good.

Under the “Display Settings” section, use the drop-down menu “Size” to change it to “Full Size”:

Awesome! Now no one will see your Pinterest images!

But, wait – what if you want people to see at least one Pinterest image?

Simply choose the Pinterest image you want to display in your post and omit the “pinterest-hidden” CSS class.

3. Adding the Pinterest Description

Even though we’re done hiding your Pinterest images, we still need to add the meta data that will display a description along with your pin when it’s shared.

There’s no easy-peasy way to do this (unless you want to buy a fancy plugin that will automate this information). We’re going to have to go into the “Text” option of your post editor and add it manually.

Along the top of the post editor, you’ll see two tabs: “Visual” and “Text”. Typically, you’ll write your posts in the visual tab.

Click on the “Text” tab and locate the HTML code for your Pinterest images:

Right before that closing “/>” bit at the end of the code, add the following:

data-pin-description=”Your Pin Description”

Obviously change “Your Pin Description” to whatever you want it to say.

If you have multiple pins, you’ll have to copy and paste it into each image code.

Rudimentary, I know, but the more you do it as you write posts, the quicker it will seem.

4. Verifying That It Worked

I’ll be the first to admit that I am not a perfect person – so I always preview my post to make sure I did everything properly.

Above the “Publish” button on the right-hand side of the post editing screen, click on “Preview”. A new window will pop up showing you what your post looks like.

(If you saw the amount of times I hit that “preview” button while writing a post, it would make your toes curl – and not in the good way!)

If you don’t see the Pinterest images you wanted to hide, yay! If you do, however, it’s likely that you may have typed in the CSS class wrong.

Go back to the images that are showing that shouldn’t be showing and go back into the image editor. Make sure the CSS tag you entered here says:

pinterest-hidden

If that doesn’t work, go back into the Customizer and Additional CSS and make sure that tag matches the one you placed there.

I always type in the CSS tag under the image editor and sometimes my fingers fly faster than my brain so I end up making a typo.

Once you’ve fixed it up, preview your post again to make sure it worked.

There Ya Go!

It’s definitely a headache to make sure you properly hide your pins in your post, as well as adding the pin description, but I guarantee you that as you get doing this for every post, it gets easier and quicker.

It’s a great way to ensure that your readers have multiple pin images to choose from without shoving them all in their faces.

Plus, it allows you different images that you can share to your Pinterest account to boost traffic!

What’s your biggest frustration when it comes to creating and adding pins to your content? Let me know in the comments below!

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Use Tailwind for FREE (Pinterest Without Paying!)

Have you been banging your head over your Pinterest marketing strategy and trying to figure out a way to organize your pinning schedule without spending money on Tailwind? Once upon a time, I did. I made up fancy Google spreadsheets that listed all of my blog posts...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

Why You Should Learn CSS as a Blogger

Why You Should Learn CSS as a Blogger

Even though this article is titled Why You Should Learn CSS as a Blogger, I wrote it in my schedule as "Why You Learn CSS" and that made me laugh. So, why you learn CSS? While there are many fancy plugins out there that give you a buttload of control over the look of...

10 Online Courses to Learn HTML and CSS for Free

10 Online Courses to Learn HTML and CSS for Free

Are looking to learn HTML and CSS for free? While this site can certainly give you cool little coding tidbits to apply for your site, you may have a hankering to learn how to do this coding all on your own. I know I did once upon a time - and I had so much fun...

What the Heck is CSS? And How It Can Help Make Your Site Unique!

What the Heck is CSS? And How It Can Help Make Your Site Unique!

CSS is a coding language that is such an integral part of web design - yet an invariable mystery to many mom bloggers. I remember the first time I ever encountered CSS. I was already using HTML to make dinky little websites for fun, injecting styles and colors all...

0 Comments

Trackbacks/Pingbacks

  1. Your Complete Guide to Creating and Selling Courses Online | Mom Blog Life - […] can even create a Pin for your course and share it on that medium as […]
  2. Why You Should Learn CSS as a Blogger - Mama Needs Coffee - […] You May Also Like: How to Hide Pinterest Pins in Your Blog Post […]
  3. How to Use Tailwind for FREE (Pinterest Without Paying!) - Mama Needs Coffee - […] You May Also Like: How to Hide Pinterest Pins in Your Blog Post […]

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content