Improve your user’s experience with a Jump to Recipe button! Follow this easy tutorial to learn how to add one to your WordPress site today.
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.
How to Add a Jump to Recipe Button in WordPress
Add a Jump to Recipe Button With a Plugin
Jump to Recipe and Print Recipe buttons at the top of the page can greatly improve the user experience of 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 post that includes a recipe. In fact, just by using our recipe template, it will automatically add Jump to Recipe and Print Recipe snippets to your posts. There’s no need to mess around with recipe shortcodes, page builders like Elementor, or HTML text (which is required by Squarespace).
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. Mediavine ads may be affected by the Jump to Recipe button. If you need help or have questions about this feature, our support team is here for you!
Add a Jump to Recipe Button 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 simplifies recipe publishing, 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.
Looking for more tutorials? We’ve got you covered:
How to Add Cook Mode to Recipe Blogs