Pinterest Hover Button (5 posts)

  1. brandcaul
    Posted 2 years ago #

    Hi guys,

    I've placed the code below in my child functions.php and child style.css but for some whenever I edit the css to move the pin it badge around nothing seems to happen?

    Is there something in the functions.php code thats causing this?

    Thanks guys!

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    No way to answer that without seeing the site to see what's going on with the CSS code.

  3. brandcaul
    Posted 2 years ago #

    Oops! http://addblog.co.za/

    And here's the code:


    function insert_pinterest($content) {
    	global $post;
    	$posturl = urlencode(get_permalink()); //Get the post URL
    	$pindiv = '<div class="pinterest-button">';
    	$pinurl = '<a target="_blank" href="http://pinterest.com/pin/create/button/?url='.$posturl.'&media=';
    	$pindescription = '&description='.urlencode(get_the_title());
    	$pinfinish = '" class="pin-it"></a>';
    	$pinend = '</div>';
    	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?) \/>/i';
      	$replacement = $pindiv.$pinurl.'$2.$3'.$pindescription.$pinfinish.'<img$1src="$2.$3" $4 />'.$pinend;
    	$content = preg_replace( $pattern, $replacement, $content );
    	//Fix the link problem
    	$newpattern = '/<a(.*?)><div class="pinterest-button"><a(.*?)><\/a><img(.*?)\/><\/div><\/a>/i';
    	$replacement = '<div class="pinterest-button"><a$2></a><a$1><img$3\/></a></div>';
    	$content = preg_replace( $newpattern, $replacement, $content );
    	return $content;
    add_filter( 'the_content', 'insert_pinterest' );

    and the CSS I want for the image that I edited using Firebug:

    .pinterest-button {
        width: auto;
        float: left;
        overflow: hidden;
    .pinterest-button img {
        display: block;
    .pinterest-button .pin-it {
        display: block;
        width: 105px;
        height: 105px;
        background: url("/wp-content/uploads/2012/07/pinterest-badge.png") repeat scroll 0 0 transparent;
        z-index: 9999;
        bottom: 25px;
        right: 500px !important;
        position: relative;
    .pinterest-button .pin-it {
    .pinterest-button:hover .pin-it {
        display: block;
  4. Andrew
    Forum moderator
    Posted 2 years ago #

    There's no need to post PHP code.
    CSS styles HTML.

  5. brandcaul
    Posted 2 years ago #

    Hi Andrew,

    I see what you're saying. I have tried to edit the CSS and it's just not getting pulled through onto the live site. Thats why I though the PHP might not be allowing any CSS to be applied the Pin it button?

Topic Closed

This topic has been closed to new replies.

About this Topic