Add Pinterest Pin It Hover Button To Images In Any Theme

Here’s 2 ways to display Pinterest pin it buttons to all your images (when hovered) regardless of which theme you have installed.

Jen from http://www.minisuitcase.co.uk/ contacted me recently with this question:

I was looking for a way to add a Pinterest hover button to my WordPress site without a plugin. The site that mentioned yours gave the impression you supplied the code for a non-Genesis solution.

1. Loading Javscript Locally

Here’s the 1st solution which involves a little bit of Javascipt & PHP coding that i will supply.

There’s 2 steps:

1. Create a new file named pin.js using a code editor like Notepad++. (Make sure you save it as a Javascript file.
2. Add some PHP code to the end of your child themes functions.php file

Step One – Create Javascript File

Using a code editor, create a new file, copy the Javascript code from the above Gist using the view raw link and paste it into the new file named pin. Save the file as a .js file and upload it to your child themes root directory.

Step Two – Register The Javascript File In Functions File

Simply copy this PHP code from the Gists view raw link and paste it at the end of your child themes functions file.

2. Loading Javscript Externally From Pinterest Servers

This is the 2nd option which loads the Javascript externally from Pinterests servers.

Simply paste this PHP code in your child themes functions file.

As a bonus, the filter in this code adds “async”, which should be used.

Official Plugin

Pinterest also have an official WordPress.org Plugin for the hover button, which you can find here if you’re interested: http://wordpress.org/plugins/pinterest-hover-pin-it-button/

Related Pinterest Solutions

• Genesis Tutorial: Add Pinterest Hover Buttons for Images In Genesis