One of the most requested WordPress plugins for me is the Pin to Pinterest plugin, which allows users to hover over images on your blog and a pin to Pinterest button appears over the image. This allows readers to quickly and easily pin images within your posts to Pinterest. The default image that comes with the plugin is fine – however it looks even better to customize the image to match your site.

Here I’ll show you how you can add a custom pin it button to appear over your images in just a few simple steps!

1. Install the Pinterest Pin It Button plugin

To add the plugin to your WordPress.com site, simply go to Plugins > Add New and search “Pinterest Pin It Button For Images” or download a zip file of the plugin here and then upload via your WordPress admin.

Edit Plugin Settings

You will need to set the size of your image width so the plugin knows where to position the image. On the settings page you can also control where the button is shown and I always enable the opt out check box. This means on any particular post or page I can disable the plugin for that page only.

2. Upload Your Custom Image

Make sure you save your custom image as a PNG file with no background – or else it will have a white box around it. If you have a square edge image then it’s fine to save as a JPG. Upload your image to WordPress by going to Media > Add New.

3. Add Custom CSS

Open a new window or tab and go to Appearance > Editor in WordPress. This should open your theme’s default style sheet. Before you do anything, save a backup of the code in this file. Select all of the code and save to a text document on your computer.

Scroll to the bottom of the style.css file and paste the following code:

.xc_pin {
background:url(ENTER IMAGE URL HERE) no-repeat !important; 
width:114px !important; /*Set this to your image width*/
height:112px !important; /*Set this to your image height*/
top:0px !important; 
margin-left:auto !important; 
margin-right: auto !important; 
left:240px !important; /*You may need to alter this to suit your needs*/
}

Be sure to change the background image url to the url of the image you just uploaded. Also be sure to adjust the height and width so that your image is not cut off or too big since this will affect the positioning. Depending on whether or not you want your Pin it image centered, flush left, flush right, etc., you will need edit the CSS. In the example above I’m shifting the image 240px to the left to get it to be centered at the top of my image.

Save your edits to the CSS and now check your image!

What do you think of this article? Do you have any questions for me? Ask me in the comments box below!