Disclaimer: I may receive a commission if you purchase something I link to in this post. I only recommend tools or services I love, use personally, and wholeheartedly believe will help you do business better. Read more here.
NOTE: Not so fast! Make sure you complete part one of this series before you start on the instructions contained in this post. Step two is dependent upon step one.
Now that you’ve got your hidden Pinterest image added to your blog posts, we’re going to take it a step farther.
If you include images in your blog posts that aren’t hidden, your readers may try to hover over those images and pin them instead of your hidden vertical image. If all your other images are “Pinterest-worthy,” this might not be a big deal to you. But, if those other images aren’t the best representation of your post’s content or your blog, you might want to discourage pinning them.
That’s what we’ll cover in step two of this post series: using JavaScript to help your readers pin your hidden vertical image instead of the other, less desirable images in your post content.
This method does require you to be at least comfortable enough with PHP, CSS, and WordPress theme development to follow along with the steps outlined below. If you take a peek and the steps make your head spin, no worries — just skip to the bottom and download the free plugin I wrote to do it all for you! ?
NOTE: Make sure this functionality is right for your blog before moving forward! If you have posts that contain a lot of images that your readers might want to pin, I don’t recommend this tutorial for you. If you’ve only got a handful of images in your posts and they’re generally not pin-worthy, you’re good to proceed.
NOTE x2: This tutorial is not compatible with the plugin jQuery Pin It Button for Images. Make sure you deactivate it before you begin.
NOTE x3: You can cause serious problems on your WordPress site if you don’t know what you’re doing, so make sure you follow the steps carefully and always, always back up your site before you start a DIY project like this.
Step 1: Modify the image display code in your theme
In this step, we’ll make some changes to the code we added to your theme in part one of this series.
IMPORTANT: Before completing this step, make sure you’re using a child theme so that your changes won’t be overwritten by theme updates. If you’re using a child theme for a popular framework – such as Genesis – make sure that the theme isn’t automatically updated by its developer. If your child theme does receive updates, ask the theme developer how to safely make changes or how to disable automatic theme updates before moving forward.
- Open up your theme’s functions.php file (or whatever file you placed your hidden Pinterest image PHP code in during part one).
- Find the image display code you added in part one. Add the class “mg-auto-pin” to the div tags in the function code – there are two of them. If you don’t want to force readers to pin the hidden image when it isn’t explicitly set (ie: when the hidden image falls back to the post’s featured image), only add the class to the first div tag in the function—the one inside the “if” statement, not the one in the “else” statement.
- Complete Genesis function:
// Add Pinterest images to blog posts automatically add_action( 'genesis_entry_content', 'mg_add_pinterest_image' ); function mg_add_pinterest_image () { $pinterest_img = get_field('hidden_pinterest_image'); // Replace "hidden_pinterest_image" with the Field Name I told you to keep a note of earlier :) // If an image has been set for the post, use it as the hidden image if ( $pinterest_img ) { ?> <div class="mg-auto-pin" style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"><img src="<?php echo $pinterest_img['url']; ?>" alt="" /></div> <?php // If no image has been set, check for a featured image and use that as the hidden image } else { $featured = get_the_post_thumbnail( get_the_ID(), 'full' ); if ( ! empty($featured) ) { ?> <div class="mg-auto-pin" style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"></div> <?php } } } - Complete non-Genesis/regular WordPress function:
// Add Pinterest images to blog posts automatically add_action( 'the_content', 'mg_add_pinterest_image' ); function mg_add_pinterest_image () { $pinterest_img = get_field('hidden_pinterest_image'); // Replace "hidden_pinterest_image" with the Field Name I told you to keep a note of earlier :) // If an image has been set for the post, use it as the hidden image if ( $pinterest_img ) { ?> <div class="mg-auto-pin" style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"><img src="<?php echo $pinterest_img['url']; ?>" alt="" /></div> <?php // If no image has been set, check for a featured image and use that as the hidden image } else { $featured = get_the_post_thumbnail( get_the_ID(), 'full' ); if ( ! empty($featured) ) { ?> <div class="mg-auto-pin" style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"><?php echo $featured; ?></div> <?php } } }
- Complete Genesis function:
Step 2: Add a JavaScript file to your blog posts
In WordPress, we use a built-in system to add scripts and styles to our pages: it’s called enqueueing (weird name, I know…just think “adding files to the queue”). Now, we’re going to enqueue a new JavaScript file in preparation for step three.
- Re-open your theme’s functions.php file if you closed it after step one.
- Below your image display code but before the end of the file and closing PHP tag (
?>– if one exists; it’s not necessary to add one if not), insert the following function – it works for both Genesis and non-Genesis themes:// Add JavaScript to auto-pin hidden image add_action( ‘wp_enqueue_scripts’, ‘mg_enqueue_pinterest_script’ ); function mg_enqueue_pinterest_script () { wp_enqueue_script( ‘pinit-js’, ‘//assets.pinterest.com/js/pinit.js’, null, null, true ); wp_enqueue_script( ‘mg-auto-pin’, get_stylesheet_directory_uri() . ‘/js/mg-auto-pin.js’, array(‘jquery’,’pinit-js’), null, true ); // Keep note of the file name/location you use here: the part after get_stylesheet_directory_uri(). In this example, you’re enqueueing a file named “mg-auto-pin.js” in the folder “js” inside your theme. }If your theme or a plugin you’re using already calls Pinterest’s pinit.js script, the function above may not work for you. Try the following one instead:
// Add JavaScript to auto-pin hidden image add_action( ‘wp_enqueue_scripts’, ‘mg_enqueue_pinterest_script’ ); function mg_enqueue_pinterest_script () { wp_enqueue_script( ‘mg-auto-pin’, get_stylesheet_directory_uri() . ‘/js/mg-auto-pin.js’, array(‘jquery’), null, true ); // Keep note of the file name/location you use here: the part after get_stylesheet_directory_uri(). In this example, you’re enqueueing a file named “mg-auto-pin.js” in the folder “js” inside your theme. }
Step 3: Create your JavaScript file and add the code
Remember how I told you to note the file name and location you used in the function during step two? Good…because you’ll need that name and location to complete this step!
- Create an empty file and save it with the file name and in the location you specified in the function in step two. If you used the example function as-is, you’ll want to save your blank file as “mg-auto-pin.js” in the “js” folder of your theme (and if there is no “js” folder already, feel free to create it).
- Copy the following JavaScript code into your new file and save it:
- Genesis version:
(function ($) { // Find all images inside the post var $images = $('.content .entry img'); // For each image... $images.each( function () { // Find the hidden image var $autopin = $(this).closest('.entry').find('.mg-auto-pin img'); // If the hidden image exists, tell pinit.js to pin that instead of the image at hand if ( $autopin.length ) { $(this).attr( 'data-pin-media', $autopin.attr('src') ); } if ( $autopin.closest('.mg-auto-pin').attr('data-pin-url') !== undefined ) { $(this).attr( 'data-pin-url', $autopin.closest('.mg-auto-pin').attr('data-pin-url') ); } if ( $autopin.closest('.mg-auto-pin').attr('data-pin-description') !== undefined ) { $(this).attr( 'data-pin-description', $autopin.closest('.mg-auto-pin').attr('data-pin-description') ); } }); })(jQuery); - Non-Genesis/regular WordPress version:
(function ($) { // Find all images inside the post var $images = $('.post img'); // For each image... $images.each( function () { // Find the hidden image var $autopin = $(this).closest('.post').find('.mg-auto-pin img'); // If the hidden image exists, tell pinit.js to pin that instead of the image at hand if ( $autopin.length ) { $(this).attr( 'data-pin-media', $autopin.attr('src') ); } if ( $autopin.closest('.mg-auto-pin').attr('data-pin-url') !== undefined ) { $(this).attr( 'data-pin-url', $autopin.closest('.mg-auto-pin').attr('data-pin-url') ); } if ( $autopin.closest('.mg-auto-pin').attr('data-pin-description') !== undefined ) { $(this).attr( 'data-pin-description', $autopin.closest('.mg-auto-pin').attr('data-pin-description') ); } }); })(jQuery);
- Genesis version:
Step 4: Test and celebrate!
If you’ve followed the instructions closely and finished all three steps above, your “automagic” JavaScript should be working now. Woohoo!
To test it out, go to a post on your blog that has a hidden image set and another image in the post content. When you hover over the visible image and click the pin it button, you should see your hidden image in the pop-up window instead of the image you hovered over. Neat, right?!
This little piece of JavaScript will work for your entire blog: no further action is necessary to enable it for your other posts.
Easier Business Blogging
If you’d love to make all the items on your business blogging checklist this easy, I have a solution for you. I’m developing a plugin called Easier Business Blogging that will help you get consistently-formatted, Pinterest-optimized, conversion-focused blog posts for your business in 60 seconds or less per post.
In 2018, I’ll be offering limited pre-sales on the beta version of Easier Business Blogging and the lucky people on the EBB waitlist will be the first to get a chance at purchasing the beta.
If you’d like to be one of the first to know about Easier Business Blogging’s launch, get on the waitlist by filling out the form below!
Download EBB Pinterest for free
Want to get the awesome, hidden Pinterest-optimized image I describe in this tutorial without the work? Good news: you can! I’m offering the basic Pinterest module from my upcoming plugin, Easier Business Blogging, for free to anyone who signs up for the EBB waitlist.
Get on the Easier Business Blogging Waitlist
