Options Pages & Relations – craylor.com | Agency-Grade Builds S1E5 🔗 **Source:** [Options Pages & Relations – craylor.com | Agency-Grade Builds S1E5](https://www.youtube.com/watch?v=TUUEjeHOtKk) > [!note]+ Document Notes > tags: [Assign relevant tags or keywords to the notee to facilitate organization and retrieval. Add a # before each tag. Tags cannot have special characters. Do not use the tag #articles] > - #wordpress > - #jetengine > - #acfpro > - #customposttypes > - #relations > - #optionspages > Author: Host: not explicitly stated; Guest: Christian “Craylor” Taylor > Source: YouTube video (Agency-Grade Builds S1E5) > Reference: https://www.youtube.com/watch?v=TUUEjeHOtKk > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🧩 Title: Options Pages & Relations — Agency-Grade WordPress Builds (S1E5) > <!-- deep-read:sections start --> ## 🧭 Table of Contents - 🔗 [📝 Summary](#-summary) - 🔗 [📖 Main Content](#-main-content) - 🔗 [🗒️ Notes (Clickable Timestamped Subheadings)](#️-notes-clickable-timestamped-subheadings) - 🔗 [📖 References](#-references) - 🔗 [🗣️ Paraphrase](#-paraphrase) - 🔗 [📰 Newsletter](#-newsletter) - 🔗 [✅ Action Items](#-action-items) - 🔗 [🧪 Hypotheses](#-hypotheses) - 🔗 [📊 Methodology](#-methodology) - 🔗 [❓ Questions](#-questions) - 🔗 [🔮 Future Research](#-future-research) - 🔗 [💡 Implications](#-implications) - 🔗 [🧠 Learning Styles Assessment](#-learning-styles-assessment) - 🔗 [📊 Accessibility Assessment](#-accessibility-assessment) - 🔗 [🌍 DEIB Assessment](#-deib-assessment) - 🔗 [✅ Logical validity & Tone](#-logical-validity--tone) - 🔗 [🛡️ DARVO Analysis](#-darvo-analysis) - 🔗 [🔍 SEO Evaluation](#-seo-evaluation) - 🔗 [🎯 Conclusion](#-conclusion) ### 📚 References: Include a list of sources consulted and cited in the article. - 🔗 Primary episode: https://www.youtube.com/watch?v=TUUEjeHOtKk --- ## 📝 Summary - 🧱 **Thesis:** Use **Options Pages** for global site settings (logos, social links, stats) and **Relations** to link CPTs (e.g., Partners ↔ Tools, Tools ↔ Videos). - 🧰 **Tools:** JetEngine (Options Pages, Relations), ACF Pro (Options Pages, Relationship fields). - 🔁 **Practice:** Plan enough to start, expect change, keep data DRY, and surface it via templates. - 🧭 **Takeaway:** Bidirectional relations + centralized options reduce maintenance and power dynamic front-ends. --- ## 📖 Main Content - 🧭 **Project stance:** Plan 90%, ship, then iterate. Templates should read from centralized data. - 🧰 **Options Pages:** Store global fields once, reuse everywhere. Example: header/footer logos, social URLs, bio snippets, creator stats. - 🧩 **Relations:** Model real data links between CPTs. Choose one-to-one, one-to-many, or many-to-many based on reality, not convenience. - 🧠 **JetEngine vs ACF:** JetEngine exposes Relations as first-class, typically bidirectional. ACF uses Relationship fields per post; bidirectionality needs care. - 🧪 **Patterns:** Partners→Tools (often 1→many), Tools↔Videos (many↔many), Partners↔Events (many↔many), Courses→Testimonials “Love” (1→many). - 🧯 **Why it matters:** Editors update one place; front-end stays in sync. Relations drive context-aware loops and meta components. --- ## 🗒️ Notes (Clickable Timestamped Subheadings) ### 🏁 [0:00–0:18 • Series context & mindset: plan, then iterate](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=0s) - ✅ **Goal:** Finalize backend basics before templating. - 🔄 **Reality check:** Specs change; build with change in mind. - 🧭 **Guidance:** Outline first; perfection not required to start. ### 🧱 [0:18–1:16 • “90% planned” is enough to move](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=18s) - 🧩 **Approach:** Lock core CPTs; expect later tweaks. - 🛠️ **Tactic:** Keep building; adjust schemas as needs appear. ### 🧰 [1:29–2:12 • Options Pages: concept baseline](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=89s) - 🧠 **Definition:** Global configurable data separate from posts. - 🔁 **Benefit:** Change once; update everywhere (header, footer, pages). ### 🧭 [2:12–2:58 • Old theme “dashboards” vs modern options](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=132s) - 🕰️ **History:** Legacy theme settings did similar jobs. - 🚀 **Now:** JetEngine groups Options Pages cleanly; multiple sections allowed. ### 🧩 [3:31–4:33 • Creating a JetEngine Options Page](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=211s) - ➕ **Action:** Add page → name → appears in admin left nav. - 🗂️ **Pattern:** Keep pages modular (e.g., “General”, “Stats”). ### 🖼️ [4:33–5:14 • Logo fields (light/dark) as media types](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=273s) - 🧪 **Field types:** Use “Media” for images. - 🧯 **Outcome:** Swap logos once; theme reflects everywhere. ### ⚡ [4:58–5:16 • Duplicating fields to speed setup](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=298s) - ⌨️ **Tip:** Duplicate + tab rename; reduce repetitive input. - 🧹 **Hygiene:** Clear labels; consistent naming. ### 🧠 [6:00–6:43 • Dynamic bio & computed stats idea](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=360s) - 🧮 **Example:** Store DOB; compute age dynamically in front-end. - 🔁 **Payoff:** Fewer edits; always-current profile text. ### 🏷️ [7:00–8:02 • Brand assets vs site logo: separate concerns](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=420s) - 🗃️ **Distinction:** “Website logo” (used in theme) vs “brand kit” (downloads: SVG/PNG/JPG). - 🧭 **Reason:** Different audiences; different reuse paths. ### 🔗 [8:18–8:50 • Social links as text fields](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=498s) - 🌐 **One source of truth:** Footer, media kit, cards pull same URL. - 🧰 **Types:** Use Text/URL fields for predictability. ### 🧭 [9:33–10:10 • Options Pages also exist in ACF Pro](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=573s) - 🪪 **Note:** ACF Options Page is Pro feature. - 🔄 **Interchange:** Similar concept; UI differs. ### 📣 [11:45–12:45 • Sponsor segment: BigScoots](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=705s) - 🏷️ **Message:** Managed hosting; coupon codes mentioned. - 🧭 **Relevance:** Hosting choice affects speed, security, and support. ### 📊 [12:46–14:40 • Stats page: manual vs automated](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=766s) - 🧑‍💻 **Options:** Manually update stats or integrate APIs. - 🧱 **MVP:** Manual values in Options; automate later. ### 🗓️ [13:59–14:40 • Creator start date → calculated “years creating”](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=839s) - ⏱️ **Field:** DateTime saved as timestamp. - 🧮 **Use:** Compute years on front-end. ### 🧷 [15:15–16:54 • Relations: JetEngine vs ACF](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=915s) - 🔄 **JetEngine:** First-class, typically bidirectional. - 🧩 **ACF:** Relationship field per post; bidirectional needs care. ### 🧮 [16:55–18:03 • Choosing relation cardinality](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1015s) - 🧠 **Decide:** One-to-one, one-to-many, many-to-many. - 🧭 **Rule:** Model reality (not convenience). ### 🤝 [18:03–19:58 • Partners → Tools relation](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1083s) - 🧱 **Setup:** Name clearly (“Partners to Tools”). - 🔢 **Likely:** One partner → many tools. ### 🔄 [20:00–21:24 • Connecting from either side (bi-directional)](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1200s) - 🔗 **Flow:** Add Tool; connect Partner; relation appears on both. - 🧹 **Delete:** Removing link on one removes on the other. ### 🎥 [21:33–23:58 • Tools ↔ Videos relation](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1293s) - 🎛️ **Use case:** Video pages list related tools; tool pages list videos. - 🔢 **Cardinality:** Many ↔ many. ### 🎪 [24:56–26:25 • Partners ↔ Events relation](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1496s) - 🗓️ **Example:** CloudFest partner across yearly events. - 🔢 **Cardinality:** Often many ↔ many. ### 💬 [26:43–30:05 • Testimonials (“Love”): taxonomies vs relations](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1603s) - 🏷️ **Taxonomy path:** Categories like “Student”, subcats per course. - 🔗 **Relation path:** Link specific testimonials to a Course CPT. ### 🎓 [30:06–31:20 • Courses → Love relation](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1806s) - 🔢 **Choice:** One course → many testimonials. - 🧭 **Ethics:** Avoid showing praise on courses not taken. ### 🏁 [31:48–32:47 • Wrap-up & next steps](https://www.youtube.com/watch?v=TUUEjeHOtKk&t=1908s) - 🧱 **Bridge:** Backend structure now powers front-end templates. - 📣 **CTA:** Questions welcome; design phase coming. --- ## 📖 References - 🔗 Episode: https://www.youtube.com/watch?v=TUUEjeHOtKk - 🔗 JetEngine Options Pages (Crocoblock): https://crocoblock.com/knowledge-base/articles/how-to-create-options-pages/ - 🔗 JetEngine Relations: https://crocoblock.com/knowledge-base/articles/how-to-create-relations/ - 🔗 ACF Options Page (Pro): https://www.advancedcustomfields.com/resources/options-page/ - 🔗 ACF Relationship: https://www.advancedcustomfields.com/resources/relationship/ - 🔗 WordPress CPT: https://developer.wordpress.org/plugins/post-types/registering-custom-post-types/ - 🔗 WordPress Taxonomies: https://developer.wordpress.org/plugins/taxonomies/working-with-custom-taxonomies/ --- ## 🗣️ Paraphrase - 🧰 **On Options Pages:** - 🗣️ *Original idea:* Store shared site settings once and reference them everywhere. - ✍️ *Paraphrase:* Centralize global values in an options hub, then pull those fields into headers, footers, and templates so changes ripple across the site automatically. - 🔗 **On Relations:** - 🗣️ *Original idea:* Link CPTs bidirectionally to reflect real-world connections. - ✍️ *Paraphrase:* Model how content relates in life—partners to tools, tools to videos—so templates can query connected items from either side without duplication. --- ## 📰 Newsletter - 🧱 **Build smarter WordPress backends:** Episode 5 shows how **Options Pages** centralize logos, socials, and creator stats, while **Relations** connect CPTs like Partners, Tools, Videos, Events, and Course Testimonials. - 🔧 **Why you care:** Editors update one field, and the change lands everywhere. Relations power “related content” loops without manual tagging chaos. - 🚀 **Try this:** Add a “General” Options Page (light/dark logos, socials). Create Relations: Partners→Tools, Tools↔Videos, Courses→Testimonials. Then wire loops in singles and archives. - 🔗 **Docs:** JetEngine Options & Relations; ACF Options Page. - 🗞️ **Next up:** Templating with dynamic tags and relation queries. Your back end now pulls its weight. --- ## ✅ Action Items - 🧭 **Reusable prompt for evaluating articles (aligned to your DevRel/OSPO goals):** - **Purpose:** “Assess how this article advances open-source advocacy, contributor onboarding, sustainable funding, and WordPress ecosystem transparency. Map to OSPO practices.” - **Prompt:** - *Scope & Audience:* Who benefits (contributors, maintainers, WP builders, OSPO leads)? - *Education Lift:* What concepts become teachable modules (PHP/JS, Git/GitHub, CPTs, relations, CI basics)? - *Advocacy Angle:* How does it promote open standards, reproducibility, and maintainership well-being? - *Sustainability:* What funding or support models could back the practices (grants, sponsor credits, training stipends)? - *Policy Fit:* Which OSPO controls or guidelines does it suggest (taxonomy hygiene, data modeling, review processes)? - *DEIB & Transparency:* How can we make guidance inclusive, accessible, and open by default (docs, translations, public playbooks)? - *Measurable Outcomes:* What metrics show success (editor time saved, error reduction, template reuse, contributor ramp time)? - 🧱 **For this episode specifically:** - 🧰 Create “General” and “Stats” Options Pages; add logos, socials, DOB/start-date, key metrics. - 🔗 Establish Relations: Partners→Tools, Tools↔Videos, Partners↔Events, Courses→Love. - 🧪 Build one Single Template per CPT with related loops using Relations. - 📚 Draft a training lab for WP Training Team: “From Options to Relations to Templates.” - 🏛️ Propose an internal OSPO “Data Modeling in WP” guideline (naming, cardinality, bidirectionality, taxonomy vs relation decision tree). - 🔎 Add code review checks for new fields/relations and template usage to prevent drift. --- ## 🧪 Hypotheses - 🧪 **H1:** Centralizing global data via Options Pages cuts editorial update time by ≥60%. - 🧪 **H2:** Replacing taxonomy-only grouping with Relations reduces content mismatch bugs by ≥40%. - 🧪 **H3:** Bidirectional Relations increase reusable component adoption by ≥30% across templates. - 🧪 **H4:** A “Relations decision tree” lowers onboarding time for contributors by ≥25%. --- ## 📊 Methodology - 🧭 **Design:** A/B compare projects with vs. without Options/Relations. - 📈 **Metrics:** Edit time per change, number of mismatches, template reuse rate, contributor ramp time. - 🧰 **Data sources:** Git history, WP revision logs, support tickets, editor surveys. - 🔍 **Analysis:** Diff-in-diff across teams; task-timed usability tests; component adoption tracking. --- ## ❓ Questions - ❓ Which data truly belongs in Options vs a CPT? - ❓ Where do Relations outperform taxonomies, and vice versa? - ❓ What naming scheme keeps Relations understandable at scale? - ❓ How do we expose Relations safely in headless builds? --- ## 🔮 Future Research - 🔮 Auto-generated Relation diagrams in WP admin. - 🔮 Field governance: linting labels, reserved slugs, migration scripts. - 🔮 Multi-site Option inheritance with overrides. - 🔮 Headless query patterns for Relations (GraphQL/REST) at scale. --- ## 💡 Implications - 💡 Fewer edits, fewer errors, stronger templates. - 💡 Relation-driven front-ends enable richer UX without manual tagging. - 💡 Clear data modeling becomes an OSPO-level best practice for WP. --- ## 🧠 Learning Styles Assessment - 📏 **Readability (est.):** Grade 9–10; conversational with light jargon. - 🖼️ **Visual — Present:** Screencast UI flows. **Improve:** Add schema diagrams and relation trees. - 🎧 **Aural — Present:** Spoken explanations. **Improve:** Provide an audio-only summary and chaptered transcript. - 📝 **Verbal — Present:** Examples and analogies. **Improve:** Glossary for CPT/relations/taxonomies. - ✋ **Kinesthetic — Present:** Live building. **Improve:** Provide downloadable starter JSON and tasks. - 🧮 **Logical — Present:** Cardinality decisions. **Improve:** Decision tree for taxonomy vs relation. - 👥 **Social — Present:** Q&A prompt. **Improve:** Forum thread or GitHub Discussions template. - 🧘 **Solitary — Present:** Can follow solo. **Improve:** Reflection prompts and checklists. - 🌱 **Naturalistic — Not present:** **Improve:** Use ecosystem analogies for data flows. --- ## 📊 Accessibility Assessment - 🔊 **Screen readers:** Ensure semantic headings, captions, and full transcript. - ⌨️ **Keyboard:** Visible focus and skip links in any companion page. - 🎨 **Contrast:** High contrast; avoid text baked in images; scalable fonts. - 🔍 **Text resizing:** Reflow at 200%; responsive tables for field lists. - 🖼️ **Alt text:** Describe diagrams of Relations and Option structures. --- ## 🌍 DEIB Assessment - 🗣️ **Inclusive language:** Define acronyms; avoid insider slang. - 🌐 **Global reach:** Offer subtitles and localized docs. - 🧩 **Neurodiversity:** Chunk steps; provide checklists and summaries. - 👥 **Representation:** Include examples beyond a single brand or niche. - 🛟 **Psych safety:** Encourage blameless data-model changes and reviews. --- ## ✅ Logical validity & Tone - ✅ **Strong causal chain:** Centralizing options → fewer edits → consistent UI. - ✅ **Sound guidance:** Model real cardinalities; avoid forcing all into taxonomies. - ✅ **Counterpoint acknowledged:** ACF vs JetEngine differences addressed. - ⚠️ **Potential gaps:** No quantitative proof; claims are experiential. - 🗣️ **Tone:** Friendly, practical, slightly informal; clear intent to teach. --- ## 🛡️ DARVO Analysis - 🚫 **Deny:** No denial tactics. The episode admits change and uncertainty. - 🚫 **Attack:** No attacks on individuals; sponsor segment stays neutral. - 🚫 **Reverse victim/offender:** Not present. - 🧭 **Conclusion:** No DARVO patterns. The rhetoric centers on teaching and process. --- ## 🔍 SEO Evaluation - 🔑 **Keywords:** WordPress options page, JetEngine relations, ACF options, CPT relations. - 🏷️ **Title tag:** “WordPress Options Pages & Relations with JetEngine (Agency-Grade Builds S1E5)”. - 📝 **Meta (≤160 chars):** “Centralize logos & stats with Options Pages, link CPTs with Relations, and build dynamic templates in WordPress.” - 🧱 **Headers:** H2 for Options, Relations, Templates; H3 for use-cases. - 🔗 **Links:** Point to JetEngine/ACF docs and example repos. - 🖼️ **Images:** Add schema diagrams with descriptive alt. - 📱 **Mobile:** Optimize embeds; lazy-load video. - 🧩 **Schema:** `VideoObject` + `Article`; optional `FAQPage`. - 📣 **CTA:** “Download starter fields” + “See relation diagrams.” --- ## 🎯 Conclusion - 🧭 Options Pages centralize shared data; Relations mirror reality between CPTs. - 🧱 Together, they cut maintenance, power dynamic templates, and scale better. - 🚀 Adopt them with clear naming, right cardinalities, and a lightweight review process. <!-- deep-read:sections end -->