Recipes

🍴 MmmDaily Recipes Setup

This guide explains how to create a Recipes page and manage Recipe posts in Ghost using the MmmDaily theme.

---

1. Create a Recipes Page

1. Log in to your Ghost Admin at https://yoursite.com/ghost/.
2. Create a New Page:
   • Give it a Title, e.g., Latest Recipes.
   • Add an Excerpt (optional).
3. Set the Slug to recipes.
4. Publish the page.
5. You can now access your recipes page at:

   https://yoursite.com/recipes

---

2. Add Recipe Posts

1. Create a New Post in Ghost.
2. Assign the internal hashtag #recipe to this post.
3. Optionally, add additional recipe info using internal tags:
   • Go to Ghost Admin → Tags.
   • Create internal tags starting with recipeinfo, e.g.:

     #recipeinfo-easy
     #recipeinfo-gluten-free
     #recipeinfo-45

   • For each internal tag, add:
     • Description – Will be displayed on the recipe post.
     • Image – Will be displayed on the recipe post.
4. Assign your internal tags to the recipe post. You can also sort the tags as desired.

---

3. Add Additional Recipe Info

MmmDaily supports a recipe info box for nutrition, servings, yield, and prep/cook times.

Example 1: Prep, Cook, Servings

<div class="recipe-info">
    <div>
        <div class="info-title">Prep Time:</div>
        <div class="info-value">20 min</div>
    </div>
    <div>
        <div class="info-title">Cook Time:</div>
        <div class="info-value">10 mins</div>
    </div>
    <div>
        <div class="info-title">Additional Time:</div>
        <div class="info-value">2h hours</div>
    </div>
    <div>
        <div class="info-title">Servings:</div>
        <div class="info-value">6</div>
    </div>
    <div>
        <div class="info-title">Yield:</div>
        <div class="info-value">4 to 6 - servings</div>
    </div>
</div>

Example 2: Nutritional Information

<div class="recipe-info">
  <div>
        <div class="info-title">Nutritional Information:</div>
    </div>
    <div>
        <div class="info-title">Calories:</div>
        <div class="info-value">~210 kcal</div>
    </div>
    <div>
        <div class="info-title">Fat:</div>
        <div class="info-value">12 g</div>
    </div>
    <div>
        <div class="info-title">Protein:</div>
        <div class="info-value">23 g</div>
    </div>
    <div>
        <div class="info-title">Carbs:</div>
        <div class="info-value">3 g</div>
    </div>
    <div>
        <div class="info-title">Sugar:</div>
        <div class="info-value">0 g</div>
    </div>
</div>

---

4. Add Directions / Steps

1. Directions can be displayed as a numbered list using HTML cards.
2. Copy the following structure and edit the content as needed:

<h3 class="directions-title">
    <span>1</span>
    <span>Preheat oven to 180°C / 350°F.</span>
</h3>

<h3 class="directions-title">
    <span>2</span>
    <span>Mix all ingredients in a bowl.</span>
</h3>

<h3 class="directions-title">
    <span>3</span>
    <span>Pour mixture into a baking tray.</span>
</h3>

<h3 class="directions-title">
    <span>4</span>
    <span>Cook Shrimp – Add shrimp in a single layer. Cook 1–2 minutes per side until pink and opaque.</span>
</h3>

---

5. Add Recipe Ingredients

MmmDaily supports a recipe Ingredients, to add Ingredients follow those steps:

1. Ingredients can be displayed as checkboxes using HTML cards.
2. Copy the structure below and edit the content as needed.
3. Make sure each ingredient has a unique ID.

---

✅ Summary

• Recipes Page: Create a page with slug recipes.
• Recipe Posts: Create posts with #recipe tag.
• Recipe Info: Use recipeinfo-* internal tags and HTML cards for prep, cook, nutrition, and serving info.
• Directions: Add steps using HTML card structure.

Following this setup ensures that your MmmDaily theme displays recipes correctly with all additional info and structured layout.