Table of Contents
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!
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
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.
This worked perfectly on my site. I adjusted the color and size a little to fit my site. Already received positive feedback. Thank you!
Awesome Mary Ann, that looks great!!
Thanks so much for this Lauren! So helpful & easy to implement!
I’m glad you found it so, Fiona. 🙂
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!
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
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?
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/
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
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!
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. 🙂
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!
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.
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!
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!
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!
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!
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. 🙂