In Genesis Slack a user asked,
Is there an easy way to add a div id to a plugin without editing the plugin files? I’d love to wrap all EasyRecipe recipes in the same div id so I can jump to them within a post. Right now the plugin does assign an id, but it’s unique to each recipe, which makes it difficult to add a single “Jump to Recipe” button that works across the board in my theme.
EasyRecipe plugin’s div when present in a entry like a Post or a Page has a unique ID like easyrecipe-730-0
where 730 is the ID of that Page or Post.
We can construct a hyperlink with the URL pointing to the unique hash link for a given entry and display it above the content using the get_the_ID()
function in Genesis.
Step 1
Add the following in child theme’s functions.php:
add_action( 'genesis_entry_content', 'sk_jump_to_recipe', 7 );
/**
* Add a Jump to Recipe button above entry content on single entry pages when EasyRecipe plugin is active.
*/
function sk_jump_to_recipe() {
if ( ! ( is_singular() && class_exists( 'EasyRecipe' ) ) ) {
return;
}
echo '<a href="#easyrecipe-' . get_the_ID() . '-0" class="recipe button">Jump to Recipe</a>';
}
Update: If you’d like to limit the automatic addition of the button to only posts that have been assigned to a particular category say, Recipes
then use the following code instead:
add_action( 'genesis_entry_content', 'sk_jump_to_recipe', 7 );
/**
* Add a Jump to Recipe button above entry content on single post pages belonging to "Recipes" category when EasyRecipe plugin is active.
*/
function sk_jump_to_recipe() {
if ( ! ( is_singular( 'post' ) && in_category( 'recipes' ) && class_exists( 'EasyRecipe' ) ) ) {
return;
}
echo '<a href="#easyrecipe-' . get_the_ID() . '-0" class="recipe button">Jump to Recipe</a>';
}
Step 2
Add the following in child theme’s style.css:
.recipe.button {
margin-bottom: 20px;
}
Tip: If you would like set up smooth scrolling to the recipe sections after clicking on the Jump to Recipe buttons follow this tutorial.
[…] 1 min ago 0 View Share Tweet Pinit Google+ Email (adsbygoogle = window.adsbygoogle || […]
I love your tutorials!
For some reason the button is not showing on my site. I’ve added the code correctly to my functions.php and style.css. Any ideas?
Thanks!
Can you provide the URL of your site?
Hi Sridhar!
Thanks for the tutorial. Works great. Have a question though. When I jump to the recipe, the recipe div is outlined in blue and I can’t figure out how to remove it. I have tried removing the border from the a element in easyrecipe, but not working.
Any ideas?
Can you provide the URL of your site?
Hi Sridhar…I have used your code before and it has worked great. I am working on a new site and have added the code as before and the jump to recipe link is not displaying.
Any ideas? The site is the one submitted with my comment.
Thanks!
Hi Charissa,
I just tried the code and it worked fine in unmodified Brunch Pro 2.1.1. In the CSS I set
display: inline-block;
for.recipe.button
but that shouldn’t make a difference.Screenshot: http://d.pr/i/gxm8
You may want to review your customizations and/or any possible conflicting plugins like Genesis Simple Hooks.
If you still need help, I can look into it. Contact me via http://GenesisCustomizations.com/.
ok…thanks! I will check my code.
Hi Sridar – thanks for this! I tried it on my site and I just got a black bar under the post title which if you scroll over turns gray with black letters (so hard to read) but otherwise works as far as linking to the actual recipe further down. Any ideas on how to change the color/font so it’s not just a black bar/more legible? Thanks!
Also, is there any way to code it so that it would show up under the first photo of a post?
Add the following in your site’s child theme’s style.css:
Hi Sridar – thanks for the speedy response! I added that code to the style sheet but nothing seemed to change (still showing up as a black box). Any other ideas?
Thanks very much.
Actually it seems to be working now. Is there any way to have it show up after the first photo of every post instead of right below the post title? Thanks again!
Not easy/straightforward to do when the image has been inserted within the body of the post. If it’s ok to show the featured image instead, it is possible.
Hmm yeah that would probably be possible. But anyway no worries! Thanks for all the help Sridhar!
Hello Sridhar, I don’t know if you’re still checking these comments, but I just came across this article and tried implementing the codes as specified, but it doesn’t seem to be working for me. I’m using the Brunch Pro theme with Genesis and EasyRecipe Plugin. Any help would be appreciated!
Thank you!