I'm creating a plugin to add Pin it button over all images inside post content.But this button is not wrapping attachment images inside it to be appeared over the images.It appears top_left (as block) of the image. I want it to appear exactly over the image.In wordpress content, images are wrapped up inside p tag.But my Pin it button tag falls outside of the p tag as block.please help to solve this problem.

This is CSS:

.pin-it-button{ width:100%; position: relative; top:-6px; }


/** * The constructor class for the Pinterest pin button plugin */

function __construct(){

    // Add the pin button inside the content filter
    add_filter('the_content', array(&$this, 'Add_Pin_Button') );

 * 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
    $replace_by_button_div = '
        <img$1src="$2.$3" $4 width="$5" height="$6" />
        <div class="pin-it-button pinup">
        <a href="http://pinterest.com/pin/create/button/?url='.urlencode(get_permalink()).'&media=$2.$3 &description='.urlencode(get_the_title()).'" target="_blank" class="pinimg" >Pin It</a></div>

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

    return $content;

I assume you want something like the following:

enter image description here

An HTML output could help us to understand the issue more clear. However, you can set the position of the parent to relative, using:

p.your-p-class {

Then, position your button as absolute.

    position: absolute; 

This will set your pin halfway from top and left, which would center it on your image. Depending on your pin's size you might wanna reduce the percentage a bit.

  • i don't think it is issue related to css.css is not problem.other wordpress pinterest pin it button plugin from wordpress.org shows pin it button when hover image.I want like that but my own custom plugin which does not load external sources from pinterest. – samar Feb 11 '17 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.