SOP DIRECTORY PAGE CONTENT

Page Title: “Standard Operating Procedures”

URL: /standard-operating-procedures/

Page Content (paste in WordPress Code Editor):

<div class="sop-list-container">

<div class="sop-list-header">
<h1 class="sop-list-title">📚 Complete SOP Directory</h1>
<p class="sop-list-description">Browse all Standard Operating Procedures organized by category. Each SOP includes interactive checklists, bilingual support, and print-friendly layouts.</p>
</div>

</div>

---

Alternative Versions:

Version 1: All SOPs (Current)

Shows all SOPs grouped by category automatically.

[sop_list]

Version 2: Single Category

Shows only one category (for category-specific pages):

[sop_list category="Brewing Operations"]

Version 3: Flat List (No Category Headers)

Shows all SOPs in a simple grid:

[sop_list show_category_headers="no"]

---

Recommended Page Structure:

<div class="sop-list-container">

<!-- Header Section -->
<div class="sop-list-header">
<h1 class="sop-list-title">📚 Complete SOP Directory</h1>
<p class="sop-list-description">Browse all Standard Operating Procedures organized by category. Each SOP includes interactive checklists, bilingual support, and print-friendly layouts.</p>
</div>

<!-- Search Tips (Optional) -->
<div style="background: #FFF9E6; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #F28E1C; margin-bottom: 2rem;">
<h3 style="margin-top: 0;">💡 Quick Tips</h3>
<ul style="margin-bottom: 0;">
<li>Click any SOP card to view the full procedure</li>
<li>Use Ctrl+F to search for specific procedures</li>
<li>SOPs are organized by operational category</li>
<li>Green badge = Active, Orange badge = Draft</li>
</ul>
</div>

<!-- SOP List Shortcode -->

<!– Footer Section (Optional) –> <div style=”margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #EAE3DB; text-align: center;”> <p style=”color: #5C3A31;”> <strong>Need help?</strong> Contact your shift supervisor or the Brew Team.<br> <em>Last updated: February 2026</em> </p> </div> </div>

---

Category-Specific Pages (Optional):

Create separate pages for each major category:

/brewing-operations-sops/

<div class="sop-list-container">
<div class="sop-list-header">
<h1 class="sop-list-title">⚗️ Brewing Operations SOPs</h1>
<p class="sop-list-description">Standard procedures for all brewing operations including pre-brew prep, mashing, boiling, and cooling.</p>
</div>

<p><a href=”/standard-operating-procedures/”>← Back to all SOPs</a></p> </div>

/fermentation-sops/

<div class="sop-list-container">
<div class="sop-list-header">
<h1 class="sop-list-title">🧪 Fermentation SOPs</h1>
<p class="sop-list-description">Procedures for fermenter preparation, yeast management, temperature control, and fermentation monitoring.</p>
</div>

<p><a href=”/standard-operating-procedures/”>← Back to all SOPs</a></p> </div>

/packaging-sops/

<div class="sop-list-container">
<div class="sop-list-header">
<h1 class="sop-list-title">📦 Packaging SOPs</h1>
<p class="sop-list-description">Standard procedures for kegging, bottling, canning, and all packaging operations.</p>
</div>

<p><a href=”/standard-operating-procedures/”>← Back to all SOPs</a></p> </div>

---

Implementation Notes:

1. Main Directory Page: Use Version 1 (shows all SOPs by category)
2. Homepage: Link to this directory page
3. Category Pages: Optional, but useful for focused navigation
4. ACF Required: All SOPs must have sop_number and sop_category ACF fields set

---

Styling Notes:

The shortcode

automatically generates styled cards with:

• SOP number badge (top)
• Clickable title
• Status badge and last updated date (bottom)
• Hover effects (card lifts up)
• Responsive grid (1-3 columns based on screen size)

No additional CSS needed – it uses the V3.2 styles!

# SOP DIRECTORY PAGE CONTENT ## Page Title: “Standard Operating Procedures” ## URL: /standard-operating-procedures/ ## Page Content (paste in WordPress Code Editor): “`html “` — ## Alternative Versions: ### Version 1: All SOPs (Current) Shows all SOPs grouped by category automatically. “` “` ### Version 2: Single Category Shows only one category (for category-specific pages): “` “` ### Version 3: Flat List (No Category Headers) Shows all SOPs in a simple grid: “` “` — ## Recommended Page Structure: “`html “` — ## Category-Specific Pages (Optional): Create separate pages for each major category: ### /brewing-operations-sops/ “` “` ### /fermentation-sops/ “` “` ### /packaging-sops/ “` “` — ## Implementation Notes: 1. **Main Directory Page**: Use Version 1 (shows all SOPs by category) 2. **Homepage**: Link to this directory page 3. **Category Pages**: Optional, but useful for focused navigation 4. **ACF Required**: All SOPs must have `sop_number` and `sop_category` ACF fields set — ## Styling Notes: The shortcode `` automatically generates styled cards with: – SOP number badge (top) – Clickable title – Status badge and last updated date (bottom) – Hover effects (card lifts up) – Responsive grid (1-3 columns based on screen size) No additional CSS needed – it uses the V3.2 styles!