How to add Instagram to the Cookbook recipe card

We’ve recently noticed many food bloggers are adding a nifty Instagram call to action (CTA) to their recipe cards promoting their Instagram feed and branded hashtags. With Instagram being the number one social platform for engagement, we think this is a great idea and we’re going to show you how to do it with Cookbook.

How to add an Instagram CTA to Cookbook in 3 easy steps

  • Make sure you take a full backup of your WordPress site as you’ll be working with the function.php file.
  • Make sure you’re comfortable making PHP changes to your theme. A syntax error in a PHP file will result in what is called the “white screen of death.” We don’t want that!
  • Make sure you log into your server through sFTP/FTP to do the PHP edits.  Please…I stress…please don’t do them via the WordPress editor. If by chance there’s a syntax error (white screen) you’ll be in the right place to quickly fix it and get your site back up without anyone missing a thing.
  • Make sure you’re comfortable editing CSS. The CSS provided will act as a good starting point for your recipe card but it may need to be customized for your website.

Step 1 – Enqueue Font Awesome

For this tutorial, we used Font Awesome for the Instagram icon. If your theme isn’t already using this font you’ll have to enqueue it in the functions.php file.

How to Enqueue Font Awesome

Step 2 – Hooking the Instagram Notice

The following snippet of code should go into your function.php file.

add_action( 'cookbook_recipe_after', 'cookbook_recipe_instagram', 10 );
/**
* Display the Instagram Information.
*/
function cookbook_recipe_instagram() {
echo '<div ' . cookbook_get_attr( $recipe, 'instagram' ) . '>';
echo '<i class="fa fa-instagram fa-5x fa-pull-left"></i>';
echo '<h4>Did you make a recipe?</h4>';
echo '<p>Tag <a href="http://instagram.com/cookbookplugin" target="_blank">@cookbookplugin</a> on Instagram and hashtag it <strong>#cookwithcookbook</strong>.</p>';
echo '</div>';
}
view raw functions.php hosted with ❤ by GitHub

This code creates a new function called cookbook_recipe_instagram which is added to the recipe card through the cookbook_recipe_after function (a hook already available in the Cookbook plugin.) To see all the hooks available to you, download and install our free Cookbook Hook Guide from the WordPress repository.

  • fa fa-instagram will add the icon to the card
  • fa-5x will add the icon size
  • fa-pull-left will float the icon to the left

Step 3 – Add a little style

 

body .cookbook-instagram {
background: #333;
color: #fff;
margin: -20px auto 0;
padding: 20px;
}
body .cookbook-instagram h4 {
color: #fff;
margin: 3px 0 5px;
}
body .cookbook-instagram a {
color: #fff;
text-decoration: underline;
}
body .cookbook-instagram a:focus,
body .cookbook-instagram a:hover {
color: #55585a;
}
body .cookbook-instagram p {
margin-bottom: 0;
}
@media screen and (min-width: 500px) {
body .cookbook-instagram {
margin: -20 auto 0;
padding: 45px;
}
}
view raw style.css hosted with ❤ by GitHub

The styling example above is pretty straightforward but will give you a solid starting point when customizing it for your own website.

TIP: Under the .cookbook-instagram CSS class selector, the margin rule positions the Instagram CTA at the bottom of the recipe card and the padding adds a little breathing room.

And that’s it! You now have a beautiful Instagram CTA at the bottom of each and every recipe card you publish with Cookbook.

If you hop on over to this blog post you can see what we did with our Instagram CTA. You’ll also get a sneak peek at one of the new recipe card templates we’ll be releasing soon!

Cookbook makes your recipes shine!

Special offer for visiting our site today: Save $10 on your Cookbook order by using promo code SAVE10 at checkout!

Order Cookbook Now!

Ryan Sullivan

Written by Ryan Sullivan

Hi there! I’m Ryan. I started working with WordPress as a freelancer in 2009, and things have kind of snowballed since then. I now have a small team of ten and we do cool things like provide amazing WordPress support and build WordPress useful WordPress plugins.

5 Comments

  1. Soffia Wardy,

    The style code above does not seem to be working, can you tell me exactly where to put it. I assume it’s meant to be placed somewhere in the style.css?

    When do you think you will have the new recipe card templates available.

    Thanks so much!

    1. Krista McPhee,

      If you are running a child theme you will add the CSS to the style.css file, anywhere above the media queries. If you have any caching enabled you may need to flush in order for the CSS changes to apply to the Cookbook recipe card.

      I had a quick peek at your site and I’m not seeing a Cookbook Recipe card or the code added to the stylesheet. If you send me a support ticket with a link to the Cookbook recipe card I’ll be happy to take a look.

  2. Soffia Wardy,

    Hi Krista,

    Thanks so much, I flushed the cache and it worked. I am running it on a Staging site as I am currently using another recipe plugin and working on changing over.

    Do you have a timeframe on the new recipe card templates you mentioned in your blog post.

    I really appreciate your time and expertise!

    Soffia

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

People, not ingredients, on our list.

Hungry for the inside scoop about upcoming features and deals? Take a seat at the table by signing up for our email list and be the first to know when we've got something new to tell.
  • This field is for validation purposes and should be left unchanged.