I post different types of things on my blog. Some posts have nice pictures while some don’t have pictures at all. I’m sort of new to Pinterest, but it already seems like you can’t post anything to Pinterest at all if there is no photo. I wanted a way to curate the images that are shared to Pinterest, and this method is the way to do that.
After completing this guide, you’ll be able to set a photo in a custom field that will be used as the photo that gets shared to Pinterest. I won’t lie, the workflow you create for yourself by doing this is a little awkward, but it gets the job done and it’s good for your users.
First, you need to enable WordPress custom fields. We’ll use this to add the URL of the image we want to share. If you don’t have them enabled already, go here to learn more about them. Once you have custom fields enabled, keep on reading.
Next, add a new post so that you can create your new field and register it with your site. Below the text-writing window of your new post, you should see the Custom Fields area. Click Enter new and name the new field share_image. (You can call it whatever you want, but for the purposes of this article we’ll use share_image). Here’s a picture of what you should see:
Now we need to open up our theme folder and find the correct files to work with. I’m using Twenty Ten so I need loop.php for the main blog page, and loop-single.php for a single post. Hopefully your theme files are well-named and it is easy for you to find out where you need to be. If you don’t know, find out before moving forward.
The code for the button comes straight from Pinterest. All we’re doing is replacing their static text with some PHP. At the top of your appropriate theme files, add Pinterest’s JavaScript (outisde of the PHP tags). It looks like this:
Now find the area of the post where you want your button to go. I wanted mine to go below the post date, so I looked for HTML markup like entry-title and entry-author to help me figure out where that was. Once you find that place, paste the following code:
That’s it for the code. If you’re interested in what all that does, keep reading this paragraph. If not, skip to the next one. With WordPress Custom Fields, you have access to that data in the form of a big associative array. I created a variable for that array and then just referenced the appropriate array elements for the image and description (which is the blog post title). The post URL is located in a different data object, so I used a different function for that. Additionally, since we only want to show the button when there’s an image, we’ll check to make sure the image array element is not null.
To put your new Pinterest button to use, just start a new blog post and add the URL for your image as a share_image custom field. If your image doesn’t have a URL yet, because you just uploaded it for this post, then publish your post, get the URL for image (by right clicking the image, opening it in a new tab, or your favorite method for getting image URLs) and edit the post to add it. That’s what I do, and it’s working great. Enjoy!
If this post helped you at all, please consider sharing my new iPad app. Thanks!