How to add a custom Pin It button in WordPress

Promoting your website can be a lot of work, but you can make it easier on yourself by letting your visitors help you promote your website! Make it easy for your visitors to pin your images: here’s how to add a custom pin it button in WordPress.

The jQuery Pin It Button for Images plugin allows you to add a custom ‘Pin it’ button, so you can make it pretty & on-brand. You can make it bigger and position it in the center of the image so more people see it.

Here’s how.

Plugin: jQuery Pin It Button for Images

1. Install and activate the jQuery Pin It Button for Images.
2. In Settings > jQuery Pin It Button for Images (Selection Settings), you can set which images you want to be pinnable and on which pages you want your images to show the Pin It button when a visitor hovers over an image.
   I like to only have the Pin It button on my featured images in blog posts. If you’d like to do the same, you can find out what selector you need to use with the Inspect Element in Chrome. (Most other browsers do work similarly)
   Go to a blog post, right click the featured image and click “Inspect element”. A window pops open with the html code of your site. The code for the image should be selected, similar to this:
   
   In this case, the selector will be

   .featured-image img

   If your featured image has a wrapper (usually a div) around it with a class, the selector will be .classname img. If it has an id instead of a class, you need to use #idname img.
   I also only want to show it on blog posts, so I only selected [single] for the pages it should be shown on.
   

3. In the Visual Settings tab, you can choose where it should get the description for the pin from, the position you want the Pin It button to show on top of your Pinterest image, and the transparency of the Pinterest image when the Pin It button shows.

Custom Images for the Pin It Button

Also within Visual Settings, you can upload your own custom image to use for the Pin It button.