How to Hide Pins in WordPress Blog Post
Do you want to hide pinnable images in blog posts?
If yes then in this tutorial we have shared a few easy ways using which you can do this easily.
When it comes to driving traffic to your website, Pinterest is one of the best source along side search engines.
Now, if you have been using this platform then you must be familiar with the fact that it is recommended that you must create multiple pins as some tend to do better than the others.
Keeping this in mind,
While browsing the web, at times when you pin from other sites then you must have noticed that it gives you the option to pick from multiple pins.
And these Pinterest images are not visible on the page.
These sites are basically hiding pins in blog posts and you can do this easily on your site by using one of the ways we have shared below. (We recommend using Tasty Pins for this)
Also, in case you are looking for a free tool to create pins then we recommend using Canva.
How to hide pinnable images in WordPress
Before we move further, it is important to know that in this tutorial we have shared multiple ways to hide pins in WordPress.
These include using
- Plugin
- Code
We recommend using plugins for hiding pinnable images in posts and pages created using both WordPress editor and Elementor.
The reason behind this recommendation is that- it will save you time and will let you configure other Pinterest attributes for increased visibility on the platform.
Keeping this in mind, below are all the ways using which you can hide pinnable imaged in blog posts
How to hide pins using Tasty Pins plugin
If you have been optimizing your pages and posts for search engines then you must be using an SEO optimization plugin to make things easier for you.
Similar for hiding pins and optimizing them for Pinterest you will have to use a plugin known as Tasty Pins.
Using this plugin you can not only hide pins but also optimize other images on your site for Pinterest.
Below we have shared a few things you can do using Tasty Pins
- Hide Pins
- Add custom pin descriptions
- Add custom pin title
- Disable pinning for specific images
- Add Pinterest Save button
- Add Pinterest Label
- Add Pinterest follow box
And more.
All of these features makes Tasty Pins a must have plugin if you are looking to grow on Pinterest.
And the best part is Tasty Pins does the hard work for you as you can do all this with just a few clicks and no coding required.
Assuming that you have this plugin installed, to hide pinnable images in WordPress using Tasty Pins, the first step is to add or edit a page or a post.
And it will take you to the default WordPress editor.
Here you will have to scroll down to the very bottom of the page until you find Tasty Pins settings.
Under this you will find the Pinterest hidden images settings that will allow you to upload and hide pins in blog posts.
You need to click Select Images here and it will take you to the Media Library where you will be able to upload or select a pinnable image or pin that you want to hide.
Before you click Select, make sure to add
- Pinterest Title
- Pinterest Text
- Alt Text
For increased visibility on both Pinterest and search engines.
On selectin this image or pin, it will show under the Pinterest hidden images. See the screenshot below for reference.
It is important to know that if you want to hide multiple pins then you will have to repeat this process.
Check if pins are hidden
To check if pins are actually hidden, you need to view this page or post and click the Pinterest browser extension.
As you can see in the screenshot above, it only displays the 2 images that we have hidden using Tasty Pins plugin.
Kindly note- If there are other images on the page or post then those will be displayed along side hidden pins as well.
In case you want to disable pinning of specific images then Tasty Pins gives you an option to do it as well.
Also, if you want the hidden pins to appear before any other image when a user shares your content on Pinterest then you will have to select the option Force pinning of hidden images in the Tasty Pins settings in the WordPress editor.
This is a very useful option that will encourage users to only pin hidden pinnable images in blog posts.
And that’s it you now know how to hide pinnable images in WordPress using Tasty Pins.
If you have liked what you have read and want to give Tasty Pins a try then you can do so by clicking the button below
How to hide pins in Elementor Post
When it comes to Elementor and Pinterest, one of the questions that is often asked is how can you hide pins in posts created using Elementor page builder.
If you have been using Elementor then you already know that it has its own editor using which you create posts.
Its widgets do come with the option to hide on devices with just one click. However, to add other Pinterest attributes you will have to add code.
And this makes the process a little confusing and time consuming.
Also, custom code is feature that is only available in Elementor Pro which leaves the free version user stuck.
And we don’t want that.
To make thing easier for you, we recommend using Tasty Pins to hide pinnable images in Elementor posts and pages.
And using this plugin, both free and pro version users can hide pins in posts with just a few clicks.
On top of this, you will be able to add custom pin description and titles to other images in Elementor as well.
See- Does Tasty Pins work with Elementor
Keeping this in mind, the first step in the process is to edit the Elementor post or page and not Edit it with Elementor.
On editing, it will take you to the default WordPress editor where you will see Tasty Pins settings at the bottom.
In the Tasty Pins setting, you will find the option for adding hidden Pinterest images.
And here you will have to click Select Images and it will take you to the Media Library where you will be able to upload and select pins
Once you have selected the pin that you want to hide, make sure to add Pinterest text and title for increased visibility.
After you are done selecting pins it will be visible right next to the Select Images option.
In case you want to hide multiple pins in Elementor posts, you will have to repeat this process.
And the selected pin will be displayed right next to it.
The last step in the process is to click Update and that’s it you have successfully hidden Pinterest images in Elementor posts.
It is important to know that if you want to show the users hidden pins first then you will have to select the option “Force pinning of hidden images”.
If you have liked what you have read and want to give Tasty Pins a try then you can do so by clicking the button below
How to hide pinnable images using Social Snap
Before we dive into this section of the tutorial, lets first get to know what exactly is Social Snap.
Social Snap is a popular social media plugin using which you can add both share and follow buttons on your WordPress site easily.
This plugin is packed with features and it lets you do a lot more than just adding follow and share buttons such as
- Adding custom images, titles and description for social media platforms
- URL shortening
- Page view counter
- Analytics
- Display top performing posts
- Adding Open Graph tags
And more.
All in all this plugin is a complete package when it comes to your social media needs.
Keeping this in mind, it is important to know that if you are looking to buy Social Snap then you will get 30% OFF using our SPECIAL LINK.
And below are the plans
- Plus- $27.30 (1 site)
- Pro- $69.30 (3 sites)
- Agency- $209.30 (15 sites)
Assuming that you have Social Snap installed on your site, to hide pins using this plugin, the first step is to edit a post or a page.
And it will take you to the default WordPress editor
Once you are in the WordPress editor, you need to locate Social Snap tab in the Post / page settings
Under Social Snap options you will find the Pinterest image settings.
Now click the upload image button and it will take you to the Media library from where you can either upload or select an existing image as hidden pin.
In the next step, you need to add a description to the image and you can do that by entering a description in the Pinterest description option which can be found just below where you have uploaded the hidden image.
It is important to keep in mind, you can include hashtags in this description and Social Snap will let you do that.
Once you are done till here, click Save draft or update to save the changes you have made.
Now that you have included a hidden pin in your blog post and a description, if anyone shares your content using the Pinterest Share button, it will only show them the hidden image.
If you want to include multiple images in WordPress using Social Snap, then let me tell you this plugin currently does not offer this feature and for that, you will need Tasty Pins.
This concludes all the settings that you need to know about hiding images in WordPress using Social Snap.
In case you have any plugin-related problems or having difficulty configuring it then reach out to Social Snap customer care and your problems will be resoled quickly.
How to hide pinnable images in posts using code
Before we dive into this part of the tutorial here is a friendly disclaimer- If you are not comfortable with editing code then use the any of the plugins we have mentioned for hiding pins. (We recommend Tasty Pins)
Keeping this in mind, there are a few ways using which you can hide pins in WordPress using code
- Without using placeholder image
- Using placeholder image
We have discussed both the processes below, make sure to follow each step carefully.
Also, we do not recommend just hiding pins using the CSS display property as it will give no information to the platform on what it is about.
And that is why we have included a short tutorial on adding custom Pinterest description as well.
How to hide pins without a placeholder image using code
First things first, we will be using a CSS property known as display to hide the pin.
style="display:none"
And we will be adding custom pin description using the attribute data-pin-description.
data-pin-description="ADD YOUR DESCRIPTION HERE max 500 character min 100"
Assuming that you have uploaded the pin and added it to the blog post or page, the first step in the process is to edit the image block as HTML.
For this you need to click the ellipsis menu or 3 dots on the image block toolbar and then selecting Edit as HTML.
Doing this will convert the image to code and below is the screenshot for reference.
In the next step you need to add the CSS display property at the very end .
You can copy it from below and use the screenshot to know where to place it.
style="display:none"
When you will add the display property, you will get an error stating “This block contains unexpected or invalid content”.
This error is caused because the image block does not include the display property and to resolve it, you will have to click the 3 dots right next to Attempt Block Recovery.
And it will show you the option to convert to HTML.
Selecting it will show you the code.
Remember, you do not have to select Attempt Block Recovery as it will remove the CSS display property that you have just added.
Keeping this in mind, below is the screenshot of how it will appear after you have converted it to HTML the second time.
It is important to know that you can click Preview on the toolbar and it should show you nothing.
This gives a confirmation that the pin is hidden.
Once you are done till here, the next step is to add the custom pin description.
And for this you will have to add data-pin-description attribute after the CSS display property.
Below is the code snippet that you will need followed by a screenshot for reference
data-pin-description="ADD YOUR DESCRIPTION HERE max 500 character min 100"
Kindly note- Pinterest allows you to add a maximum of 500 characters and minimum recommendation is 100.
Feel free to add up to 500 characters in the data-pin-description attribute.
Once you are done till here the last step in the process is to click Update and save the changes.
Check if the pin is hidden
To check if the pinnable image is hidden and the custom Pinterest description is fetched by the platform, the first step is to visit the page or post and click the Pinterest browser button.
Doing this will open a box where you will see the hidden pin.
In the next step you need to select this pin or image, click Next and save it to a board.
Once you are done saving, you need to visit the board where you have saved the pin and expand it.
On doing so it will show you the custom pin description just below the title.
Please note- I’m using a private Elementor Cloud Website to create this tutorial and thus the title is This site is private. In your case it will be the title of the page or the post you are pinning.
In case you want to hide multiple pinnable images using this way then you will have to repeat the process.
Manually hiding pins can be a bit time consuming and if you are new it can be confusing as well.
Hence we recommend Tasty Pins for this.
And that’s it now you know how to hide pins in blog post without using a placeholder image.
How to hide pinnable images in WordPress with a placeholder image using code
This way of hiding pins in WordPress is very similar to what we have discussed above.
However, there is a difference which is in this method we will be hiding a placeholder image and will be force pinning the pinnable image.
It is important to know that this method will have lesser impact on page speed as it will only load the placeholder image and its size will be 1-3kb.
The placeholder image that we will be using is of the dimension 100px x 200px and you can download it by saving the image below.
Once you have downloaded the placeholder image, the next step is to upload both placeholder image and pin in the Media Library.
And after this you will have to add the placeholder to page or post on your WordPress site.
In the next step you need to Edit this placeholder image in HTML and you can do that by clicking the ellipsis menu on the image block toolbar and select Edit as HTML.
Just like before, now, you need to add the CSS display property at the very end.
Below is the code snippet that you need to add followed by the screenshot for reference.
style="display:none"
On adding the display property, it will show you an error message stating “This block contains unexpected or invalid content”
To fix this, you will have to click the 3 dots right next to Attempt Block Recovery and it will show you the option to convert the block to HTML.
Here you will have select Convert to HTML and it will convert the image block to HTML and will show you a Preview option.
When you will click this Preview option, it will not show you anything which means you have successfully hidden the image.
In case you are wondering what causes this error and why we did not choose attempt block recovery then let me tell you image block does not come with the display property.
Hence adding it will give an error.
If you accidentally click Attempt Block Recovery then it will remove the display property which you do not want.
Keeping this in mind, the next step in the process is to add the pin that you actually want to hide.
And for this you will have to use a Pinterest attribute which is data-pin-media
You need to add this attribute after the display property and it will contain the URL of the pin.
In case you are wondering where you will find the URL for the pin then let tell you, you will have to go to the Media Library, expand the pin and there you will find the URL at the bottom.
Below is the screenshot for reference.
Coming back to the data-pin-media attribute,
Below is a reference code snippet and in this you will just have to replace the URL with your own pins URL.
data-pin-media="https://bloggingunplugged.elementor.cloud/wp-content/uploads/2020/07/Dog-hoodieDog-HoodieDog-Hoodie.jpg"
Once you are done till here, the next step is to add a custom pin description for the hidden Pinterest image.
For this you will have to use the data-pin-description attribute and below is the code snippet followed by a screenshot for reference.
data-pin-description="Add description here Mini 100 characters Max 500"
After this the last step is to click Update and Save the changes.
Check if Pinterest image is hidden
To check if the Pin is actually hidden and it displays custom pin description on Pinterest, the first step is to visit the post and click the Pinterest browser button.
Doing this will show the hidden pin.
In the next step you need to select the pin, click Next and it will allow you to save it to a board.
Once done you need to navigate to Pinterest, locate the pin and expand it.
And it will show you custom Pinterest description under the title.
In case you want to hide multiple pinnable images using this way then you will have to repeat the process.
That’s it you now know how to hide pins in WordPress blog posts with a placeholder image using code.
Final Words- How to hide Pinterest images in WordPress blog posts
Above we have discussed 2 ways of hiding pins in blog posts and that is manually and using plugins. Which one do I recommend?
You can use any process be it using plugins or manually. However, I recommend using plugins (Tasty Pins) because of the 2 reasons listed below
- It saves a lot of time as it is very straight forward.
- You can optimize pins while hiding and not worry about coding at all
With that said, I hope you find this tutorial helpful and are able to execute this easily. Let us know which is your choice of method for hiding pins.
Also, if you haven’t applied for rich pins, I would suggest you set up Pinterest rich pins as it makes your pin stand out in the feed and get can get you more visibility and traffic.
You may like to read next-
If you have any queries regarding this feel free to contact via the comment section, and we will be happy to answer them. Also, don’t forget to share this article with your friends on social media.
To get regular updates from us join our Facebook group, subscribe to the blog and Youtube channel.
Also, follow us on various social media platforms. In case you are looking to check the tools we have used to create this site then see the Recommended Blogging tools section and for exclusive deals visit Blogging Deals and Discounts.
This was an extremely helpful article! I have been trying to get this to work with no success and this breaks it down perfectly!
Thank You Morgan. Glad this article could help
This was super helpful! You broke the process down step by step and made it easy to follow. Now I have the confidence to try it. Thanks so much!
Thank You Kareena
This is a super helpful, relevant and informative post! Thanks for sharing!
Thank You Leigha
This was super helpful, I’m definitely going to try it out for my next post. Thanks for sharing!
Thank You Kimberley. Do let us know if it worked and which route did you choose- Plugins or Manual
I used to struggle with this quite a bit. End up going with social warefare but great to you breaking down how its done manually as well.
This was impossible to find when I was looking
Thank You Craige. Glad you found it helpful
This is such important info, and has been a game changer for me! Thanks for posting!
Thank You Nicole
So, right now I put a pin on my post using the Pinterest widget developer. Do you think that hiding the images is more advantageous? Thanks for all the helpful information!
With Pinterest updating its algorithm on a regular basis and giving more priority to new pins, it is a requirement to create multiple pins. Also, it is important to keep in mind here pins are vertical and take a lot of space. You can add one probably 2 in your article, but if you are creating more then hiding pins becomes important
Wow, this is incredibly detailed – thank you! Going to give it a try.
Thank You Cassidy.
Excellent and informative post!
Just started playing around with Pinterest seriously in the last few months and still quite green with everything so all tips are appreciated.
Pinterest has been one of my favorite platforms for increasing blog traffic. I never knew this trick! Thanks for sharing! I will definitely be trying this out.
Thank You Zak
Lol, I thought this said “pineapple images” at first. Still good advice, though
That is funny and Thank You Duncan Glad you found it helpful
Really informative! I’ll probably play around with this!
Thank You Amy
Very interesting! I will have to investigate this further on my own blog. Thanks for the article!
Thank You Rachel
Very comprehensive article. Thanks for offering both the free and paid plug in ways to hide images.
Thank You Jennifer
Good tips but I could only find the screenshots to pin in this post?
Hi Sarah Thank for letting me know now when you click the Pinterest button you will find pin to share on Pinterest
Thanks for this detailed article, I didn’t know you could force certain pins to be pinned.
Thank You Lisa I hope you found the tutorial helpful and were able to implement it
Such a great in-depth article! I’m focusing on my Pinterest strategy and this was very helpful!
Thank You Sara
I just can’t get my head around how to embed them at all! But I am going to pin this and have a really good look at it. Thank you so much for sharing x
Let me know if you have any queries regarding this. I will be happy to help out. Thank You
I love tasty pins! This post is a great resource Jasmeet!
Thank You Renee. Glad you liked it.
This is very informative, I was struggling with my Pins and this is very helpful.
Thank you
Thank You Janet
Thank you so much for this guide! I promote my blog on Pinterest, but I don’t like having pins in my blog posts.
This is a very simple solution to hide pins in blog posts. Tasty pins is an amazing plugin.
Thank You
Jasmeet
This article is so helpful! I’m new to blogging and this will help me step up my pinterest game. Thank you for sharing!
Thank You Kate. Glad you liked it.
This sounds great, as I have been looking into getting tasty pins, as I wanted to create Pin descriptions on my blog!
Tasty Pins is an amazing plugin for Pinterest optimization. I have tested the plugin myself and it was far superior than any other plugin. It is a must have plugins if you want to optimize and hide pins on blog posts
Hello, the hiding and redirect are working but the description is not. When I go in preview and click on the pin icon (with the pinterest browser extension) it only shows the picture, nothing more.
Also Is there any way to display a 50% pin image size and let them pin the full size when they click the pin button?
Should I upload the pins I make to the blog first and then pin them in my pinterest or should I upload them in my pinterest first and link from there in my blog?
If they pin from my blog, how does pinterest know this is my pin?
I’m so confused, sorry for the many questiosn
Hi Thomas
I hope you are doing well. Below are the answers to your questions
If you are using a plugin that I have mentioned in the post then descriptions should work fine if you have included them as these plugins automatically add the data-pin-description attribute. Here the only thing you have to do is check if you have added the description or not.
In case you are hiding pins manually then check if you have included the data-pin-description attribute correctly. In most cases either this attribute is missing or there is a syntax error.
As far as the height goes, you can resize/scale it in the default WordPress editor by adding the pin to the post and scaling it using the cursor. Doing this won’t impact the aspect ratio of the pin and it will look just the same on Pinterest and take less space on the post.
Also some additional pins are created that are directly uploaded to Pinterest.
Also, it is recommended that you add your branding to the pins so that it could be easily identified on the feed.
I hope you find this helpful. In case you have any questions feel free to reply or message. I ll be happy to help.
Best of luck
Jasmeet