How to add a Jump to Recipe button when using EasyRecipe in Genesis

Posted on

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.