jQuery Pin It Button For Images is a free plugin that allows your readers to easily pin images in your blog posts by simple hovering over them and clicking a button. It is highly customizable, so you can adjust it to your own needs. You can download it on the WordPress plugin repository. There is also a Pro version of the plugin available.
- 1 Selection settings
- 2 Visual settings
- 3 Downloading an older version of the plugin
- 4 Troubleshooting
- 5 Common issues
Enabled and disabled classes
Enabled and disabled classes are an easy way to activate or deactive the “Pin it” button on certain images. Let’s see how it works.
In this example I’ll use the Disabled classes, but the Enabled classes setting works the same way (except you use it to show the “Pin it” button only on certain images instead of hiding the button on certain images).
Let’s start with the settings panel. Our current Disabled classes setting looks like the following:
Classes are separated by semicolons, so we have two classes currently available: wp-smiley and nopin. Let’s use the latter to disable the button on an image in a blog post. If you want to use another class, feel free to add it (make sure you separate it using a semicolon).
In order to use the class you need to modify the class attribute of the image you want to disable. You can do that using one of two options:
- Using WordPress’ image editor
- Using text editor
Using WordPress’ image editor
- Open WordPress’ image editor
- Locate the Image CSS Class setting (it’s in the advanced options)
- Add the class to that setting (nopin in our case). If its value is not empty, make sure you add a space before the value you’re adding.
- After adding the value, the class setting should look like the following:
- Update the image (the button is in the right bottom corner).
- Save the post
Using text editor
- Switch to the Text tab in the post editor.
- Locate the code of the image. It usually looks like the following:
<img class="alignright" src="http://www.highfiveplugins.me/wp-content/image.png" width="500" height="250" />
- As you can see, the image already has the class attribute. If it doesn’t, you can add it by adding class=”” after <img (make sure there’s a space before the class attribute)
- Now you can add the disabled class of your choice (in our example it’s the nopin class) to the image’s class attribute. After that modification the code of the image should look like two following:
<img class="alignright nopin" src="http://www.highfiveplugins.me/wp-content/image.png" width="500" height="250" />
- Save the post
Once you add the class to the image using one of the two described ways to do that, the image shouldn’t show the “Pin it” button anymore.
If need be, you can do the process in reverse – first find the class attribute of the image you want to delete, then choose one of the classes (if there are many), add it to the Disabled classes setting and save plugin’s settings. That will work too.
If the image you want to disable the button on doens’t have a class and you can’t add it (e.g. a plugin generates its code), you can (in most cases) disable it using the Image selector setting. Using that setting requires knowledge of jQuery and I couldn’t possibly cover it in a tutorial. If that’s the case, ask your web developer for help or use the support forum.
Minimum image resolution
Minimum image resolution is a set of constraints that allows one to disable smaller images from showing the “Pin it” button. One can set different size constraints for small devices because on smaller devices images will be, inevitably, smaller. When checking the image against the constraints set, the size of the image on screen is taken into account. That means if an image is 1500 pixels high and wide “naturally” but on screen its size is only 200 pixels high and wide, it will be treated as a 200×200 image.
Let’s say you have an image at the bottom of every blog post, like a signature or an ad, and you would like to disable it. The easiest way to do that would be:
- Check the size of the image
- Choose the smaller number of the two (height and width)
- If the width is smaller, set the minimum width for small and large screens. If the height is smaller, set the minimum height for small and large screens. The value you use should be the width/height of the image + 1
- Save settings and check if the image stopped showing the button
When checked, if you link an image to its full-resolution version, the plugin pins the full-resolution version. Linking an image to its full-resolution version can be done when adding an image. In the Insert Media screen, in the Attachment Display Settings section set the Link to property do Media File. That’s it.
This setting produces HTML code that looks like the following:
<a href="http://www.highfiveplugins.me/wp-content/image_large.jpg"><img class="alignright wp-image-58" src="http://www.highfiveplugins.me/wp-content/image_small.jpg" width="500" height="250" /></a>
Downloading an older version of the plugin
Every released lite version of the plugin is available here, in the “Other versions” section. To install it, first make sure you have deactivated and deleted the version you’re using currently. Then download the zip file of the version you would like to use. Now you need to install it using the Plugin Upload feature. You can read about it here in the Install a Plugin using the WordPress Admin Plugin Upload section.
If you have any issues with the plugin, report them in the plugin’s support forum. I do my best to help people who are experiencing issues with the plugin. If you’re a PRO user, you can report an issue using the email address you got after purchasing the plugin.
Few things I would like you to do when reporting a problem:
- If you’re using a caching plugin (like W3 Total Cache) on your website, clear its cache. That might fix the issue.
- One thread = one person + one problem.
If you have a problem, start a new thread. Don’t post in a thread started by someone else saying “I have the same problem”. Any “me too” posts will be ignored. Start a new thread and answer only there. If another problem will occur somewhere in the future, start a new thread instead of reviving the old one. This lets me manage the support forum and make sure everyone gets help.
- Include a URL address of the website and make sure the plugin is activated.
Unless it’s a settings page issue or an error that crashes the site, I need the URL of the website and the plugin activated for debugging. If the plugin works but things aren’t rendering as they should, let me know which browser you are using.
- If your issue is resolved, please let me know.
Empty settings page
You can disable Auto Minify, adjust your settings and then enable Auto Minify again, which should work just fine. Cloudflare refuses to fix this issue and suggests what I suggested.
Plugin does not work on mobile devices
The free version shows the “Pin it” button when user hovers over an image. That works perfectly fine for desktop machines. When it comes to mobile devices, in most cases it doesn’t work at all. On some devices the user has to tap the image for the “Pin it” button to show up. In other words, this solution is not perfect for mobile devices. That’s why I added “show always” mode that shows the “Pin it” button over images all the time. That mode is available only in the Pro version of the plugin. If your audience is accessing your website using mobile devices, consider buying it.
The plugin doesn’t work properly with most sliders. If it’s working with your slider, that’s most likely by accident, not by design. It doesn’t work with sliders because each slider plugin works differently and it’s pretty much impossible to handle all possible scenarios. Currently there isn’t a slider plugin that I recommend that works with the plugin.
The plugin is designed to share the image the user clicks on. If you want to have multiple images to choose from, consider using Pinterest’s widget builder or another plugin.
The plugin adds exactly one “Pin it” button. If you have more than one “Pin it” button showing up on your website, it’s most likely either another plugin adding it or a browser extension/phone app adding it.