Optimize your blog for Pinterest, part one: Easily adding hidden vertical images to your blog posts using ACF

When you’re blogging for business, there are a lot of extra tasks that you need to perform in order to get the best “bang for your buck” out of your blog content. Making sure your blog is set up to convert readers to subscribers, optimizing your posts for search engines and social networks, properly disclosing affiliate links, formatting everything consistently from post to post…it can get exhausting just to keep up, and that’s not even considering the actual writing!

One of these oh-so-essential extra tasks is optimizing your blog posts for Pinterest. Pinterest is arguably the single most important social network for sharing your blog content because it has the potential to greatly increase your traffic. And, what’s rule number one for getting more eyes on your pinned blog posts? Use a vertical image when you create your pin.

Vertical images come with their own set of problems for blog owners, though: they’re awkward when left visible in your post and make readers have to work harder to consume your content (bad!). They can be hidden with a little bit of HTML—the most common approach is wrapping the image in <div style=”display: none;”></div>—but it’s so tedious to manually insert that code for every post.

What if I told you there was an easier, more automated way?

How to add hidden Pinterest-optimized images to your blog posts using ACF

Using Advanced Custom Fields and a little bit of code, you can make adding a hidden vertical image to your blog post as easy as selecting it from the Media Library and hitting “save.” No tinkering with div tags necessary! I first implemented this here on my own blog after I re-launched. You can test it out by click your browser’s Pin it button or by hovering over any of the images in the post’s content and clicking the Pin It button. You should see the (otherwise hidden) vertical image there, all ready to be pinned. Neat, huh?

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! 😉

Notice: 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: Create the custom field

1. Install and activate the Advanced Custom Fields plugin. The free version in the WordPress repository should be sufficient for this tutorial, but if you build sites for clients, I really recommend investing in the Pro version – it makes developing custom sites so. much. easier. And faster. Win win!
2. Add a custom field for your hidden Pinterest image.
   1. If the install succeeded, you should see a “Custom Fields” option in your WordPress dashboard sidebar. Click “Custom Fields,” then click “Add New” next to the “Field Groups” heading once the page loads.
   2. Enter a title for your new field group. ex: Blog Post Pinterest
   3. 1. Click the “Add Field” button to open the new field dialog box. In the new field box:
         1. Enter a label for your new field in the Field Label input. This is what your new field will be called when you’re editing a blog post. ex: Hidden Pinterest Image
         2. Once you tab or click out of the Field Label box, the Field Name box should auto-populate. If it does not, enter a name for the field with no spaces or special characters. Make a note of the Field Name somewhere handy; this name is what we will use in our code to access the field’s value. ex: hidden_pinterest_image
         3. Select “Image” (under Content) in the Field Type dropdown menu.
         4. Make sure the Return Value is set to “Image Object”.
         5. Make sure the Conditional Logic field is set to “No”.
         6. Optionally, enter some instructions for yourself in the Field Instructions box to remind yourself what this field does. You may also change the Required, Preview Size, and Library fields to your desired values, but the default ones should be fine if you don’t have a preference.
      2. In the Location field group settings area, make sure “Show this field group if” is set to: Post Type is equal to post. This tells Advanced Custom Fields to show your new field on the edit screen of your blog posts. If you also want the hidden Pinterest image to show on pages, click the “and” button at the end of this ruleset and set the dropdown menus on the new rule to “Post type is equal to page.”
      3. In the Options field group settings area, change the settings as desired. The settings I like are:
         1. Order No. – default value (0)
         2. Position – High (after title)
         3. Style – Standard (WP metabox)
         4. Hide on screen – default value (no boxes checked)
      4. Hit the Publish button on the right when you’re finished! You’ll only have to complete this step once during the initial setup.

Step 2: Create or edit your blog post and select the image you’d like to hide

1. Navigate to the edit screen for the post you’d like to add a hidden vertical image to.
2. If your Custom Field creation was successful, somewhere on the edit screen you should see your new custom field…woohoo!
3. Click the “Add Image” button and either upload your vertical Pinterest image or select it from your Media Library.
4. Publish or Update your post.

Step 3: Display the image in your blog post’s content

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.

1. Open up your theme’s functions.php file (or create it if it doesn’t exist, making sure that the file has an opening PHP tag <?php at the very beginning).
2. Copy and paste either the Genesis-specific code or the regular WordPress code from below into your functions.php file. Make sure you place it after the opening PHP tag (<?php) and before the closing PHP tag (?>) if your file has one. 
   1. Genesis code:

      // 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 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 style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"><?php echo $featured; ?></div>
              <?php
              }
      
          }
      
      }

       

   2. Non-Genesis/regular WordPress code:

      // 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 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 style="display: none;" data-pin-url="<?php echo get_the_permalink(); ?>" data-pin-description="<?php echo get_the_title(); ?>"><?php echo $featured; ?></div>
              <?php
              }
      
          }
      
      }

       

3. Customize the code as desired.

Step 4: Test and repeat!

Navigate to the blog post that you just edited. You shouldn’t be able to see the vertical image, but when you click your browser’s Pin It button, it should show up as one of the pinnable options.

Repeat Step 2 for each blog post that you want to optimize—it only takes a few seconds per post after this initial setup. One item on your “business blogging” checklist made easier! 😉

If you’d like to follow along with more Pinterest optimization tutorials, keep your eyes peeled: Part Two of this series is coming soon.

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—think introductory pricing at 50% less than regular price!—and the lucky people on my mailing list 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, get on the wait list by filling out the form below!

Download the free hidden Pinterest image plugin

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

Be one of the first to know when Easier Business Blogging presales open...and get EBB's basic Pinterest module for free!