Filter: Add a Pin It button before the recipe

If you want to inject a Pin It button above your recipe card, you can do so by adding the following snippet to your theme's functions.php file.

***Before doing this, make sure that you have access to your site's files via FTP (the editor in WordPress is not sufficient in case problems arise) and that you are comfortable with editing your functions.php file. Any minor error in the functions.php file can result in the “white screen of death,” which is easily fixed via FTP but is difficult to fix otherwise (and a nuisance as your site will be unavailable until fixed).***

add_filter( 'tasty_recipes_before_recipe', function( $before_recipe ){
	if ( tasty_recipes_is_print() ) {
		return $before_recipe;
	}
	$before_recipe = str_replace( 'button', 'button share-print', $before_recipe );
	return '<div class="recipe-sharing">' . $before_recipe . '<a class="share-pin" data-pin-custom="true" href="https://www.pinterest.com/pin/create/button/">Pin Recipe for Later</a></div>';
});

You also need to ensure that you are including pinit.js  in the head section of your page. See Pinterest's documentation to get this script.

The code provided above inserts a link before your recipes that says “Pin Recipe for Later.” You can change this text, but please be very careful when changing the text to ensure that you do not break the PHP. If you are interested in styling it to look more like a button, you can use the .share-pin  class to target it. Here's an example of what that might look like:

.share-pin {
    background: #797B7C;
    color: white;
    padding: 0.5em 1em;
    text-decoration: none;
    cursor: pointer;
}

Feel free to customize and change that to match your theme. You can add the CSS to the Additional CSS area of the customizer or to your tasty-recipes.css file.

Please note that adding this Pin It button may change the look of your recipe card as it inserts an inline link just below your print button. If you are using one of the provided recipe cards, you may also want to make the following CSS changes:

.tasty-recipes-display {
    margin-top: 1em;
}

.tasty-recipes-print-button {
    margin-top: 3.7em;
}

The values above may need to be adjusted depending on the CSS that is included with your blog's theme as well as which recipe card you are using.

Here is what all of these changes results in on one of our test sites: