FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View Pricing Plans →
Pinterest Image Hover Pins add a “Pin it” button that appears when visitors hover over images in your posts and pages. Instead of asking readers to manually copy a link and open Pinterest, the button lets them save your image to a Pinterest board in one click — making it easier to drive traffic from Pinterest back to your site.
This feature was introduced in version 2.2.0 and works with standalone Gutenberg Image blocks on singular post and page views.
When Pinterest Image Hover Pins are enabled, a small branded Pinterest button appears over each qualifying image whenever a visitor hovers over it. Clicking the button opens a Pinterest “Create Pin” window pre-populated with the image URL, the page URL, and a description (pulled from the image alt text or the post title).
Key points:
wp-block-image). Images inside Gallery blocks are automatically skipped to avoid visual clutter.
Once enabled, the Pin button will appear on images in the post types you have selected (by default, only Posts).
A checkbox that turns the entire feature on or off. When unchecked, no hover pin buttons, CSS, or JavaScript are loaded on the frontend.
Controls where the Pin button appears relative to the image. Choose from a dropdown with four options:
| Value | Description |
|---|---|
| Top Left | Button appears in the top-left corner of the image |
| Top Right | Button appears in the top-right corner of the image |
| Bottom Left | Button appears in the bottom-left corner of the image |
| Bottom Right | Button appears in the bottom-right corner of the image |
Controls the border radius of the Pin button. Choose from a dropdown with three options:
| Value | Description |
|---|---|
| Rectangular | Square corners (no border radius) |
| Rounded | Slightly rounded corners (4px border radius) |
| Circular | Fully rounded, pill-shaped button (50px border radius) |
A numeric field that sets the minimum width an image must have (in pixels) for the Pin button to appear. Images narrower than this value will not show the button. Set to 0 to disable the width check entirely.
A numeric field that sets the minimum height an image must have (in pixels) for the Pin button to appear. Images shorter than this value will not show the button. Set to 0 to disable the height check entirely.
A checkbox that controls whether a text label is displayed next to the Pinterest icon on the hover button. When enabled, the label text (configured below) appears beside the icon. When disabled, only the Pinterest icon is shown.
A text field for the label that appears next to the Pinterest icon when Show Button Label is enabled. You can customize this to any short text.
SaveA set of checkboxes listing all public post types registered on your site (excluding Attachments). Check each post type where you want the Pinterest hover button to appear. Only singular views of the selected post types will load the hover pin assets.
post post type is checked)A checkbox that controls whether the Pin button is visible on mobile devices (screens 768px wide or narrower).
A text field where you can enter a comma-separated list of CSS class names. Any image or its parent <figure> element that has one of these classes will not show the Pin button.
no-pin, skip-pin, decorativenopin="nopin" attribute are always skipped automatically, regardless of this setting (this is the standard Pinterest exclusion method).There are three ways to prevent the Pin button from appearing on a specific image:
nopin attribute (Pinterest standard)Add the nopin attribute to any <img> tag to exclude it from Pinterest pinning. This is the official method recognized by Pinterest itself. The hover pin script checks for both nopin and data-pin-nopin attributes, as well as the nopin CSS class on the image.
In the Gutenberg editor, you can add this attribute via the Advanced panel on an Image block:
nopin.Alternatively, if you have access to the HTML, add the attribute directly:
<img src="photo.jpg" alt="Decorative banner" nopin="nopin" />Add one of the classes listed in the Skip CSS Classes setting (see above) to either the <img> element or its parent <figure> element. This gives you a way to define your own exclusion classes that are meaningful to your workflow.
Images inside Gutenberg Gallery blocks (wp-block-gallery) are automatically excluded. The hover pin feature targets only standalone Image blocks to keep gallery layouts clean.
The plugin registers three custom meta fields for each post type that has hover pins enabled. These fields are accessible in the block editor sidebar through a dedicated Pinterest panel, allowing you to customize the Pinterest behavior on a per-post basis.
_wpzoom_pinterest_image_url)A URL field where you can specify a custom image that Pinterest should use when someone pins from this post. This is useful when you want to provide a Pinterest-optimized image (for example, a taller vertical image) that differs from the images displayed in the post content.
_wpzoom_pinterest_hidden_image)A toggle that, when enabled, injects a hidden <img> element at the top of the post content. This hidden image is not visible to visitors but can be detected by Pinterest’s crawler and the Pin button. The hidden image uses the URL from the Custom Pinterest Image field above.
The hidden image is rendered with display: none, zero dimensions, and data-pin-nopin="true" (so the hover button does not appear on the hidden image itself). It includes a data-pin-media attribute pointing to the custom image URL.
_wpzoom_pinterest_description)A text field where you can write a custom description for the Pinterest pin. When a hidden Pinterest image is injected, this description is used as the image’s alt text, which Pinterest reads as the default pin description. If this field is empty, the post title is used instead.
The Pinterest Image Hover Pins feature uses a lightweight combination of PHP, JavaScript, and CSS:
the_content filter) — On singular views of allowed post types, the PHP class checks whether the feature is enabled and whether the current post type is in the allowed list. If a hidden Pinterest image is configured for the post, it injects the hidden <img> element at the top of the content.pinterest-hover.js) — A small script runs after the DOM loads. It queries all figure.wp-block-image elements on the page, skipping any that are inside a Gallery block. For each qualifying figure, it:nopin attribute, data-pin-nopin attribute, or nopin class on the image.width and height HTML attributes against the configured minimums.<a>) styled as the Pin button and appends it to the <figure>.pinterest-hover.css) — The button is positioned absolutely within the figure (which gets position: relative via a class added by JS). The button starts with opacity: 0 and visibility: hidden, then transitions to visible when the parent figure is hovered or receives focus-within. On mobile screens (768px and below), the button is hidden by default unless the “Always Show on Mobile” body class is present.https://pinterest.com/pin/create/button/ with three query parameters:url — The current post’s permalink.media — The image’s src attribute.description — The image’s alt text, falling back to the post title if no alt text is set.The feature loads its CSS and JS assets only on singular views of enabled post types, so there is no performance impact on other pages.
Set appropriate minimum image sizes. The default minimums of 200px width and 200px height work well for most sites. This prevents the Pin button from appearing on small icons, avatars, or UI elements that visitors would not want to pin. If your content uses many medium-sized images that you do want pinnable, consider lowering the thresholds.
Use nopin for decorative and UI images. If your content includes decorative banners, separator graphics, or other non-content images inside Image blocks, add the nopin class or attribute to prevent the Pin button from cluttering those elements.
Provide alt text on your images. The Pin description is pulled from the image’s alt attribute. Well-written alt text means visitors get a meaningful default description when they pin your image, without having to type one themselves.
Consider using a custom Pinterest image for key posts. Pinterest favors vertical images with a 2:3 aspect ratio (e.g., 1000x1500px). Use the per-post Custom Pinterest Image field to provide a Pinterest-optimized version of your featured image. Enable the Hidden Pinterest Image toggle so Pinterest’s crawler can find it.
Enable “Always Show on Mobile” for Pinterest-heavy audiences. If a significant portion of your traffic comes from Pinterest, enabling the mobile option ensures mobile visitors can easily pin your images with a tap, since hover interactions do not exist on touchscreens.
Use the Skip CSS Classes setting for theme-specific exclusions. If your theme adds images with specific classes that should never be pinnable (such as hero banners or background images rendered as Image blocks), add those classes to the skip list rather than editing your theme templates.
Gallery images are automatically excluded. You do not need to take any action to prevent hover pins from appearing on images inside Gutenberg Gallery blocks. The script automatically skips them.