WordPress

Create A WordPress Plugin To Add A Pin Button To Every Image

Pinterest-Logo

Pinterest is the newest big player in the social media world, they have quickly grown to several million users, in the last year the amount of users has grown more than 4,000% and it continues to rise. With the amount of regular users Pinterest now has you need to learn how to best use this to help your website.

Pinterest is a social network which shares images and videos to your followers. Just like other big social networks Pinterest has there own pin buttons where website owners can use to place on their site to make it easy for people to pin the images on the site.

Pinterest Pin Buttons

The Pinterest buttons can be placed anywhere on the site, most websites have placed these pin buttons at the start or end of an article with the other social network buttons. But Pinterest is not like the other social networks, if you tweet a page you are tweeting the entire article. If you pin a site you are pinning a specific image on the page. As you have to choose the image to pin on the site it doesn't make sense to place the pin button at the bottom of the post with the other social network buttons. Pin buttons belong on the images of your site, this is what people are pinning on their boards it makes more sense to place a pin button on each image of your website.

Creating WordPress Pin Plugin

This is what this tutorial will teach you, how to create a WordPress plugin to add Pinterest pin buttons to each of the images that appear inside the WordPress post content.

We need to create a WordPress plugin that will check inside the content of the post, search for all images that are placed inside the content and replace this with a div which holds the Pinterest Pin button.

To start off we need to create a WordPress plugin, add a new PHP file and place the following comments at the top of the file.

/*
Plugin Name: Paulund Pinterest Button On Images
Plugin URI: http://www.paulund.co.uk
Description: This plugin will automatically add pin buttons to all the images in your content
Author: Paul Underwood
Author URI: http://www.paulund.co.uk
Version: 1
*/

The above comments will make sure that this file is going to be used as a WordPress plugin. When this is uploaded to your WordPress site inside the plugin folder then WordPress will understand this is a plugin and will allow you to activate it from the plugin dashboard.

With the plugin created we can now write the code to add the pinterest pin button to all images from inside the content.

Plugin Class

For this plugin we are going to define a PHP class to run our code. We start off with defining the class methods that we need.

First we will need to add the stylesheet to the page and then we can hook into the content function and replace the images with the pin button on top of the images. Below is the code we will use to outline the functionality of the plugin, as you can see it will be a very straightforward plugin with a constructor and one method.

/**
* Paulund pinterest pin button plugin, will automatically add pins to buttons
*/
class Paulund_Pinterest_Pin_Button
{
	/**
	 * The constructor class for the pinterest pin button plugin
	 */
	function __construct()
	{
		
	}

	/**
	 * Load styles for plugin
	 */
	public function load_styles()
	{

        }

	/**
	 * Adds the pin button to each image inside the content
	 */
	public function Add_Pin_Button($content){

	}
}

The Constructor

Within the constructor we need to add a custom stylesheet to the page, this will position the Pinterest button in the correct place on the image.

We need need to add the Pinterest Javascript file to the bottom of the page so we can interact with Pinterest to pin an image to your boards.

After the CSS and Javascript is on the page then we need to add a filter to the content of the post so we can add the pin buttons to the images.

Below is the code we are going to use inside the constructor.

/**
	 * The constructor class for the pinterest pin button plugin
	 */
	function __construct()
	{
		// Enqueue Scripts
		add_action( 'wp_enqueue_scripts', array(&$this, 'load_styles'));
		
		// Add the pin button inside the content filter
		add_filter('the_content', array(&$this, 'Add_Pin_Button') );
	}

Add Pin Button To Image Method

This method needs to find all the images inside the content of the post and add the Pinterest Pin button on top of the image.

To start with we need to get the post information so that we will have access to the post URL and the Post title to do this we need to include the global variable $post inside the function.

global $post;

With the post information available to use we can get the URL for the current post.

// Get the post url
$posturl = urlencode(get_permalink());

We need to create a way of searching for all images inside the current post, to do this we need to create a reg ex to search for all images with it's width and height so we can position the Pin button correctly.

// Define a pattern to find all images inside the content
$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)" (.*?) width="(.*?)" height="(.*?)" \/>/i';

Below is the HTML we are going to use to replace each of the images on the page. This HTML will create a div container inside here we can place the image and then a link with the Pinterest button. Inside the Pin button link we need to define the post URL with the title of the post.

// Replace the images with the following div and pin button
$button_div = '
			<img$1src="$2.$3" $4 width="$5" height="$6" />
			<div class="pin-it-button" style="top:-$6px;position:relative;">
			<a href="http://pinterest.com/pin/create/button/?url=
			'.$posturl.'
			&media=$2.$3
			&description='.urlencode(get_the_title()).'" count-layout="horizontal">Pin It</a></div>';

Now we have the pattern to search for and the HTML we are going to replace it with we can then use the PHP function preg_replace().

// Replace the images with a containing div with a pin button on the image
$content = preg_replace( $pattern, $button_div, $content );

Full WordPress Plugin

<?php
/*
Plugin Name: Paulund Pinterest Add Pin Buttons
Plugin URI: http://www.paulund.co.uk
Description: This plugin will automatically add pin buttons to all the images in your content
Author: Paul Underwood
Author URI: http://www.paulund.co.uk
Version: 1
*/

/**
* If not in the admin area then run the pinterest pin button
*/
if(!is_admin()){
	new Paulund_Pinterest_Pin_Button();
}

/**
* Paulund pinterest pin button plugin, will automatically add pins to buttons
*/
class Paulund_Pinterest_Pin_Button
{
	/**
	 * The constructor class for the pinterest pin button plugin
	 */
	function __construct()
	{
		// Enqueue Scripts
		add_action( 'wp_enqueue_scripts', array(&$this, 'load_styles'));
		
		// Add the pin button inside the content filter
		add_filter('the_content', array(&$this, 'Add_Pin_Button') );
	}

	/**
	 * Load styles for plugin
	 */
	public function load_styles()
	{
		// Add the style sheet to the pin button
		wp_enqueue_style('Paulund_Pinterest_Pin_Button', plugins_url( '/paulund-pinterest-add-pin-buttons/style.css' ) ); 

		// Register the pinterest Javascript script
		wp_register_script("pinterest-js-script", "http://assets.pinterest.com/js/pinit.js", array(), '1.0.0', true);
		wp_enqueue_script("pinterest-js-script");
	}

	/**
	 * Adds the pin button to each image inside the content
	 */
	public function Add_Pin_Button($content){
		global $post;

		// Get the post urls
		$posturl = urlencode(get_permalink());

		// Define a pattern to find all images inside the content
		$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)" (.*?) width="(.*?)" height="(.*?)" \/>/i';
	  	
	  	// Replace the images with the following div and pin button
		$button_div = '
			<img$1src="$2.$3" $4 width="$5" height="$6" />
			<div class="pin-it-button" style="top:-$6px;position:relative;">
			<a href="http://pinterest.com/pin/create/button/?url=
			'.$posturl.'
			&media=$2.$3
			&description='.urlencode(get_the_title()).'" count-layout="horizontal">Pin It</a></div>';

		// Replace the images with a containing div with a pin button on the image
		$content = preg_replace( $pattern, $button_div, $content );

		return $content;
	}
}
?>

Stylesheet To Position The Pin Button

If you currently run this WordPress plugin you will see the Pin button under each of the images on the page, but we want the Pin button to appear on top of the image, so we need to add the following CSS to the page.

Create a new CSS file and add it to the same folder as the plugin and add the following CSS.

.paulund-pinterest-container{
	width:100%;
	position: relative;
}
.paulund-pinterest-button{
	margin:0 auto;
	position: relative;
}
.paulund-pinterest-button iframe{
	position:absolute;
	left:10px;
	top:10px;
}

Download

This plugin has now been improved to allow you to choose where the pin it button is positioned. This plugin is a premium product and costs $4.

Pinterest Pin It Button

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial