How to hide Pinterest images in WordPress blog posts

Firstly, why would you want to hide images in your blog post?

Naturally, why would you want to hide images in your blog post could be a question you are asking. Well, hiding an image has a few advantages I can think of. Especially hiding a pinnable pin for Pinterest. In fact, bloggers love creating images and also like to hide images in blog posts for a few reasons.

  1. To have more images you can share on Pinterest
  2. To test multiple images like A and B testing, especially for Pinterest
  3. Not to overcrowd a blog post with too many images, yet still have multiple images to share that link to the blog.

Where shall I link the images to?

Of course, it is best to link the hidden images back to your blog post. After all, this is the best and recommended practice.

A tip to be aware of is to link the image in the blog post prior to hiding it. Of course, there is a way to link it after using CSS, however, if you link your image back to your post before hiding it, it is easier. 

What is CSS?

CSS stands for cascading style sheets and is the language used behind the coding that formats pages in WordPress.

How do you hide a pinnable image in a WordPress blog post?

First, you need to create your image. There are multiple programs that you can create your Pinterest image. Canva is my preferred choice for designing Pinterest pins and images to share in blog posts and across social media.

Once you have your image go to the location on your blog post where you would like to insert the image.

Click on ‘add media’ and upload the image.

A tip here is to have the image saved as the title of the blog post.

Insert the image into your post.

How to hide images in your blog post

Once you have your image uploaded into your blog post. Move from the Visual view to Text view of your blog post. Yes, scary, this means you will be writing a little bit of code.

wordpress hide pinnable images

Despite code looking complicated, it is not. Also, note that when you click update on your blog post you are saving different revisions of your post that you can go back to. So, in essence, you have nothing to lose if you saved your post before editing your code. A little CSS to change the way your blog post views.

A tip is to save your blog post by clicking update prior to editing.

Just in case, you haven’t saved the post. Click the update the button before proceeding to hide images in your blog post.

Another little tip is to highlight the image before going to the text view as this will highlight the code.

Now it is time to change the code and hide the pinnable image into your blog post.

Locate the image in your blog post. That is the image you would like to hide, yet have available to be shared as a Pinterest pin. If you followed the last tip you will find your cursor is at the image location. Still, check that you are in the correct spot by checking that your cursor is by the image code <img class. The title of your image will show just before your cursor. As in screenshot below.

Add hidden image to WordPress

There are two pieces of code that is required which wraps around the image tag text and hides the image.

Frist the code that goes prior to the image. This is <div style = “display:none;”>

Second, the code that goes after the image, which is the closing tag </div>

Hence the term wrapping of the code around the image.

Once you have entered in the before and after code to the image tags, click on update to save your post.

Next, toggle over to the visual view and scroll to where you placed the image. You should not see the image as it is now hidden.

What if your Pinterest pinnable image is not hidden

Yes, this can happen. If your pinnable image in WordPress is not hidden then complete a few checks.

  1. Check the code you entered is correct. The opening tag code is <div style = “display:none;”> The closing tag code is </div>
  2. Ensure you typed in the code not copied and pasted. The reason it is best not to copy and paste is that the coding requires to be in the font you are using for your blogs.

Update your blog post and then view the preview mode.

How to share your hidden Pinterest image using Chrome

Go to the blog post and click the Pinterest share button in your chrome browser.

I like to use the extension button for Pinterest on Chrome as it brings up all the images on the blog post page to pin, not just an individual image. 

When you scroll through the images there will be all the images you can share including the image that you had hidden.

Choose an image to share and click share to share your pin.

As you have seen it is not too difficult to hide images in your blog post. 

As you update your blog posts with images. Also, consider updating and checking you are optimizing your SEO.

Related blog: Beginners Guide and Checklist on How to Write Blog Post for SEO using a Free Tool you already have

How to hide pinnable images in WordPress

  1. Create 2 – 3 different Pinterest images
  2. Add the images to your blog post
  3. Tag your images with the code to hide
  4. Check your blog post to ensure images are hidden
  5. Update your blog post
  6. Share the pins on Pinterest

It is also possible to hide images using social media plugins that hide your images.

Leave a Comment

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

Scroll to Top