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:

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:

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

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

20 responses

  1. Dan Mikesell

    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

      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

    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

      Awesome Mary Ann, that looks great!!

      Reply
  3. Fiona

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

    Reply
    1. Lauren Gray

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

      Reply
  4. Justin

    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

      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

        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

          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

          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

    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

      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

    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

      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

        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

          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

            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

    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

      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.