How to make images pinnable on WordPress
Reading Time: 4 minutes
Want to add a custom Pin It button on your images? In this post, I will show you how.
Why add a “Pin It” button
With a “Pin It” button on your images, visitors can easily pin it to their Pinterest boards. More pins mean more eyes on your content, which can help drive more traffic to your website and grow your audience.
If a visitor to your website has the Pinterest browser extension installed, they can pin your images by clicking the Pinterest logo in their browser bar. However, having a pin button directly on your images is more visible and may get more people to pin your featured image to Pinterest.
With a WordPress plugin, you can easily and automatically add pin buttons to the featured image of your blog posts.
How to add a pin-it button to images in WordPress
Note: I previously recommended the jQuery Pin It Button for Images plugin, which allows you to add a custom ‘Pin it’ button, so you can make it pretty & on-brand. However, it’s no longer being maintained or supported. It still works, but use at your own risk. If you’re comfortable adding some CSS to your site, follow the steps below to add a custom ‘Pin It’ button in WordPress.
Step 1: Install and activate the PinIt button plugin
The first step is to find and install the “Weblizar Pin It Button On Image Hover And Post” plugin. You can do this by navigating to the “Plugins” section in your WordPress dashboard. Click the “Add New Plugin” button and use the search field to search the plugin by name. When you see it pop up, install and activate it.
Step 2: Configure the WordPress plugin settings
After activating the plugin, you will need to configure its settings. On the left-hand admin panel, click on the PinIt Button tab. You can choose the size of the “Pin It” button, as well as where it will appear on your site: on blog posts and/or on pages. Make sure to keep “Show Pin It Button On Image Hover” on Yes, otherwise it won’t show at all.
If you want to exclude certain images or pages, click through to those sections and add the image(s) or page(s) you wish to exclude.
Step 3: Add a custom Pin It button using CSS
This plugin does not have the option for uploading a custom Pinterest button, though it’s possible with some custom CSS.
First, upload the pin button image you want to use to your Media Library. Copy the CSS below and insert the URL for your custom Pinterest pin button. Then add it to your site by using the Custom CSS setting of your theme, or use the WPCode plugin to insert custom CSS on your site.
span[class*=_button_pin] {
background: transparent url('URL TO YOUR PIN BUTTON IMAGE HERE') 0 0 no-repeat !important;
background-size: contain !important;
padding: 0 !important;
font-size: 0 !important;
box-shadow: none;
width: 150px !important;
height: 150px;
}
CSS works with selectors, like class names (.class
) and IDs (#id
). If you check the code for the button, you will notice that the class is something like “PIN_1706864062770_button_pin PIN_1706864062770_save
“, where the number changes each time the page loads. So, to make sure the CSS keeps working, we need to use a selector that doesn’t change but also that isn’t likely to apply to other elements on the site. That’s why I chose to go with span[class*=_button_pin]
. This selector says that it needs to be a span element with a class containing (that’s what class*
is for) _button_pin
.
Because this selector is less specific than the one the plugin creates, we need to use !important
at the end of most lines so that it applies our custom CSS instead of the CSS from the plugin.
The background
attribute changes the background color to be transparent so that there won’t be a red background behind your pretty & on-brand Pinterest button. The URL sets the background image to be the image you created & uploaded. The 0 0
resets the position of the background image so there’s no extra spacing around it, and no-repeat
says to not repeat the image if the width & height are larger than the image.
background-size: contain
makes sure that your Pinterest button shows fully, even if the size you set with width and height is smaller than the image you uploaded. The padding: 0
is also needed to remove extra spacing around the image. Setting the font-size
to 0 makes the “Save” text invisible. The box-shadow: none
removes styling from the default button so that your custom pin button image looks the way you intend it to.
Then, use the width
and height
attributes to set the sizing of your Pinterest pin button. You can use the width & height of the actual image. If you use a different width & height, make sure that the aspect ratio is still the same. So if the image has a width of 250px and a height of 100px, and you want it to show with a height of 50px, you need to set the width to 125px.
Step 4: Optimize your Pinterest images and pin descriptions
Now that you know how to make images pinnable on WordPress, you also need to make sure that your blog post images are optimized for Pinterest.
You can use Canva templates to create pretty Pinterest images. For design tips, read how to design Pinterest pins that drive traffic.
Apart from the design of your Pinterest pins, you also want to optimize the Pin description so that when someone saves your image to Pinterest, it will have a description with keywords so it can be found when people search for the topic of your blog post. Pinterest used to use the alt text of your image as the description, but the alt text is meant to describe the image for people who use screen readers and can’t see the image. Pinterest now uses the SEO meta description from your blog post, so make sure that’s optimized for search engines – whether that’s Google, Pinterest, or other search engines.
I'm Anouska
I help you create and launch digital products, so your business keeps working even when you rest.
I’m here to manage the behind-the-scenes of your launch while you focus on coaching and teaching.
Canva Template Shop
Create stunning digital products and promotional materials with my easy-to-use Canva templates.
Work With Me
Looking for done-for-you services? Let me handle everything from lead magnets to full launch management.
Get the free
Course Launch Planner & Checklist
It'll help you create a plan, stop wasting time googling and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch!
What my clients are saying:
"I'm now able to focus on what I love, coaching and teaching. Thanks to Anouska, I've had several smooth and successful course launches!"
— Rebecca Tolin, Mind-Body Coach
"I LOVE my new sales page. I’m really, really proud and happy with it! I raised my price and more people joined."
— Erika Vieira, YouTube Coach
Get in touch
Have questions or need more info? I’m here to help!
Overwhelmed by all the moving parts of your course launch?
Do you want to launch with a clear, organized plan?
My free Course Launch Planner & Checklist will help you:
- Set and achieve meaningful goals without burnout
- Follow a comprehensive checklist that covers every detail—from pre-launch excitement to post-launch follow-up
- Manage your time and energy every step of the way
Say goodbye to chaos with a clear course launch plan that covers every step, so you go into your launch feeling prepared and confident.