Once Coupled
  • About Us
    • Confident
    • Charming
    • Champion
  • Ongoing Support
  • Work With Us!
Home » Welcome » How Can I Link “Jump to Recipe” with My Recipe Plugin?
Home » Welcome » How Can I Link “Jump to Recipe” with My Recipe Plugin?

How Can I Link “Jump to Recipe” with My Recipe Plugin?

Author:

Lauren Gray

Published:

March 25, 2016
September 25, 2016

This site runs ads and generates income from affiliate links. Read my disclosure policy.

Feature Fest is your 6-day crash course to train your team (or future team) and finally glow up your site.

Join Feature fest

Have you seen the beautiful “jump to recipe” link at the top of a post, and wondered how others have achieved this? By adding this link, we are letting readers quickly skip to exactly what they’re looking for.

Do it using JavaScript

The code below was developed for the Genesis framework, so if you’re using another theme, modifications may be needed. When using Genesis, you can paste this into your Theme Settings > Header Scripts.

This script checks if a recipe exists on the page, then inserts a link to that recipe after the header. If multiple recipes exist on the page, this script will only create a link to one recipe.

While some styles have been included, you may have to make changes to work with your own theme!

Looking for another plugin?

Use the directions above to complete this with:

  • Meal Planner Pro
  • WP Ultimate Recipe
  • Zip Recipes

Give me a shout if this helped you out!

How Can I Link "Jump to Recipe" with EasyRecipe?

pssst.. Check out our sister brands!

Small Plugins: optimized custom blocks
Creator Theme: DIY version (coming soon)

Leave a Reply Cancel reply

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

20 responses

  1. Dan Mikesell
    March 28, 2016

    I found your code on GitHub. Exactly what I needed. Of course a few individual style preferences twits.

    If it is ok with you I will share to your code on Food Blogger Pro with a link to Github and your site. This has been quit the discussion for the last week. Please let me know if ok, I won’t do it until I hear.

    Thanks so much for the code.
    Dan

    Reply
    1. Lauren Gray
      March 29, 2016

      Sure thing, Dan. I actually posted the code there originally, in response to a discussion. Since it’s hard to find, I’m sure members would benefit from a more dedicated thread.

      Reply
  2. Mary Ann
    July 1, 2016

    This worked perfectly on my site. I adjusted the color and size a little to fit my site. Already received positive feedback. Thank you!

    Reply
    1. Lauren Gray
      July 1, 2016

      Awesome Mary Ann, that looks great!!

      Reply
  3. Fiona
    July 21, 2016

    Thanks so much for this Lauren! So helpful & easy to implement!

    Reply
    1. Lauren Gray
      July 21, 2016

      I’m glad you found it so, Fiona. 🙂

      Reply
  4. Justin
    September 26, 2016

    Hi Lauren,

    Thanks for providing this code, I think it could be much easier than the manual button we are adding to our recipes now. You can see an example of what we are doing in this post:

    http://realsimplegood.com/pumpkin-chai-latte/

    I was wondering, is there a way to move the button so it will show before the post text instead of appended to the post title?

    I tried changing the code above from this:
    $( ‘.content .entry-title’ ).append
    To this:
    $( ‘.content .entry-title’ ).after

    That moved it below the title but for some reason the css styling was lost when I did that. It just showed up as a tet link and didn’t retain the “button” look. Is there another way to accomplish this move and retain the styling? I basically want to re-create the current button (look and location) we have in our posts.

    Thanks for your help!

    Reply
    1. Lauren Gray
      September 26, 2016

      Justin, your button has custom classes and styles applied to it which are doing the formatting. You’ll want to take the link in the js and add those class/styles. Otherwise, you’d have to add all new CSS to style these automatically inserted links. Here’s what I mean: http://hastebin.com/hamulomawo.scala

      Reply
      1. Justin
        September 26, 2016

        Thanks Lauren. I was able to make some edits and get the button to look exactly like I wanted it!

        I was wondering, is there a similar script that could be used to add a “print recipe” button at the top as well?

        Reply
        1. Lauren Gray
          September 26, 2016

          I have not looked into that recently but wasn’t able to get it to work initially. This can be done with WP Recipe Maker, however: https://www.oncecoupled.com/2016/09/auto-jump-print-buttons-wprm/

          Reply
        2. Lauren Gray
          October 10, 2016

          Justin, I misspoke; I forgot about a previous instance of working with the “print” button in Meal Planner Pro. You’d just need to change a few lines for EasyRecipe support. Here’s where you can see that code: https://gist.github.com/graylaurenm/b0a45e0d3569920c607ca5c4647a0a7c

          Reply
  5. Kristen @ The Endless Meal
    January 22, 2017

    This worked perfectly! I added – border-radius: 25px; – to round the corners and tweaked the color and margins to match my site.

    Thank you so much for this!

    Reply
    1. Lauren Gray
      January 22, 2017

      That looks really great on your site! If you want it to show up under the date, you can change “$( ‘.content .entry-title’ ).append” to “$( ‘.content .entry-header’ ).append” and then update the CSS accordingly. 🙂

      Reply
  6. Kelly – A Side of Sweet
    March 24, 2017

    This seems like just what I was looking for to add this option to my site! By any chance do you know how I could change the code for the new Tasty Recipes plugin? Also is there an easy way to adapt it to add a “print recipe” plugin as well? Thank you SO much!

    Reply
    1. Lauren Gray
      March 31, 2017

      Hey, Kelly, I don’t have anything written for Tasty yet but once they officially launch I’ll make that a priority. The closest solution I have for you is this one: https://gist.github.com/graylaurenm/b0a45e0d3569920c607ca5c4647a0a7c. The printID and jumpID would need to be updated but the rest should, in theory, work the same. This code would replace the content within the “script” tags in this article’s code.

      Reply
      1. Kelly – A Side of Sweet
        March 31, 2017

        Thank you so much for your response! They actually released a code: http://support.wptasty.com/customizing-tasty-recipes/how-do-i-add-a-jump-to-recipe-button

        They actually credit you!

        Reply
        1. Lauren Gray
          March 31, 2017

          LOL I totally forgot Raquel asked if she could modify my code – I’m a mess! Also, if you can do the PHP version I’d definitely recommend that!

          Reply
          1. Kelly – A Side of Sweet
            April 2, 2017

            I would really love to but it’s slightly beyond my technical expertise. I’m going to have a theme redo in the near future so I’m planning to get it built in at that time. Thanks again!

  7. Lauren
    March 31, 2017

    Hi Lauren,

    I’d really like to implement this, but I’m not tech savvy in the least. Do you know how to make this show on one line instead of three separate lines? If I can get that much, I think I’ll be okay. Thanks for any help!

    Reply
    1. Lauren Gray
      April 12, 2017

      Hey, Lauren! Can you send me an email OR re-enable the buttons for me? If I can see what you’re seeing, I will send you some modified code. 🙂

      Reply

Hey, we’re Once Coupled!  We empower publishers to create great content without tech headaches.

  • YouTube
  • TikTok

Customization Tiers

Confident
Charming
Champion

Our Brands

Contact Once Coupled
Creator Theme
Small Plugins

Legal

Privacy Policy
Disclosure Policy
Cookie Policy