How to Add Jump to Recipe Button in WordPress

Want to add a “Jump to Recipe” button in WordPress? We can do this the easy way or the hard way:

• The easy way: using a recipe plugin
• The hard way: coding buttons from scratch

If you choose the easy way (why wouldn’t you?), you’d be doing yourself a favor. Here’s why:

• Using a plugin ensures consistency in formatting and design elements, whereas manual coding can lead to errors and inconsistencies. 
• Plugins can also save time by automating certain tasks and offer a wide range of customization options that may not be available with manual coding. 
• Finally, plugins are often updated regularly to ensure compatibility with the latest versions of WordPress and other plugins, which can help prevent conflicts or issues with your site.

If you’re confident in your ability to code in WordPress, we’ve provided instructions on how to manually add a Jump to Recipe button. 

Adding a jump to recipe button with a plugin

Jump to Recipe and Print Recipe buttons at the top of a blog post or page leads to a good user experience on your site, which in turn helps with SEO.

Tasty Recipes makes it easy for food bloggers to include these buttons at the top of every recipe. In fact, just by using our recipe template, it will automatically add Jump to Recipe and Print Recipe snippets to your posts.

No need to mess around with recipe shortcodes, page builders like Elementor, or HTML text (which is required by Squarespace). And no step-by-step tutorial is even needed!

You can choose to enable both the print and jump buttons, just one or neither. To set this up, just go to Settings → Tasty Recipes in your WordPress dashboard. Rather than making a smooth scroll to the recipe card, clicking this button will “jump” users down the page to your recipe. 

As you can see in the screenshot below, both of these buttons are categorized as Quick Links. These are the displaying options available in the backend:

If one of the ‘Show' options are selected, then the link(s) will show below the post title and meta area, as seen below:

The buttons will pick up your default theme styling, which means your button will look “at home” on your site. 

However, if you'd like to customize them, it's easy to do with CSS. Please note that Mediavine ads may be affected by the Jump to Recipe button, which could affect your ad revenue. If you need help or have questions about this feature, our support team is here for you!

Create a jump to recipe button in WordPress the hard way

To add “Jump to Recipe” in WordPress without a plugin, you can follow these steps:

1. First, navigate to the recipe page on your blog and locate the point in the post where the recipe instructions begin.

2. Next, add an HTML anchor tag just above the recipe instructions. You can do this by adding the following code: <a name=”recipe”></a>. This will create an anchor point named “recipe” just above your recipe instructions.

3. Then, add a link at the top of your post that points to the anchor point you just created. You can do this by adding the following code: <a href=”#recipe”>Jump to Recipe</a>. This will create a link at the top of your post that, when clicked, will jump the reader directly to the recipe instructions.

4. Preview your post to ensure that the link works correctly and that readers are taken directly to the recipe card when they click the “Jump to Recipe” link.

Tasty Recipes: the ultimate WP recipe maker plugin

Tasty Recipes is a top-of-the-line WordPress plugin that improves your readers' experience and makes it easy to add a recipe in WordPress, freeing you up to focus on the fun stuff! 

Our recipe plugin works with any WordPress theme and includes schema markup for beautifully displayed recipes in search results. You’ll also have mobile-friendly printable recipes, Pinterest and social media integration, as well as structured data that engages search engines, and so much more. 

Plus, the 14-day money-back guarantee makes it a risk-free investment.