How to Add a ‘Jump to Recipe’ Button in WordPress (2 Easy Ways)

Food bloggers often ask us about features that make the biggest difference for their readers.

After observing many food blogs over the years, we’ve found that adding a jump to recipe button is one of the most effective improvements you can make.

It’s a small change that goes a long way in helping visitors quickly find what they’re looking for. Plus, it’s simple to set up on any WordPress site.

We tested different solutions and found two reliable methods that work consistently well. Both methods are beginner-friendly and will have your jump to recipe button working in just a few minutes.

Why Add a Jump to Recipe Button in Food Blog Posts?

A “Jump to Recipe” button is a navigational link placed at the top of a blog post. Technically, it functions as an HTML anchor that instantly scrolls the browser down to the recipe card, skipping the introductory content.

Readers often complain about scrolling through long stories and ads to find ingredients. While long-form content helps with monetization, many visitors need immediate access to instructions while cooking or shopping.

Adding this button allows you to serve both types of readers. You can maintain your personal storytelling for loyal fans while providing a fast shortcut for users who need answers quickly.

This improves the overall user experience (UX) on your site. When users can find what they need easily, they are less likely to bounce back to search results.

With that in mind, we will show you 2 easy ways to add a Jump to Recipe button to your food blog: using a WordPress recipe maker plugin and custom code. You can use the quick links below to skip to your preferred method:

Method 1: Use WP Tasty Recipes to Add a Jump to Recipe Button (Recommended)

The easiest way to add a Jump to Recipe button in WordPress is by using WP Tasty Recipes.

This recipe card and maker plugin has been extensively tested by us, and we’ve uncovered many features that make it a favorite among food bloggers.

Beyond the Jump to Recipe button, Tasty Recipes allows you to make your recipes printable and converts them into the reader’s preferred unit of measurement effortlessly.

Additionally, you can clearly display nutritional data, cook time, serving size, and user ratings, all in a neat and organized manner.

If you’re interested in learning more about the plugin’s capabilities and how it can benefit your blog, be sure to check out our comprehensive review of WP Tasty.

One downside of this recipe plugin is it doesn’t come with a free version, but it’s a great investment for serious food bloggers who want to make money online.

Now, to use the plugin, you first need to purchase a paid plan. You can either go with the WP Tasty All Access Bundle or the standalone Tasty Recipes plugin.

Once you have made a purchase, you can download the plugin and install it on your WordPress website. You can read our guide on how to install a WordPress plugin for more information.

After that, go to WP Tasty » Dashboard from your WordPress admin and click on ‘Enter License.’

Next, insert your plugin’s license key, which WP Tasty should have sent you to your email after you made a purchase.

Then, select either ‘All Plugins’ or ‘Tasty Recipes’ in the Plugin(s) to activate the dropdown menu. Click ‘Save License.’

With that done, go to the WP Tasty » Tasty Recipes page from your WordPress dashboard and switch to the ‘Settings’ tab.

By default, the options for the Jump to Recipe and Print Recipe buttons will be checked, so you can leave them as they are.

One thing you can change about the buttons is the Quick Links Style.

WP Tasty can also display the Jump to Recipe option as a regular text link instead of buttons. If you prefer, you can select ‘Links’.

But of course, you can also just choose the Buttons option if that’s your preference.

The Buttons option also looks more eye-catching, making it easy for readers to spot it.

There are actually a lot more settings to play around with here, like enabling checkboxes for the ingredient list and recipe scaling. Be sure to check off the options that best suit your blog.

Once done, just scroll down the page and click ‘Save Changes.’

Now, whenever you use WP Tasty’s recipe card, the Jump to Recipe and Print Recipe buttons at the top will show up.

To use the recipe card, you can create a new recipe post or edit an existing one using the Gutenberg block editor. Then, you can follow this step-by-step guide on how to add a recipe card block in WordPress for more information.

One benefit of using Tasty Recipes to add the jump link is the smooth scroll effect. This way, readers can navigate directly to the recipe instructions without any jarring jumps on the page.

Using custom code to achieve this effect is complicated because it usually requires JavaScript or editing theme files. That is why we recommend the plugin method for most users.

That being said, if you want to add a Jump to Recipe button for free, then you can try this next method.

Method 2: Use Custom Code to Add a Jump to Recipe Button (Free)

Adding a Jump to Recipe button manually may sound intimidating for complete beginners, but don’t worry, as we will walk you through each step carefully.

If this is your first time adding custom code to WordPress, then we suggest using a code snippet plugin like WPCode.

We’ve tested the plugin extensively, and it offers a safe and straightforward way to insert code snippets without editing theme files. This minimizes the risk of accidentally breaking your website’s layout or functionality.

Curious about what else WPCode can do? Check out our easy-to-follow review where we break down its features and explain why it’s a great tool for WordPress users.

To use WPCode, go ahead and install the plugin in your WordPress admin dashboard. You can read our step-by-step guide on how to install a WordPress plugin for more details.

Next, go to Code Snippets » + Add Snippet. Here, select ‘Add Your Custom Code (New Snippet)’ and click ‘Use snippet.’

There are two code snippets you need to add separately into WPCode. Let’s go through them one by one:

Add a Code to Automatically Insert the Jump to Recipe Button

The first code snippet will automatically add the Jump to Recipe button in all blog posts containing a recipe section. For this, you can name your snippet ‘Add Jump to Recipe Button Automatically.

Then, select ‘PHP Snippet’ in the Code Type drop-down menu.

In the Code Preview box, go ahead and insert the following lines of code:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Let’s go through how this code works.

The first part of the code checks your blog post content. It looks specifically for a heading tag (H1 through H6) that has an anchor ID set to ‘recipe’.

The second part, the function named add_jump_to_recipe_button, is responsible for adding the actual button to your post.

If the code finds the ‘recipe’ anchor ID, it creates the HTML code for the jump button. Then, it inserts this code right before the content of your blog post.

This way, the code can automatically check for the recipe heading and add the button if needed.

With that being said, you will have to add a #recipe anchor to the recipe section of your blog post. Don’t worry, we will show you how to do that later on.

Now, scroll down to the ‘Insertion’ section and make sure the ‘Auto Insert’ method is selected. As for the Location, you can choose ‘Frontend Only’ so that the code only runs on the front-facing part of your WordPress website.

Then, toggle the button at the top right corner to make the code ‘Active’ and click ‘Save Snippet.’

Add a Code Snippet to Style the Jump to Recipe Button

We will now add custom CSS code to style your call-to-action button. Go ahead and repeat the steps to create a new custom code snippet in WPCode and give it a simple name, like ‘Style Jump to Recipe Button.’

As for the Code Type, select ‘CSS Snippet.’

Now, we have created a CSS code that will make our button green and the text in it white. Like so:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

If you want to use different colors, then you can just replace the hex codes in the code above.

Once you have inserted the code, scroll down to the Insertion section and select ‘Auto Insert’ as the Insert Method. Then, choose ‘Site Wide Header’ as the Location.

All you need to do next is activate the code snippet and click ‘Save Snippet.’

Add the #recipe Anchor to Your Recipe Blog Posts

Even though you have activated the two code snippets, the jump button won’t appear unless you add a #recipe anchor to the recipe section of your WordPress blog posts. So that’s what we’re going to do now.

First, create a new recipe blog post or open an existing one in the block editor.

Now, in our example, we are using a heading tag (H2) to signal the recipe section of our blog post. We suggest you do the same just so that it’s easier for users to find it when they read your post. Search engines also appreciate when your blog content has an organized structure.

Go ahead and click the Heading block of your recipe section. Then, in the Block settings sidebar, open the ‘Advanced’ menu. Next, type ‘recipe’ into the HTML Anchor field. Make sure to use all lowercase letters.

This will serve as an anchor link for the jump button.

With that done, click ‘Publish’ or ‘Update.’

If you preview your website on mobile or desktop, you should now see a Jump to Recipe button on top of your blog content after the post title.

Bonus Tips to Improve Your Food Blog’s User Experience

Beyond the Jump to Recipe button, there are other design elements you can use to make your food blog more user-friendly. Here are a few high-impact improvements:

Frequently Asked Questions About WordPress Buttons

Here are some questions that our readers have frequently asked about adding buttons in WordPress:

How do I add links to buttons in WordPress?

To add a link, select the Buttons block inside the WordPress editor. Click the link icon in the toolbar that appears above the button, then paste your destination URL into the field.

How do I add a “Go to Top” button in WordPress?

The easiest method is installing a plugin like WPFront Scroll Top. Once activated, it automatically adds a button that appears when a user scrolls down, allowing them to quickly return to the top of the page.

To get started, see our tutorial on adding a scroll to top effect in WordPress.

How do I add a follow button on a WordPress blog?

You can add follow buttons using the built-in Social Icons block in the block editor. Simply search for “Social Icons,” add the block, and click the “plus” icon to select which social media platforms you want to link to.

For more information, take a look at our guide on how to add a Facebook follow button for authors in WordPress.

How do I put a popup on WordPress?

We recommend using OptinMonster to add popups. It allows you to design custom popups using a drag-and-drop builder and control exactly when they appear, such as when a user is about to leave your site.

We hope this tutorial helped you learn how to add a Jump to Recipe button in WordPress. You may also want to check out our guide on key design elements for an effective WordPress website and how to set up online food ordering in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.