Table of Contents

Pinterest Pin it button on feature Images WordPress

To add a Pinterest “Pin It” button to the top-left corner of an image in WordPress, you can add the following code to your theme’s functions.php file.

function add_pinterest_button_to_image( $content ) {
    global $post;
    if ( is_single() && has_post_thumbnail( $post->ID ) ) {
        $thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
        $pinterest_link = 'https://pinterest.com/pin/create/button/?url=' . urlencode( get_permalink() ) . '&media=' . urlencode( $thumbnail_url[0] );
        $content = '<div class="pinterest-button-wrapper"><a href="' . $pinterest_link . '" data-pin-do="buttonPin" data-pin-custom="true"><img class="pinterest-button" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>' . $content . '</div>';
    }
    return $content;
}
add_filter( 'the_content', 'add_pinterest_button_to_image' );

This code adds a Pinterest “Pin It” button to the featured image of single posts. The button is wrapped in a div with the class Pinterest-button-wrapper. The button is linked to the Pinterest create pin URL with the post’s permalink as the URL parameter and the featured image’s URL as the media parameter. The data-pin-do attribute is set to “buttonPin” to activate the Pinterest button script, and the data-pin-custom attribute is set to “true” to allow customizing the button. The class attribute of the img tag is set to “pinterest-button” for styling the button.

To position the button at the top-left corner of the image, you can add the following CSS code to your theme’s style.css file:

.pinterest-button-wrapper {
    position: relative;
}
.pinterest-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

This code sets the position attribute of the Pinterest-button-wrapper class to “relative” to enable positioning its child elements. The position attribute of the Pinterest-button class is set to “absolute” to position the button relative to the top-left corner of the parent element. The top and left attributes are set to “0” to align the button with the top-left corner of the image. The z-index attribute is set to “1” to place the button above the image.

I hope this helps. Let me know if you have any further questions.

Advanced Search