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.