Easily Make a Custom Pin Button on Images in WordPress

November 10, 2013Allison Murray
Easily Make a Custom Pin Button on Images in Wordpress

header-custompinbuttonwordpress-dreamalittlebigger

I’ve been emailed by other bloggers about how to do one thing or another like I’ve done on my blog. One message was ended with: I wish I was website genius, too!

Whoa, now. I am hardly a technology genius. Behind the scenes this is more like what goes down… I decide I needed a custom pin button on images to make things easier to pin quickly. I research plugins and download the one I want and then spend hours trying to figure out how to make it do what I want it to do. There are tears and curse words and lots of time feeling like anything BUT a genius. And since I know just how awful that feels, I’m trying to share the ways I’ve modified my blog with you, just omitting all of the teeth grinding and million dollar, four letter words… or in my case one particular 12 letter word, over and over.

So today I’ll show you how to add a custom pin button to you images on your WordPress site. It will be easy. You will not cry or scream. It will be awesome.

MY LATEST VIDEOS
MY LATEST VIDEOS

Easily Make a Custom Pin Button on Images in WordPressTo add a custom pin button on images you will need an image and while we’re not going over how to create the image (at least today), your image will need to be on a transparent background. My file seen here is a simple circle with text in it I whipped up in Photoshop and saved as a PNG file to preserve transparency of the background.

Upload the image to your library and copy the direct link to it. If you’re not sure how to find it, right click on the image and click “open image in new tab” or something similar. Copy and paste the link in the URL bar.

Easily Make a Custom Pin Button on Images in WordPress

Now that you have your button, we’ll need to get the plug in installed. Over in the lefthand side you’ll see a section for “Plugins” with an outlet plug in as the graphic. Click that Plugins link and then “Add New” that appears beneath it. Search for  “Pinterest Pin It Button for Images”.

Easily Make a Custom Pin Button on Images in WordPress

Several will pop up but we specifically want the one by the author “canha”. Hit details to see who the author of the plugin is to select the correct one.

To install simply hit Install Now  and click okay to the pop up. On the new screen click “activate plugin”.

Easily Make a Custom Pin Button on Images in WordPress

To navigate to your plugin to edit, click the plugins on the left, then “installed Plugins”. Browse until you find Pinterest Pin It Button for Images in the list and click the “edit” link below the title.

Easily Make a Custom Pin Button on Images in WordPress

And this is the screen that is going to pop up. It looks a nightmare, I know but we’ll get through it. See that list on the right of blue links?

Easily Make a Custom Pin Button on Images in WordPress

Find the one that ends with “ppibfi_pinterest.css” and click it.

Find the text that reads like this:

.pibfi_pinterest .xc_pin {
width: 101px; height: 101px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */
background-image: url(‘https://www.dreamalittlebigger.com/wp-content/uploads/2013/10/pinit.png’); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */
position: absolute;
top: 5px;
margin-left: -1px;
opacity: 0;
cursor: pointer;
display: none;

Quick tip, hit the control and F key at the same time to open a “find box”. Enter background-image and it will quickly take you to the code.

closeup02-custompinbuttonwordpress-dreamalittlebigger

You’ll need to change the dimensions to fit your shape. Mine is 101 pixels by 101 pixels. ONLY change out the numbers to be safe.

closeup01-custompinbuttonwordpress-dreamalittlebigger

Next where it says “background-image: url(‘…) change the link to the one you copied for your pin it image (see the first step again if you need a bit of help).

Easily Make a Custom Pin Button on Images in WordPress

That is quite simply all there is to it and now that you know how, this will not take you the nearly 2 hours it took me. Heck, it might not even take ten minutes!

Are you going to add a custom pin it button to the images on your site? I’d love to see it!

While you’re here, take a peek at this week’s Link It or Lump It link party and enter for a chance to get featured!

Comments (4)

  • Stacia

    November 10, 2013 at 5:22 PM

    Your tutorials are always great and it’s encouraging to know that I’m not the only on struggling through modifying my blog very slowly. Thanks for sharing!

    1. Allison

      November 10, 2013 at 6:22 PM

      I have a feeling we aren’t the only ones. Your site is looking great, nice and clean and your banner is fab! :)

  • Lix

    November 12, 2013 at 11:58 PM

    Thank you for this! I’ve been wanting to add a Pin It button to my blog and I had no idea which plugin to choose. Now I do!

    1. Allison

      November 13, 2013 at 7:49 AM

      You’re so welcome! I’m glad that you’ll be able to get your button on those pics :)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Previous Post Next Post

BEFORE YOU GO!

Sign up for my newsletter and grab my 10 most popular blog posts, I'll send them right to your email address.