Do you want to add the Pinterest “Pin It” button in WordPress?
Pinterest is a popular social networking site that allows you to share visual content and drive a lot of traffic to your website. Adding a pin it button makes it easier for visitors to share your content.
In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog.
There are multiple ways to add a Pinterest Pin It button to your WordPress website. You can use a WordPress plugin to pin your images or manually add a Pin It button using code.
Besides that, you can create a shortcode to add the Pinterest button anywhere on your website and also allow users to save images to Pinterest by hovering over them.
In this guide, we’ll cover all these ways, so you can jump ahead to your preferred method.
- Adding a Pinterest “Pin It” Button Using a Plugin
- Manually Adding a Pinterest Pin It Button in WordPress
- Creating a Shortcode for Pinterest Button
- Adding Pinterest Pin It Button Over Your Images
Adding a Pinterest “Pin It” Button Using a Plugin
Pinterest officially changed the “Pin It” button name to Save in 2016.
Although some plugins still use the name “Pin It” instead of Save, they do the same job of pinning your images to Pinterest.
The easiest way to add a Pinterest button to your WordPress site is by using a social sharing plugin.
We recommend using Shared Counts plugin for this purpose. It is one of the best social media plugins for WordPress because it’s free and allows you to easily add the Pinterest button along with other popular social networks.
To get started, you need to install and activate the Shared Counts plugin. You can follow our step by step guide on how to install a WordPress plugin for detailed instructions.
Upon installation, head over to Settings » Shared Counts page to configure the plugin.
On the settings page, you need to scroll down to the Display section and then click on the “Share Buttons to Display” textbox.
This will open a dropdown menu where you can select the social media services you want to add. By default, Pinterest will be present in that box, along with Facebook and Twitter.
The plugin comes with multiple button styles that you can choose from the ‘Share button style’ option. You can also select the location and post type where you want to display the Pinterest button.
Once you are done choosing your settings, don’t forget to click on the Save Changes button.
You can now visit any post on your website to see the Pinterest button in action.
Another neat thing about SharedCounts is the free Custom Pinterest Image addon available on Github. This lets you set a custom Pinterest sharing image and description that’s optimized for Pinterest.
Manually Adding a Pinterest Pin It Button in WordPress
Some intermediate users may prefer to add the social sharing buttons manually to their WordPress site instead of using a plugin.
Let’s take a look at how to manually add a Pinterest button in WordPress.
The first thing you need to do is make a complete WordPress backup of your site. This will help you restore your site in case something breaks by accident.
Next, you need to add a bit of code to your footer. You can add footer code to your WordPress site using a plugin, or follow the instructions below to do it manually.
First you need to connect to your WordPress hosting using an FTP client and then go to the /wp-content/themes/ folder.
From here, you need to open your current theme folder and then locate the footer.php file.
Next, simply right-click on that file and then select Download from the menu. This will download the footer.php file to your computer.
Now, you need to open the footer.php file using a plain text editor like Notepad and then paste the following script right before the </body> tag.
<script type="text/javascript">
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>
Once you have done that, you need to save the file and then upload it back to the current theme folder.
Next, you need to locate the template file in your theme where you want to add the button. If you’re not sure, you can see our beginner’s guide to the WordPress template hierarchy. Often it will be the single.php file, but it depends on your theme.
To edit the template file, simply download it from your theme folder and open it for editing. After that, you need to add the following code.
You will need to choose the location where you want it to appear in your post. Placing it after post title is the most common placement for social media buttons.
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?> <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>
The above code displays the Pinterest button with your featured image, title, description, and post URL in the share URL parameter.
Finally, you need to save the file and upload it back to your theme directory using FTP.
This will add a vertical share button to the posts of your website. If you want to display the horizontal share button, then simply change the count-layout parameter to horizontal.
Creating a Shortcode for Pinterest Button
Shortcodes in WordPress allow you to easily add dynamic items to your WordPress posts, pages, and widgets. By creating a shortcode, you’ll be able to manually add a Pinterest button to your articles.
First, you’ll need to add the following code to your theme’s functions.php file or a site-specific plugin:
function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }
add_shortcode('pin', 'get_pin');
For more help, see our beginner’s guide to pasting snippets from the web into WordPress.
After you’ve added the code, you can use the [pin] shortcode in your WordPress posts where you want to display the Pinterest button.
Adding Pinterest Pin It Button Over Your Images
If you are running a fashion, photography, or portfolio site, then you definitely want your images to be shared on Pinterest to increase your website traffic.
Adding a Pinterest Pin it button over your images in WordPress allows user to easily pin any image on your site by simply hovering their mouse over the image they want to share.
First, you need to install and activate the Weblizar Pin It Button On Image Hover And Post plugin. For more details, you can refer to our guide on how to install a WordPress plugin.
Upon activation, go to PinIt Button page from your WordPress admin panel to configure the plugin.
You can choose whether you want to show the Pin It button on your WordPress blog posts or pages on the settings page. You should also ensure that the option for ‘Show Pin It Button On Image Hover’ is set to ‘Yes.’
Besides that, the plugin lets you show the Pin It Button on mobile devices and edit the button’s size. Once done, you need to store the settings.
Now you can visit your website and then hover your mouse cursor over any image to see the Pinterest Pin It or ‘Save’ button.
If you want to exclude some images from showing the Pin It or Save button, then you can go to the PinIt Button page from your WordPress dashboard and select the ‘Exclude Images’ tab from the settings.
All you have to do is enter the image URL you want to exclude from showing the pin it button and click the ‘+ Add’ button.
You can also exclude pages from displaying the Pinterest Save or Pin It button using the plugin. Simply head over to the ‘Exclude Pages’ tab and add the name of the page.
That’s all!
We hope this article helped you understand how to add a Pinterest “Pin It” button to your WordPress blog. You may also want to see our guide on how to create an email newsletter, or see our comparison of the best web design software.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Ellen says
It works！！ thankyou
WPBeginner Support says
Glad our guide could help
Admin
Kara says
After I installed the plugin, it never showed up in the settings.
WPBeginner Support says
You would want to ensure you activate the plugin as well.
Admin
Jais says
Thanks. It works.
WPBeginner Support says
You’re welcome, glad it worked for you
Admin
laira says
hi wpbeginner, I follow your codes, may i know if i will still pin the images on my pinterest boards? or it will automatically pin there? Im still a beginner in this platform. thank you
WPBeginner Support says
The button when used would add it to your board.
Admin
Lorraine Reguly says
Thanks for the code. I just added it to my author site. (I have no idea how the Pinterest button shows up on my images on my business site, but it does.)
Now my author site is all set up!
Thanks, Syed.
P.S. I just followed you on Pinterest.
WPBeginner Support says
Hey Lorraine,
Thanks for following us on Pinterest. You can also find us on Twitter and Facebook.
Admin
RB says
this is work !! thanks
and
I wonder…
how can I change icon? Icon is still same when change code
Thales says
I did the last option, adding the short code to my theme’s functions.php file. It worked, but I couldn’t save my posts as draft anymore. Then I removed the code and it is not working. My site is still online, but I cannot log in into my site anymore. The following message appear:
Warning: Cannot modify header information – headers already sent by (output started at /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) in /home/peque107/public_html/wp-includes/pluggable.php on line 1224
Please help!
Emma steave says
Thanks. Its great
Carissa says
Does this only apply for wordpress.org blogs? I have a wordpress.com blog and I am not sure if I can add this plugin to it?
Thank you!
WPBeginner Support says
Yes it is for WordPress.org. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Admin
Ruth says
I have a problem. I followed the instructions and came up with this error:
Parse error: syntax error, unexpected ‘<' in /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php on line 18
Now I cannot get rid of it. Could someone advise. My site is now down.
WPBeginner Support says
Open the functions.php file in a text editor like notepad. Go to line 18. You probably have <?php tag there that you don’t need. Delete it and also delete the ?> closing tag
Admin
Ian Harris says
Thanks for this firstly
I am struggling to position the element. It is seeming to always sit in the top left of the div.
Is it possible to position it and also change the bg image to own custom one.
Thanks
Paradise Found Around says
Great tutorial, as usual. I was wondering though if there was a way to modify it to use a custom button in place of the starboard one that automatically comes up.
Thanks,
Mark
mark taylor says
Good tutorial, i have put it on my site without any problems, i then tested it and it worked, but it still says 0 after i pinned.
Mark
vrinda says
I tried so many plugins… they don’t work with infinite scroll and nextgen gallery…. but with some changes this script solved my issue.. thanks
Michael says
Hello,
I just want to ask if I could change the size of the “pin it” button? Because it seems that it was a little bit small.
Regards,
Michael
Editorial Staff says
You could use the pin count layout vertical or horizontal. Other than that, no you cannot change the size.
Admin
Jenny says
This code just recently stopped working. I had it on my site and it was working great and recently images appear to be working but then when you go view the pinboard there is no image set. Other times when trying to pin it 502 error that comes from the Pinterest site. Any ideas?
Editorial Staff says
Probably server errors on Pinterest’s end. We have this code running on our other sites.
Admin
Ido Schacham says
There’s a bug in the code. The generated href for the pin it button should include ‘url=’, currently it’s missing the equals sign.
Editorial Staff says
Fixed the shortcode code for that. Thanks for reporting it
Admin
jess says
For wordpress users..adding the pin it or any other social media is easy! Under dashboard, go to setting, click on sharing and they all appear- click on what you want to add!
Editorial Staff says
You are referring to WP.com sites. This tutorial is for self-hosted WordPress sites. Two different things.
Admin
Jen M says
THANK YOU! I have been searching for how to do this for 2 days & downloaded something & that didn’t work, I was about to give up & then THANKFULLY read your comment. I appreciate someone making it as EASY as it really is, how come wordpress can’t do that?
Jenn K says
Ooh, thanks for the tip! Exactly what I was looking for
Nick says
Is there a way to customize this so you can select a custom image for the pin-it button ?
Editorial Staff says
If you mean a custom image for your article, then yes you can. Look at the &media tag in the second code.
Admin
Husein Yuseinov says
Hi,
I need to implement this code but in header file, but postthumbnail returns error?!
wpbeginner says
@Husein Yuseinov You have to call the thumbnail code within your post loop. In order to call it in your header.php file, you must utilize the global variable.
https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
Husein Yuseinov says
@wpbeginner Thanks for the fast respond, but I’m not a coder, and it’s hard for me to understand you.
wpbeginner says
@Husein Yuseinov Ok… so here is what you do. Add the following line above $pinterestimage line inside the PHP tags:
global $wp_query;
$postid = $wp_query->post->ID;
Then replace $post->ID with $postid and it will work. Also after the code, you may want to end wp_reset_query();
This is the best we can do. What you are asking for requires coding. If you are unable to do this, then shoot us an email. We can help you out for a small fee.
robthecomputerguy says
What in the world is going on with the “animhut blog” button on thee next 3 comments?
wpbeginner says
@robthecomputerguy I think they just liked our comments, and livefyre is showing their profile.
robthecomputerguy says
@wpbeginner Oh that’s fascinating – that didn’t even occur to me – thanks for the follow up!
FuturePocket says
I tried adding this… it worked but when you click on “Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.
Phil Derksen says
If you don’t want to mess with adding code, I created a Pin It button plugin you can try out.
http://wordpress.org/extend/plugins/pinterest-pin-it-button/
(or just search for “pinterest pin it” under plugins)
Jean Oram says
I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well.
Editorial Staff says
For any advanced theme framework like Thesis, Genesis, Headway etc, you have to add these codes via functions.php file using the framework appropriate hooks. We cannot possibly cover all the theme frameworks out there. Most theme framework blogs have instructions on how to do customize the themes.
Admin
wpbeginner says
Your method seems a bit tedious because you would have to do it for each image.
Ruby says
@wpbeginner It’s not ideal, but it’s really not much more than you have to do to post the image anyway. I’m still looking for a great option (plugin ideally) that a) works on my theme and b) is easy. Luckily, due to the popularity of Pinterest, I’m confident someone will have one up and running soon!
wpbeginner says
Make sure you set $pinterestimage[0] otherwise it will return an array. Other than that not sure why you are getting the error.
merrittsgret says
@wpbeginner It’s working now, thanks to the shortcode code you gave us. Thank you so much!
Now to get it to align with everything else via CSS… (http://ylcf.org/2012/01/tomorrow-2/) Ah, the joys.
wpbeginner says
@merrittsgret Yeah, you might have to utilize the !important tag in some cases.
dave2 says
Any idea on how to change it from featured image to first image?
wpbeginner says
@dave2 Use a variation of this snippet:https://www.wpbeginner.com/wp-themes/how-to-set-a-default-fallback-image-for-wordpress-post-thumbnails/
animhut blog says
@wpbeginner @dave2 Thank you for the tutorial ! i need that for my another photography site
Gretchen says
It works, but it shows the text “array” before the Pin It button. I’m calling it via my functions.php, like so “echo $pinterestimag…..<?php;" Could that be why?
Heidi at CrockPotLadies says
I cannot seem to get it to work. I put the first code in my footer.php before the closing body tag and then added the other code into my single php after my other sharing buttons provided by po.st. Yet when I look at a post on my site (http://crockpotladies.com/recipe-categories/entrees/crockpot-chicken-enchiladas/) I do not see a Pin It Button. Any suggestions?
wpbeginner says
@Heidi at CrockPotLadies We can see the button in the next line after the Subscribe to feed etc links.
wmwebdes says
Only just started to hear about Pinterest – looks as though it is really taking off.
Thanks for the tut.
Ruby says
Thanks for this. I recently tried a similar method but it doesn’t seem to work with my WordPress.org theme, so I came up with my own work-around and posted it here: http://www.tomaytotomaaahto.com/tools-and-tutorials/how-to-turn-your-images-into-pinterest-pin-it-buttons-wordpress
YeahThatsKosher says
How do you get this to integrate with an existing WP plugin like Digg Digg or Sociable?
wpbeginner says
@YeahThatsKosher You would have to ask the developers to do so for you.