Last week I mentioned adding a pin it button to your images to help you create better posts in WordPress. I published a tutorial a couple years ago, but the Internet moves fast, and it’s time for an update! Here’s how to add a pin it button to image hovers in WordPress:
- Install the jQuery Pin It Button For Images plugin. In your WordPress dashboard, go to Plugins > Add New, and search “jQuery Pin It Button For Images.” It’s the first option that comes up. Install and activate. Heads up! You may see a notice that the plugin is no longer being actively developed. Don’t worry — the plugin still works, and they still release minor updates.
- Go to Settings > jQuery Pin It Button For Images. If you know CSS, you can specify a selector, but the plugin does a pretty good job of detecting your post body images. I do, however, recommend setting a minimum resolution so that you don’t have pin it hovers on related post thumbnails, smileys, and social media icons. A resolution of 200×200 usually works fine.
- Save and go to the Visual tab. The description source is what will be used as the default description when your reader pins something. If you’re consistent in adding alt attributes, choose that as your description source — it will allow you to customize the description however you like. If you don’t enter alt attributes with your images, choose the page title. Check the option to link directly to the individual post page so that when people pin from your home or archive pages, the pin will still link to the original post.
- Now it’s time to make it look pretty! The transparency value fades your image on hover. I like to set this value at 0.2 or 0.3 so that there’s enough of a change for your reader to pay attention, but it’s still subtle. Check the box to use a custom image, then click the button to upload your image — the plugin automatically fills in the rest. You can use a free service like Canva to design your image. I usually keep my dimensions around 100×50 for a good sized rectangle. Choose where you want your pin it button to appear on your image and increase the margins if you like (the default of 20px usually works fine). Then save, and you’re done!
Don’t want to mess with all of this? Frizzly, a plugin by the same author as the jQuery Pin It Button For Images, works well without changing any of the default settings and looks great. It also adds Twitter and Facebook sharing to your image hovers in addition to Pinterest. It’s what I use on this site!
Want more WordPress tips? Check out my ebook Make WordPress Work.