WordPress Plugin: How to Add a Lightweight, Custom Pinterest Pinit Button on Image Hover
If you run a WordPress site and want to make your content more shareable on Pinterest, one of the simplest yet most effective enhancements is adding a Pin It button that appears when users hover over images. While Pinterest offers an official widget script to handle this functionality, many site owners prefer a lighter, more controlled approach that doesn’t rely on third-party JavaScript or predefined button styles.
In this guide, we’ll walk through a custom WordPress plugin that adds a red Pin It button on hover for any image in post content, styled to match Pinterest branding but rendered entirely with your own HTML and CSS, and no pinit.js required.
Why Add a Pin It Button?
Pinterest remains a powerful discovery engine, particularly for visual content across various niches, including food, design, travel, lifestyle, and e-commerce. Adding a pin-sharing feature directly on images:
- Encourages user engagement and pin sharing
- Drives long-term referral traffic from Pinterest boards
- Increases visibility of evergreen content
About This Solution
Unlike the official widget, which injects buttons via external JavaScript, this solution takes complete control of the front-end experience. It works by:
- Wrapping each
<img>element inside a custom container - Appending a styled
<a>link that appears on hover - Automatically generating a Pinterest share link using the image’s
src, the current post permalink, and the post title - Enforcing consistent branding through CSS without loading any third-party code
There’s no reliance on JavaScript or external APIs. You own the design, placement, and behavior of the button. Features include:
- Adds hover-enabled Pinterest buttons to all post images within single posts
- Uses Pinterest’s native share URL (no API keys or SDKs required)
- Clean, responsive CSS-only overlay styled in Pinterest red with white bold text
- Automatically pulls in the image URL, post permalink, and title
- Fully self-contained and optimized for performance
Pros and Cons of This Approach
Pros
- Full design control: Since you build the button with your own HTML and CSS, you can tailor the look and behavior to match your site perfectly.
- No third-party scripts: There’s no reliance on
pinit.js, which means faster page loads, fewer external calls, and no potential for Pinterest-driven tracking or errors. - No JavaScript dependency: All logic is handled server-side and via CSS. The overlay effect is lightweight and doesn’t rely on a DOM-ready event.
- Privacy-friendly: Pinterest doesn’t inject analytics or modify your layout, which is helpful for privacy-conscious publishers.
- Works with lazy loading: Because the button wraps the image itself, it works regardless of whether your theme defers image loading.
Cons
- No analytics or tracking: Pinterest’s official widget can report button interactions. This version does not log interactions unless you manually add event tracking.
- Limited localization: The button text is fixed (“Pin It”). If you run a multilingual site, you’ll need to extend the plugin to support translations.
- Manual DOM wrapping: If your theme or plugins already wrap images in figures or containers, this may cause conflicts or require further adjustments.
- No automatic updates to Pinterest styles: If Pinterest evolves its brand guidelines or button designs, you won’t inherit those updates unless you manually revise your CSS.
How to Install and Use the Plugin
- Create a folder in your
/wp-content/plugins/directory calledpinterest-hover-button. - Inside it, add two files:
pinterest-hover-button.phpfor plugin logicpinterest-hover.cssfor styling
- Paste the plugin code below into
pinterest-hover-button.php:
<?php
/**
* Plugin Name: Pinterest Hover Button
* Description: Adds a red "Pin It" button on hover for all images in post content.
* Version: 1.0.1
* Author: Douglas Karr
* AuthorURl: https://dknewmedia.com
*/
add_action('wp_enqueue_scripts', 'phb_enqueue_assets');
function phb_enqueue_assets() {
wp_enqueue_style('phb-style', plugin_dir_url(__FILE__) . 'pinterest-hover.css');
}
add_filter('the_content', 'phb_wrap_post_images');
function phb_wrap_post_images($content) {
if (is_single()) {
return preg_replace_callback(
'/<img[^>]+>/i',
function ($matches) {
$img = $matches[0];
preg_match('/src=["\']([^"\']+)["\']/', $img, $srcMatch);
$src = $srcMatch[1] ?? '';
if ($src) {
$url = get_permalink();
$title = get_the_title();
$pinUrl = 'https://www.pinterest.com/pin/create/button/?' .
http_build_query([
'url' => $url,
'media' => $src,
'description' => $title
]);
return '<div class="phb-container">'
. $img
. '<a href="' . esc_url($pinUrl) . '" target="_blank" rel="noopener noreferrer" class="phb-pinit">Pin It</a>'
. '</div>';
}
return $img;
},
$content
);
}
return $content;
}
- Paste the following CSS into
pinterest-hover.css:
.phb-container {
position: relative;
display: inline-block;
}
.phb-container img {
display: block;
width: 100%;
height: auto;
}
.phb-pinit {
position: absolute;
top: 10px;
right: 10px;
background-color: #e60023;
color: #fff !important;
font-weight: 700 !important;
padding: 6px 12px;
border-radius: 3px;
text-decoration: none !important;
font-size: 13px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
z-index: 10;
line-height: 1.2;
font-family: sans-serif;
}
.phb-container:hover .phb-pinit {
opacity: 1;
}
- Activate the plugin in WordPress by navigating to Plugins > Installed Plugins.
Once active, every image in your post content will display a custom Pin It button when hovered—perfectly styled in Pinterest red, with bold white text, and ready to drive more social engagement.
Final Thoughts
If you’re looking for a no-frills, privacy-friendly way to make your content more Pinterest-shareable, this plugin offers a modern and performant solution. It avoids third-party dependencies while giving you complete visual control. And best of all, it just works—quietly encouraging your visitors to pin what they love without slowing down your site.
Related Martech Zone Content
