Manually deploy Pinterest widget code in WordPress

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).

Build a widget

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:

1
2
3
4
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer data-pin-height="28"
data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js">
</script>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</main>
<footer class="footer">
<p class="footer-copy" role="contentinfo">
&amp;copy; <?php _e( 'Copyright','adelle-theme' ); ?> <a href="<?php echo esc_url( home_url() ); ?>"><?php bloginfo( 'name' ); ?></a> <?php echo date( 'Y' ); ?>. <?php _e( 'Powered by','adelle-theme' ); ?> <a href="<?php echo esc_url( 'http://www.wordpress.org' ); ?>">WordPress</a>. <a href="<?php echo esc_url( 'http://www.bluchic.com' ); ?>" title="<?php _e( 'Theme designed by BluChic','adelle-theme' ); ?>" class="footer-credit"><?php _e( 'Designed by','adelle-theme' ); ?> BluChic</a>
</p>
</footer><!-- .footer -->
</section><!-- .container -->
<?php wp_footer(); ?>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer data-pin-height="28"
data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js">
</script>
</body>
</html>

Save the file, refresh your page, and the Pinterest button should appear every time the mouse moves over an image.

Notes

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).

See also

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.