Save This has arrived!

How to add Save This to a Recipe Card

Table Of Contents

The Save This shortcode can be used to add the Save This form in your Recipe card. This lets you add the form at the top or bottom of the card, or even in the middle.

Note! Adding the shortcode to your recipe will not prevent Save This from auto-inserting in your content. If you don’t want two forms shown on a given post, be sure to uncheck the box for “Posts” in Hubbub > Save This > Enable Post Types.

A screenshot of the Save This Enable Post Type settings, showing the Post and Page boxes unchecked.

WP Recipe Maker #

You can use WPRM’s Template Editor to add the shortcode exactly where you’d like.

Go to WP Recipe Maker > Template Editor, and click Recipe Templates:

A screenshot of the template editor selection where you can choose to edit recipe templates, snippet templates, or roundup templates.

If you’re not already using a custom template, click the name of the template you’re currently using, and then click “Clone & Edit Template.”

Screenshot of the Default Template list and a button to clone and edit that template.

If you are already using a custom template, select it from the “Your Own Templates section” and click “Edit Template.”

A screenshot of the custom templates list and a button to edit the selected template.

Once you open the editor, click “Edit HTML” to view the code of the template.

A screenshot of the Edit HTML view.

The recipe template is made up of shortcodes which all follow a format in [brackets]. So you can “read” the names of each to figure out which parts of the recipe card each one outputs.

Decide where you’d like to add the Save This form, and add the shortcode [hubbub_save_this], like this:

A screenshot with the save this shortcode added to the HTML.

The preview below should auto-refresh and include Save This. (If you don’t see Save This, double-check that the Tool is enabled in Settings > Toolkit and you have an active Pro+ license.)

Once you’re happy with the location, click “Save Changes” in the top-left corner.

Finally, if you changed Templates as part of this process, go to WP Recipe Maker > Settings > Recipe Template > Default Recipe Template, and select the new Template in the drop-down.

A screenshot of the default recipe template setting.

Double-check that everything looks good on the front-end of your site, and then be sure to clear all caches.

Need to tweak the styling? Here’s how to add custom CSS to the form.

Tasty Recipes #

Tasty Recipes has two locations where we can insert Save This using a small code snippet.

First, you’ll need to install a plugin for adding code snippets if you don’t already have one. We recommend the Code Snippets plugin.

Then go to Snippets > Add New and set up a new snippet.

A screenshot of the Code Snippets screen where you can edit a snippet.

It needs a name, the code (see below), and you can select “Only run on site front-end.” (Run everywhere is okay too.)

For the code, choose the one that you prefer:

After the Ingredients:

add_action( 'tasty_recipes_card_after_ingredients', 'hubbub_save_this_tasty_recipe_card' );

function hubbub_save_this_tasty_recipe_card() { 
	echo do_shortcode ( '[hubbub_save_this]' );
}

Or before the Nutrition Information:

add_action( 'tasty_recipes_card_before_nutrition', 'hubbub_save_this_tasty_recipe_card' );

function hubbub_save_this_tasty_recipe_card() { 
	echo do_shortcode ( '[hubbub_save_this]' );
}

Save the Snippet, and then double-check that everything looks good on the front-end of your site. If so, be sure to clear all caches and you’re all set!

Need to tweak the styling? Here’s how to add custom CSS to the form.

Was this content helpful?
Updated on June 28, 2024