60Web60

Building Recipe or Tutorial Cards

Building Your Website4 min read·

This article shows you how to create recipe cards or step-by-step tutorial guides on your Web60 WordPress website.

Method 1: Using WordPress Blocks (Gutenberg)

WordPress comes with built-in blocks that work well for simple recipes or tutorials.

  1. Log into your WordPress admin dashboard
  2. Go to Pages > Add New or edit an existing page
  3. Click the + button to add a new block
  4. Add a Heading block for your recipe or tutorial title
  5. Use a Columns block to create sections:
    • Left column: Add an Image block for your finished result photo
    • Right column: Add List blocks for ingredients or materials needed
  6. Below the columns, add Heading blocks for "Instructions" or "Steps"
  7. Use Numbered List blocks for each step in your process
  8. Add Image blocks between steps to show visual progress
  9. Click Update to save your changes

Method 2: Using a Recipe Plugin

Plugins make recipe cards look more professional and help with search engine optimization.

  1. In your WordPress dashboard, go to Plugins > Add New
  2. Search for "WP Recipe Maker" (free plugin)
  3. Click Install Now, then Activate
  4. Go to WP Recipe Maker > Settings to configure basic options
  5. When editing a page, click the + button and search for "Recipe Card"
  6. Fill in the recipe details:
    • Recipe name and description
    • Prep time, cook time, servings
    • Ingredients (one per line)
    • Instructions (numbered automatically)
  7. Upload a featured image for your recipe
  8. Preview your recipe card and adjust styling if needed

Adding Images to Your Cards

Good photos make recipe and tutorial cards much more effective. For detailed guidance on uploading and managing photos, see Adding Images and Media.

  • Use high-quality images that show each major step
  • Keep file sizes under 1MB for faster loading
  • Add alt text describing what the image shows
  • Consider before/after photos for dramatic effect

Styling Your Cards

Make your recipe or tutorial cards match your website's look:

  1. Go to Appearance > Customize in your WordPress dashboard
  2. Look for typography or color options
  3. Adjust heading fonts and colors to match your brand
  4. Consider adding background colors or borders to make cards stand out
  5. Test how your cards look on mobile phones

For more advanced styling options, see How to Add Custom CSS Styling.

Organizing Multiple Recipes or Tutorials

If you plan to publish many recipes or tutorials:

  1. Create categories: Go to Posts > Categories
  2. Add categories like "Breakfast", "Dinner", "Beginner Tutorials"
  3. When publishing, assign each recipe to the right category
  4. Create a main recipes page that links to all categories
  5. Add a search function so visitors can find specific recipes

If you're still stuck with creating recipe or tutorial cards, contact Web60 support for help with your specific requirements.

FAQ

Q: Can I add nutrition information to recipe cards?

A: Yes, most recipe plugins include fields for calories, protein, carbs and other nutrition facts. You'll need to calculate these yourself or use a nutrition calculator.

Q: How do I make my recipes show up in Google search results?

A: Recipe plugins automatically add structured data that helps Google understand your recipes. Make sure to fill in all fields like prep time, ingredients, and instructions completely.

Q: Can visitors print my recipe cards?

A: Most recipe plugins include a print button that creates a clean, printer-friendly version. Visitors can print just the recipe without your website's navigation and sidebar.

Q: Do I need a separate page for each recipe?

A: You can put multiple recipes on one page, but separate pages work better for search engines and sharing on social media. Each recipe gets its own web address this way.

Q: Can I let visitors rate my recipes?

A: Yes, many recipe plugins include star ratings and comment systems. Visitors can leave ratings and reviews, which also helps with search engine rankings.

Q: How do I backup my recipes before making changes?

A: WordPress automatically creates backups on Web60, but you can also export your recipes through Tools > Export in your dashboard. This creates a backup file you can save to your computer.

Last updated: 1 March 2026

Still need help?

Contact our support team for personalised assistance.

Contact Support