Shortcodes

Recipes

On WordPress.com, you can use shortcodes to embed a recipe with consistent formatting, basic metadata, and an option to print. You’ll find an example at the bottom of this guide!

Embedding a Recipe

To add a recipe to your site, use the recipe shortcode. You can add a shortcode to any page or post using a shortcode block.

Everything between the opening [recipe] and closing [/recipe] tags will be set apart as the recipe on your page.


↑ Table of Contents ↑

List of Attributes

You can include several optional ‘attributes’ to add extra information to your recipe. This also helps search engines index your recipe properly, since the code uses special “microdata” intended for recipes.

You’ll see each of these attributes in action in the example at the end of this guide.

  • Title: title of your recipe
  • Servings: number of servings the recipe makes
  • Time: total time the recipe takes
  • Prep time: time it takes to prepare
  • Cook time: time it takes to cook
  • Rating: add any rating, such as stars (★★★★★)
  • Difficulty: how hard the recipe is to create
  • Image: the URL to an image of the dish.
  • Description: a short description of the recipe
  • Print: a link to print the recipe is displayed by default if you have added one or more of the attributes for servings, time, or difficulty. Or you can hide the print button by adding print=”false”

↑ Table of Contents ↑

Adding Notes, Ingredients, Directions, and More

Since many recipes follow similar formats, we’ve included a little bit of extra formatting for these elements.

To add notes, use the recipe-notes shortcode:

[recipe-notes]
Add your notes, tips, etc here.
[/recipe-notes]

To add ingredients, use the recipe-ingredients shortcode:

[recipe-ingredients]
Add ingredients here.
[/recipe-ingredients]

To add directions, use the recipe-directions shortcode:

[recipe-directions]
Add directions here.
[/recipe-directions]

To add nutrition information, use the recipe-nutrition shortcode:

[recipe-nutrition]
Add nutrition information here.
[/recipe-nutrition]

To add an image into the recipe, use the recipe-image shortcode:

[recipe-image
image=”IMAGE URL”]

NOTE: when you use the recipe-image shortcode, if you had used the image attribute in the general recipe shortcode above, then that image will not be displayed anymore.

Each of the above shortcodes should be placed inside the [recipe]...[/recipe] shortcode and can be used in any order, any number of times—it’s up to you what you need!


↑ Table of Contents ↑

Customizing the Section Titles

By default, a title is included for recipe-ingredients and recipe-directions. You can customize this.

To hide the title:
[recipe-directions title=false]

To change the title to something else:
[recipe-ingredients title="Topping Ingredients"]


↑ Table of Contents ↑

Creating Lists

Since these elements often make use of lists, we’ve added some special formatting to make it super-simple to make a list.

To create a bulleted list, follow this format:
– item one
– item two
– item three

To create a numbered list, follow this format:
1. item one
2. item two
3. item three


↑ Table of Contents ↑

Example of a Complete Recipe

[recipe title="Summer Pasta with Basil, Tomatoes and Cheese" servings="4-6" preptime="20 mins" cooktime="10 mins" difficulty="easy" rating="★★★★★" image="https://en-support.files.wordpress.com/2014/01/food-dinner-pasta-broccoli.jpg" description="A fresh, light, Italian-inspired pasta recipe perfect for a late summer dinner."]

Put your recipe here. Tip: use ordered and unordered lists, headings, images, and links to improve the look of your recipe. You can also use special tags to format notes, ingredients, and directions.

[recipe-notes]
Credit: allrecipes.com
[/recipe-notes][recipe-ingredients]
– 2 pounds vine ripened tomatoes
– 3 cloves garlic
– 1/2 cup chopped fresh basil
[/recipe-ingredients][recipe-directions]
1. In a medium bowl, toss together tomatoes, garlic, basil, mint, salt and black pepper.
2. Cook and drain pasta.
3. Mix together.
[/recipe-directions][recipe-nutrition] Per Serving: 580 calories; 33 g fat; 50.6 g carbohydrates; 20.3 g protein; 50 mg cholesterol; 760 mg sodium. [/recipe-nutrition]

[/recipe]


↑ Table of Contents ↑

Recipe Shortcode in Action

Summer Pasta with Basil, Tomatoes and Cheese

  • Servings: 4-6
  • Difficulty: easy
  • Rating: ★★★★★
  • Print

A fresh, light, Italian-inspired pasta recipe perfect for a late summer dinner.

Ingredients

  • 2 pounds vine ripened tomatoes, seeded and diced
  • 3 cloves garlic, minced
  • 1/2 cup chopped fresh basil
  • 1 tablespoon chopped fresh mint leaves
  • 3/4 teaspoon salt
  • 1/2 teaspoon freshly ground black pepper
  • 1/4 teaspoon crushed red pepper flakes
  • 1/2 cup olive oil
  • 1/4 cup cream sherry
  • 12 ounces spaghetti
  • 1/2 cup freshly grated Asiago cheese
  • 2 cups fontina cheese, shredded

Directions

  1. In a medium bowl, toss together tomatoes, garlic, basil, mint, salt and black pepper, hot pepper flakes, olive oil, and cream sherry. Let stand at room temperature for up to 2 hours, stirring occasionally.
  2. Cook the pasta In a large pot of boiling salted water until tender, but firm to the bite.
  3. Drain the pasta, and transfer to a large serving bowl. Drain 1/4 cup of the liquid from the tomato mixture, and toss with the pasta to coat. Add cheese, and toss until it begins to melt. Add the tomato mixture, and toss until mixed.

Nutrition

Per Serving: 580 calories; 33 g fat; 50.6 g carbohydrates; 20.3 g protein; 50 mg cholesterol; 760 mg sodium.

Not quite what you're looking for?

Get Help