My wife wanted to have a Pinterest widget appear when hovering over images on her website, lyndsaylifestyle.com. We tried a couple of plugins, which were supposed to make this process easy. One of them does precisely what we wanted, but I started mucking around in the PHP anyway (don’t do this. It’s silly. Use this plugin instead).
I used the official Pinterest Widget Builder to get the markup that loads the all-critical
pinit.js script from their CDN. The code produced looks like this:
As per the commented warning, I needed some way to ensure
pinit.js was only loaded once. What better way than modifying the template directly (again, don’t do this. See Notes below)?
The file in question is located in
wp-content/themes/adelle/footer.php, where adelle is the name of my wife’s theme. I simply pasted the Pinterest-generated widget code above the closing
</body> tag like this:
Save the file, refresh your page, and the Pinterest button should appear every time the mouse moves over an image.
If you’ve come to this page, you’ve undoubtedly already tried this Pinterest Widget plugin. It wasn’t immediately obvious if (or how) this plugin puts a hovering Pinterest button over all the page’s images, so I gave up. Be sure to uninstall this plugin if you implemented the solution described above.
Also note, I directly modified a theme template. The plugin button will not appear if you switch templates. There’s a plugin that actually does this, but I decided to directly modify the template for my own edification (and future reference, as always).
The steps taken above are definitely the easiest and laziest route. I haven’t tried it yet, but you can also obtain the
pinit.js script asynchronously.