ThemeShaper Forums » Thematic

[closed]

Adding Pinterest button

(13 posts)
  • Started 7 years ago by cookieandkate
  • Latest reply from cookieandkate
  • This topic is resolved
  1. Hello! I've wanted to add a pinterest "pin it" button to the end of my posts for a while now, and finally found a reliable resource that explains how to do it. They provide the required code, but I am not good at writing action hooks, so I am hopeful that you may be able to explain how to make this happen. I've copied and pasted the relevant instructions below, from http://www.clickinmoms.com/blog/add-a-pinterest-pin-it-button-to-all-of-your-posts/.

    Simply copy and paste the code (in orange) below in one of the following places:

    Inside the loop of your post template file (typically single.php, single-post.php, single-photo.php, or something similar) OR
    Using an action hook — depending on how much of a geek you are, this may be a bit much, but many WordPress themes come with features that make the addition of hooks a simple cut-and-paste.

    <div><img class="aligncenter" src="http://www.clickinmoms.com/cmprodaily/wp-content/uploads/2011/09/pinit.jpg" alt="Pin It" /></div>

    Any ideas how to insert that into a new hook on my functions.php page? Your help is much appreciated. Thank you!

    Kate

    Posted 7 years ago #
  2. proto
    Member

    Hey cookieandkate,

    You can use an action hook to add this below each of your posts.

    I have just tested the following code and it worked fine for me. Add the following code to your child theme"functions.php" file.

    //--- Adding Pin it button below posts
    
    function webmagic_adding_pinterest() {
    echo ("<div id=\"pinterest\"><a href=\"javascript:void((function()
    {var%20e=document.createElement('script');e.setAttribute
    ('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute
    ('src',
    	'http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random
    ()*99999999);document.body.appendChild(e)})());\"><img class=
    \"aligncenter\"
    	src=\"http://www.clickinmoms.com/cmprodaily/
    wp-content/uploads/2011/09/pinit.jpg\" alt=\"Pin It\" />
    </a></div>");}
    
    	add_action('thematic_belowpost', 'webmagic_adding_pinterest');

    I wondered if it might be helpful to explain this briefly, I promise what I'm doing is actually straightforward. Apologies if this over basic as clearly you're intelligent and already have built a great website or two, but please bear with my analogy! Imagine a pristine white wall in front of you, action hooks are like small black velcro rectangles in various places on this white wall (where these rectangular velcro boxes are depends on the theme and how it's been constructed). If you want to add something to those strategically places pieces of velcro, you 'hook' your action (code) onto one of those pieces of velcro.

    In this case we imagine the white wall that is Thematic, we want to know where all the inbuilt rectangular velcro hooks are placed for this theme - see all of them here: http://visualizing.thematic4you.com/ You can see there's one called "thematic_belowpost()". If you look at the code above and see the last line " add_action('thematic_belowpost', 'webmagic_adding_pinterest');" we've literally just said add our action to the thematic_belowpost, in this case I made up a name for the function "webmagic_adding_pinterest" - call this whatever you want.

    Incidentally, I've added a div id to the default code "pinterest" so you can target it in your css. You may or may not want to do this. Also, if you want to align it left / right etc obviously amend the code accordingly that currently says aligncenter.

    As a vegetarian your website looks awesome by the way, I wasn't even hungry until seeing all that delicious food!

    There are many talented people advising on here, who may have a better suggestion, but that's how I'd go about it!

    Hope the above helps :)

    Posted 7 years ago #
  3. proto
    Member

    PS - Please add the code so it's within the php tags in your functions.php file, as follows:

    <?php <Copy and paste the code above here> ?>

    Posted 7 years ago #
  4. if you only want the pinterest pin to appear on single posts (As opposed to single posts and everywhere it appears as an excerpt.. like in archives) then i think you should wrap that in some conditional logic.

    check out: http://visualizing.thematic4you.com/

    thematic_belowpost happens on archive pages.

    so i'd modify the above as:

    //--- Adding Pin it button below posts
    
    function webmagic_adding_pinterest() { 
    
    if(is_single()): ?>
    
    <div id=\"pinterest\"><a href=\"javascript:void((function()
    {var%20e=document.createElement('script');e.setAttribute
    ('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute
    ('src',
    	'http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random
    ()*99999999);document.body.appendChild(e)})());\"><img class=
    \"aligncenter\"
    	src=\"http://www.clickinmoms.com/cmprodaily/
    wp-content/uploads/2011/09/pinit.jpg\" alt=\"Pin It\" />
    </a></div>
    <?php
    endif;}
    
    add_action('thematic_belowpost', 'webmagic_adding_pinterest');

    use is_singular if you'd like to include pages as well as single blog posts.

    Posted 7 years ago #
  5. Thank you both so much for your help! Proto, that's the best explanation of hooks I've ever read. Helga, you're right, I only want the pinterest button my single posts.

    I pasted Helga's code into my functions.php as directed and saved the file without any error messages. However, I don't see the button on any of my posts! It's in the source code but not visible on the page. Do you know what could be wrong?

    Also, I noticed that the button code is placed after the list of categories/tags/comments, but I'd like it to appear above that, near my current row of social media icons? Is that possible?

    Thanks again for your help!
    Kate

    Posted 7 years ago #
  6. Actually, the code I inserted did cause a problem--it pushed the widgets in my sidebar down below the content of the post, and a little further to the right. I deleted the code for now.

    Posted 7 years ago #
  7. proto
    Member

    Hello all,

    Helga's code is great in that you can have it appear selectively on single posts.

    Cookieandkate, Helga has helped me out of many a scrape on here! Helga - am I right in the code you posted it's just missing some PHP tags and an echo!? (At this point I know Helga will probably 3 know different ways to do it!). However, I tested the following amended code cookieandkate for making it appear on single posts and it works just fine:

    //--- Adding Pin it button below posts
    
    function webmagic_adding_pinterest() { 
    
    if(is_single()): ?> <?php
    
    echo ("<div id=\"pinterest\"><a href=\"javascript:void((function()
    {var%20e=document.createElement('script');e.setAttribute
    ('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute
    ('src',
    	'http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random
    ()*99999999);document.body.appendChild(e)})());\"><img class=
    \"aligncenter\"
    	src=\"http://www.clickinmoms.com/cmprodaily/
    wp-content/uploads/2011/09/pinit.jpg\" alt=\"Pin It\" /></a>
    </div>")?>
    <?php
    endif;}
    
    add_action('thematic_belowpost', 'webmagic_adding_pinterest');

    Please add the code so it's within the php tags in your functions.php file, as follows:

    <?php <Copy and paste the code above here> ?>

    In terms of where it appears try the code above. If it's not appearing where you'd like after first trying the code above you can choose the priority of which code is displayed first by slightly amending the last line in your code. See the code below:

    add_action('thematic_belowpost', 'webmagic_adding_pinterest', 3);

    The number 3 above is used to sort actions when thee are several added to a specific action hook. The lower the number is, the earlier the function will be executed, so if you need to make sure something happens before something else, the number you put here would do that for you. So say you had social media links on the same hook with 4 and you used the code above that specifies 3 - the pin it button would appear first.

    Thanks for your kind compliment re explaining hooks. I used to think it was some dark art where you had to whisper incantations and wear face paint etc to get them to work but actually they're more straightforward than I ever thought. They sit there ready on that white pristine wall ready if we ever choose to 'hook' onto those black rectangular velcro squares. Helga uses the analogy of cars and parking spaces (there's too many good analogies to choose from!) But as a British person who uses two pedal wheels (bicycle) rather than four, I use the pristine white wall and small black velcro squares analogy! :)

    Posted 7 years ago #
  8. i don't see it in the source code. but roasted brussel sprouts... swoon.

    idk if addthis has any filters you can use, but they are almost assuredly filtering in to the end of the_content() which is what you'd have to do to get your icon up there instead of on the thematic_belowpost hook.

    proto, i'll have to remember that metaphor. no one ever seemed to get my parking lot metaphor.

    Posted 7 years ago #
  9. You are both incredibly helpful. Thank you.

    The good news is that Proto's code works, and the button functions just as it should.

    The bad news is that the button appears far below the other social media icons, even if I set the priority to 1.

    Both the AddThis plugin and the PrintFriendly plugin, which produces the PRINT link somehow filter into the end of the_content() as Helga suggested. Any idea how to filter the Pin It button in there as well? This is way over my head.

    Thank you!
    Kate

    Posted 7 years ago #
  10. this should filter into the content. i set a high priority to hopefully ensure it is last, but who knows.

    function webmagic_adding_pinterest($content) { 
    
    if(is_single()):
    
    	$content = $content ."<div id=\"pinterest\"><a href=\"javascript:void((function()
    	{var%20e=document.createElement('script');e.setAttribute
    	('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute
    	('src',
    		'http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random
    	()*99999999);document.body.appendChild(e)})());\"><img class=
    	\"aligncenter\"
    		src=\"http://www.clickinmoms.com/cmprodaily/
    	wp-content/uploads/2011/09/pinit.jpg\" alt=\"Pin It\" />
    	</div>" ;
    endif;
    return $content;
    }
    add_filter('the_content', 'webmagic_adding_pinterest',99);
    Posted 7 years ago #
  11. You are brilliant, Helga! The button is much closer to being in line with the other plugins now. It's showing up about an inch below AddThis and Print Friendly. Do you think I could scoot it up with CSS or is there a better way to do it?

    Thanks again! You are always so helpful.

    Posted 7 years ago #
  12. yes you can toy w/ the CSS to get them fairly lined up

    http://www.diigo.com/item/image/1xt6v/8p7d

    .printfriendly.alignright, #pinterest, .addthis_toolbox {
        float: none;
        margin: 0 !important;
        display: inline-block;
        *display: inline;
        zoom: 1;
        vertical-align: middle;
    }
    
    #pinterest img { margin: 0;}
    Posted 7 years ago #
  13. The button looks and works perfectly now! Thank you SO much for your help!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.