How to make images pinnable on WordPress

Want to add a custom Pin It button on your images? In this post, I will show you how.

Why add a “Pin It” button

With a “Pin It” button on your images, visitors can easily pin it to their Pinterest boards. More pins mean more eyes on your content, which can help drive more traffic to your website and grow your audience.

If a visitor to your website has the Pinterest browser extension installed, they can pin your images by clicking the Pinterest logo in their browser bar. However, having a pin button directly on your images is more visible and may get more people to pin your featured image to Pinterest.

With a WordPress plugin, you can easily and automatically add pin buttons to the featured image of your blog posts.

How to add a pin-it button to images in WordPress

Note: I previously recommended the jQuery Pin It Button for Images plugin, which allows you to add a custom ‘Pin it’ button, so you can make it pretty & on-brand. However, it’s no longer being maintained or supported. It still works, but use at your own risk. If you’re comfortable adding some CSS to your site, follow the steps below to add a custom ‘Pin It’ button in WordPress.

Step 1: Install and activate the PinIt button plugin

The first step is to find and install the “Weblizar Pin It Button On Image Hover And Post” plugin. You can do this by navigating to the “Plugins” section in your WordPress dashboard. Click the “Add New Plugin” button and use the search field to search the plugin by name. When you see it pop up, install and activate it.

Step 2: Configure the WordPress plugin settings

After activating the plugin, you will need to configure its settings. On the left-hand admin panel, click on the PinIt Button tab. You can choose the size of the “Pin It” button, as well as where it will appear on your site: on blog posts and/or on pages. Make sure to keep “Show Pin It Button On Image Hover” on Yes, otherwise it won’t show at all.

If you want to exclude certain images or pages, click through to those sections and add the image(s) or page(s) you wish to exclude. 

Step 3: Add a custom Pin It button using CSS

This plugin does not have the option for uploading a custom Pinterest button, though it’s possible with some custom CSS.

First, upload the pin button image you want to use to your Media Library. Copy the CSS below and insert the URL for your custom Pinterest pin button. Then add it to your site by using the Custom CSS setting of your theme, or use the WPCode plugin to insert custom CSS on your site.

span[class*=_button_pin] {
    background: transparent url('URL TO YOUR PIN BUTTON IMAGE HERE') 0 0 no-repeat !important;
    background-size: contain !important;
    padding: 0 !important;
    font-size: 0 !important;
    box-shadow: none;
    width: 150px !important;
    height: 150px;
}

CSS works with selectors, like class names (.class) and IDs (#id). If you check the code for the button, you will notice that the class is something like “PIN_1706864062770_button_pin PIN_1706864062770_save“, where the number changes each time the page loads. So, to make sure the CSS keeps working, we need to use a selector that doesn’t change but also that isn’t likely to apply to other elements on the site. That’s why I chose to go with span[class*=_button_pin]. This selector says that it needs to be a span element with a class containing (that’s what class* is for) _button_pin.

Because this selector is less specific than the one the plugin creates, we need to use !important at the end of most lines so that it applies our custom CSS instead of the CSS from the plugin.

The background attribute changes the background color to be transparent so that there won’t be a red background behind your pretty & on-brand Pinterest button. The URL sets the background image to be the image you created & uploaded. The 0 0 resets the position of the background image so there’s no extra spacing around it, and no-repeat says to not repeat the image if the width & height are larger than the image.

background-size: contain makes sure that your Pinterest button shows fully, even if the size you set with width and height is smaller than the image you uploaded. The padding: 0 is also needed to remove extra spacing around the image. Setting the font-size to 0 makes the “Save” text invisible. The box-shadow: none removes styling from the default button so that your custom pin button image looks the way you intend it to.

Then, use the width and height attributes to set the sizing of your Pinterest pin button. You can use the width & height of the actual image. If you use a different width & height, make sure that the aspect ratio is still the same. So if the image has a width of 250px and a height of 100px, and you want it to show with a height of 50px, you need to set the width to 125px.

Step 4: Optimize your Pinterest images and pin descriptions

Now that you know how to make images pinnable on WordPress, you also need to make sure that your blog post images are optimized for Pinterest. 

You can use Canva templates to create pretty Pinterest images. For design tips, read how to design Pinterest pins that drive traffic.

Apart from the design of your Pinterest pins, you also want to optimize the Pin description so that when someone saves your image to Pinterest, it will have a description with keywords so it can be found when people search for the topic of your blog post. Pinterest used to use the alt text of your image as the description, but the alt text is meant to describe the image for people who use screen readers and can’t see the image. Pinterest now uses the SEO meta description from your blog post, so make sure that’s optimized for search engines – whether that’s Google, Pinterest, or other search engines.