How to Add a Custom Pin It Button in WordPress
Confession time: I love Pinterest. Seriously, I could pass hours just infinitely scrolling through an endless feed of perfectly manicured living rooms and gorgeous food photography. But more than just entertainment, it also serves as a great content discovery channel - almost every time I log in I’m finding new blogs to explore, or great design inspiration to incorporate into my next project.
It only makes sense then that getting your content pinned and noticed is an effective first step towards getting noticed in Pinterest’s ever-growing collection of pins.
Today I’m going to show you a few simple steps to add a custom Pin It button to your WordPress theme that will get your readers pinning! As a bonus, I’ve even included a bundle of free custom Pin It icons at the bottom of this post to help you stand out from the crowd and look like a Pinterest pro!
Install the jQuery Pin It Button For Images Plugin
Within the WordPress admin, go to Plugins > Add New and search for jQuery Pin It Button For Images. Install and activate the first plugin that comes up.
Configure the Settings
Once the plugin is installed, the settings can be accessed in the WordPress admin by going to Settings > jQuery Pin It Button For Images. There are a lot of different settings here, so I won’t be going over all of them. However I’ll point out a few settings in particular that I always use.
On the first settings page (called Selection), you can leave most of the settings as default, unless you know what you’re doing. There are however two settings that I always make sure to update.
On which pages the Pin It button should be shown
This setting controls specific pages that the pin it button will be activated. I usually select “Pages” and “Single Posts” for this option. I don’t think it is useful having the Pin It button on the home page, as it can be a bit distracting to first time visitors just landing on your site. As well, I tend to keep it off archive pages as I find it a bit overkill. Of course, you can choose to set these settings however you like, and your choice may depend on the style and layout of your theme.
Minimum resolution that should trigger the Pin It button to show up
Use this setting to prevent the pin it button from displaying on small images like avatars or social media icons - those really aren’t pin worthy (sorry!) and will just look messy with a button appearing over the top of them. I usually set the threshold to 200px width and height here. Of course, be sure to save your changes before moving on.
Set the Visual Settings
There is one more page of settings we need to set up before we are all up and running. Click on the tab labeled Visual at the top of the page to access the second page of settings.
Transparency Value
Choose whether or not to apply a semi-opacity to the image on hover. This draws a lot more attention to the pin it button (yay!) but can be a bit obnoxious at times (boo!). If you choose to use this, I recommend a really low number like 0.1 or 0.2.
Custom Pin It Button
Ok, time for the good stuff! Here’s where we can upload our custom pin it button (we’ve even included six free buttons at the end of this post). Check the box next to Use custom image and then upload your image using the button below. The image size will automatically set to the size of the uploaded image size, but you can manually change it here. We recommend setting the image height and width to 75px.
Pin It button position and margins
Use these settings to control the positioning of your pin it button. This will depend entirely on your personal taste preferences and the style of your blog. The margin settings are also up to your personal taste, but we like ours set at Top: 40px and Right: 60px. Check out the screenshot above to see an overview of our settings!
That’s it! Save your changes, and check out your sweet new Pinterest button on your site. It’s amazing how much better a custom pin it button looks than the standard Pinterest button, and hopefully, you see your images getting pinned more and more frequently. It’s a simple update that makes a big difference!
I’ve even included a selection of custom pin it buttons (for personal use only please) that you can download below! Also included are the Photoshop files so you can make any customizations you like. You can get a free trial of Photoshop here!
Are you using a custom pin it button on your site? Share in the comments below, I’d love to check it out!