WordPress.org

Ready to get started?Download WordPress

Forums

Pinterest Hover Button (5 posts)

  1. brandcaul
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year ago #

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

  3. brandcaul
    Member
    Posted 1 year ago #

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

    And here's the code:

    PHP:

    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 {
        position:relative;
        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 {
        display:none;
    }
    .pinterest-button:hover .pin-it {
        display: block;
    }
  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. brandcaul
    Member
    Posted 1 year 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