Support » Themes and Templates » Pinterest Hover Button

  • 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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • No way to answer that without seeing the site to see what’s going on with the CSS code.


    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="'.$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;

    Moderator Andrew Nevins


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

    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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Pinterest Hover Button’ is closed to new replies.