WordPress quick tip: Add a pin it hover to your images

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:

WordPress quick tip: Add a pin it hover to your images from elembee.com

  1. 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.
  2. 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.
  3. 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.
  4. 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.

 

Meet Lisa Butler

Hello! I’m Lisa M. Butler, and I offer straightforward web guidance for making it happen online. I got to where I am because of my website, and I want to help you get where you want to be. As a web designer and developer, I’ve guided my clients through the tech-y stuff, step by step. I’m here to share that same advice and guidance with you so you can get your website together and be awesome online.

Comments

  1. I was so excited to see this tutorial since adding a Pin It button has been on my to-do list for months! I followed your directions to a T, but the plugin isn’t working. I triple checked my settings and saved all my changes, but nothing is appearing over my images. I’ll be deleting this one and trying a different plugin.

    ReplyPosted on March 23, 2015
    • Bummer! Did you try specifying a selector? There may just be something in your theme or plugins that prevents it from adding its selector. Try going to the settings page, and where it says Image Selector, the default is .jpibfi_container img. I took a look at your code — try .entry img instead.

      If that doesn’t work, it may just not be compatible with your theme or may have a conflict with another plugin you’re using. I used to have a tutorial published about another plugin, but it does require CSS edits. Let me know if you’re interested and I’ll update the post to add those instructions!

      ReplyPosted on April 9, 2015
  2. Megan says:

    You are a life saver! I’m so glad I found your blog! I’ve been trying to figure out how to do this for so long but the CSS always tripped me up and I needed to get my sister (aka webmaster) to help me. But! I was able to do it all on my own (well with your help really). Thank you so much!

    ReplyPosted on March 25, 2015
    • Your button is so cute! I love the little heart.

      ReplyPosted on April 9, 2015
  3. Zografia says:

    Hi Megan! The jQuery plugin has not been updated for 2years and it has not been tested with my version of WP. Is it still ok for me to use?

    ReplyPosted on May 16, 2015

Join the conversation

Thank you so much for taking the time to comment, I love hearing what you have to say! If you enter your site URL in the website field, your name will link to your site. Including links in your comment may cause it to be automatically marked as spam. Your email will not be published or shared, but you can choose to receive an email if your comment has a reply. Happy commenting!

Find more posts

  • Enter your search term or choose from the filters below.

  • Categories

  • Tags

  • Post Types