• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Overlock Design Co.

Overlock Design Co.

Websites Built for Growth

  • Services
    • Custom Websites
    • WordPress Maintenance
  • Portfolio
  • Blog
  • About
  • Contact

Quick & Easy Pinterest Images in Genesis

June 23, 2017 • GenesisWP, Resources, Social Media, Tutorials

Pinterest drives blog traffic like crazy. But, unfortunately, the featured image sizes that come standard on most Genesis themes aren’t optimized for Pinterest. They’re usually in landscape mode – 960px wide or less, and don’t make for impressive pins.

You could manually add each Pinterest-friendly image to the bottom of your blog post. But then it’s up to your visitors to select the “right” image when pinning your post, which gives the user more control over your content then they probably need.

Luckily, if you’re using the Genesis framework, I came up with a quick and easy solution to add no-brainer Pinterest images to your blog posts! You’ll have full control over which image is shared on Pinterest, and it makes sharing quick & easy for your visitors. The best part? It only takes a few steps!

1) Install Advanced Custom Fields

Advanced Custom Fields

As you may know, Advanced Custom Fields is bae. The plugin is super powerful, but easy to use, and makes adding custom fields and data to your posts a breeze.

You can install ACF by downloading the file from the WordPress Plugin Repository, or just going to Your Site > Dashboard > Plugins > Add New and searching for it.

Once it’s installed & activated, we can move onto step 2.

2) Add this snippet to your functions.php file

This little code snippet will tell ACF to create the Pinterest Image section for your posts or pages, then display the image, with a correct Pinterest-friendly link, at the bottom of your post.

I know – editing your theme’s code can be scary. You got this!

Before you do anything, back up your website! If anything goes wrong in the process, you’ll want to be able to fix it quickly!

Once you’re backed up, you can edit your functions.php file, navigate to Your Site > Dashboard > Appearance > Editor. Make sure Theme Functions is selected in the sidebar to the right.

Editing your theme's functions.php

Once there, scroll all the way down to the bottom of functions.php and add this code:

// Create Pinterest Image field in ACF
if(function_exists("register_field_group"))
{
    register_field_group(array (
        'id' => 'acf_additional-settings',
        'title' => 'Additional Settings',
        'fields' => array (
            array (
                'key' => 'field_594d3b6273ae5',
                'label' => 'Pinterest Image',
                'name' => 'pinterest_image',
                'type' => 'image',
                'save_format' => 'object',
                'preview_size' => 'medium',
                'library' => 'all',
            ),
        ),
        'location' => array (
            array (
                array (
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'post',
                    'order_no' => 0,
                    'group_no' => 0,
                ),
            ),
        ),
        'options' => array (
            'position' => 'side',
            'layout' => 'default',
            'hide_on_screen' => array (
            ),
        ),
        'menu_order' => 0,
    ));
}

// Display Pinterest Image on Blog Post
function pinterest_image() {
    if (is_single() && get_field('pinterest_image')) {

        $image = get_field('pinterest_image');

        echo '<h3>Share on Pinterest</h3>';

        echo '<a href="//pinterest.com/pin/create/button/?url=' . get_the_permalink() .'&description=' . get_the_title() .'&media=' . $image[url] .'" target="_blank"><img src="' . $image[url] . '" alt="' . $image[alt] . '" class="aligncenter pinterest-image"></a>';

    }
} add_action( 'genesis_entry_content', 'pinterest_image', 10);

Then click Update File and you’re good to go. See? Not so scary!

3) Add your image to your post!

Now the final step is actually adding your Pinterest image to your post! In the post editor, look to the right-hand sidebar for a box called Additional Settings.

The New Additional Settings Box

Once you’ve found it, simply click Add Image and upload your Pinterest-friendly image like you would any other picture! When you update the blog post, your new Pinterest Image will automatically be added to the bottom of the post.

Click on it and viola!

A GIF showing how the new Pinterest image works.

Your users can share the image directly to Pinterest, with the link, image, and title all filled out for them!

Notes

Please note that this only works with the Genesis framework! If you’re not sure if you’re using Genesis, at best this code will add a useless field to your posts. At worst, it could break your site. Always double check before adding code to your site! If you need assistance, it’s better to ask then end up with a broken website.

Did this work for you? Do me a favor and share it!

Leave a Comment • Advanced Custom Fields, Code, Pinterest

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hey, I’m Kyrie.

Kyrie Tompkins-Overlock

I’m a freelance web developer from Central Maine. I help my clients cultivate growth in their business by getting the most out of their websites.

Learn More

Like me on Facebook Follow me on Instagram Follow me on Pinterest Follow me on Twitter

Blog Categories

  • Announcements
  • Building A Website
  • Divi
  • Freelancing
  • GenesisWP
  • Gravity Forms
  • Personal
  • Resources
  • Social Media
  • Tutorials
  • Web Design
  • WordPress
Butterflies next to a computer screen.

Interested in working together?

Let's Chat
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
Overlock Design Co.
Monday - Friday, 9 AM - 3 PM
kyrie@overlockdesign.co
(207) 370-9271
Follow me on Instagram Follow me on Pinterest Follow me on Twitter
  • Resources
  • Terms of Service
  • Privacy Policy
  • Affiliate Links Disclaimer
Copyright © 2023 Overlock Design Co.