How to Add ‘Pin It’ Button With Images To Your WordPress Blog Without Plugin

Step 1: Add Pinterest’s javascript

Add the following code to your footer.php file of the theme ( before the </body> close tag ) :
You can get Pinterest’s javascript at Goodies
1
<script type="text/javascript"src="//assets.pinterest.com/js/pinit.js"></script>
Step 2: Add Pin it button to single blog post

Add the following code to single.php file of the theme where you want to show Pin It button:
1
<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo catch_that_image() ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal"><img border="0"src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
Step 3: Get the first image with the functions

Add this code info your functions.php file of the theme:

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}
The end. Thanks for reading my Pin It button tutorial. And a big thanks to Jean-Baptiste Jung.