As websites and web applications get larger and more complex, one of the great challenges is how to rapidly prototype to get immediate client feedback and agreement from your customer and identify any hidden technical issues before investing significant time and effort writing code. In this session, you will learn how to create custom post types and taxonomies, extend the media library, add REST API endpoints, custom routes, virtual pages, and display all of it with formatted pages in only a matter of minutes. Whether you’re building a Software-as-a-Service, or you just need a Minimum Viable Product to demonstrate to your client, PODS enables you to test an idea out quickly and efficiently. Attend this session to see how PODS works in a start to finish site build.

1. Rapid Application
Development with the PODS
Framework
Nick Batik
@Nick_Batik

2. RAPID APPLICATION
DEVELOPMENT (RAD)
Purpose
• Give your client a Close-Enough idea
• Uncover potential technical challenges

3. • The Usual
Approach:
Wireframing

4. RAD – not a Wireframe,
A Proof-of-Concept Prototype

5. A Case for RAD
• eCommerce
• Membership sites
• Untested plugins or
tools
• Sales funnels
• Complex user
• Learning Management
Systems
• API / 3rd party
integrations
• Unsophisticated clients
• Everything ?

6. CASE STUDY

8. https://my.studiopress.com/themes/agent-focused/#demo-full
You know EXACTLY the theme you want to
use:

9. THE PROBLEM:
• It doesn’t look like a farm-to-table restaurant

10. In the next half-hour we are going to:
• Build Custom Post Types (CPTs) for
• Produce Items
• How to grow them in your garden
• Recipes to use them
• Menu to feature them

11. Then we will:
• Populate the CPTs with appropriate
images and text
• Link all the data fields for each produce
items
• gardening page
• recipes
• menu

12. Finally we will:
• Style the theme with archive and single
pages for all the CPTs
• Link everything through featured
images on the home page

13. NOTE:
• The code is in my GitHub
• The slides are in SlideShare
• All the links are on the Resources page at
the end
• Everything here is designed to be doable

14. LIVE DEMO

15. STEP 1: CONFIG PODS
• https://wcdfwdemo.wpengine.com

16. STEP 2: MOCK DATA
Data fields are identified during Client
Discovery
• Mockaroo
• ConvertCSV
• Faker
• https://loripsum.net/

17. STEP 3: MOCK IMAGES
Images should match CPTs
• Pixabay
• MediaWiki
• Pexels

18. STEP 4: NOW THE CODE
• Wordcamp_DFW_Rapid_Prototype

19. STEP 5: A LOOK AT PODS
• Demo - Making a Test POD

20. STEP 5: A LOOK AT PODS
• Demo - Loading PODS JSON

21. STEP 6: PODS TEMPLATES
• Home Featured Menu Item
• Home Page Gardening
• Home Page Ingredients
• Home Page Recipes
• Growing Ingredients
• Produce List
• Recipe Links

22. STEP 6: PODS TEMPLATE
Home Featured Menu Item:
<a href="{@permalink}" title="{@post_title}"><img
src="{@post_thumbnail_url.large-featured-image}"
width="33%"></a>

23. STEP 6: PODS TEMPLATE
Home Page Gardening:
<article>
<div style="float:left; width:40%;margin:0 5%">
<h1><a href="{@post_type}">Successful
Gardening</a></h1>
<p>Lorem ipsum…</p>
</div>
<div style="float:right; width:50%">
<a href="{@post_type}">{@post_thumbnail.full}</a>
</div>
</article>

24. STEP 6: PODS TEMPLATE
Home Page Ingredients:
<article>
<div style="float:left; width:50%">
<a href="{@post_type}">{@post_thumbnail.full}</a>
</div>
<div style="float:right; width:40%;margin:0 5%">
<h1><a href="{@post_type}">Freshest Produce</a></h1>
<p>Lorem ipsum…</p>
</div>
</article>

25. STEP 6: PODS TEMPLATE
Home Page Recipes:
<article>
<div style="float:left; width:40%;margin:0 5%">
<h1><a href="{@post_type}">Tastiest Recipes</a></h1>
<p>Lorem ipsum…</p>
</div>
<div style="float:right; width:50%">
<a href="{@post_type}">{@post_thumbnail.full}</a>
</div>
</article>

26. STEP 6: PODS TEMPLATE:
Growing Ingredients[if ingredients]
<article>
<header>
<h3>Learn About Growing and Using These Ingredients</h3>
</header>
<div class="produce-links">
<ul>
[each ingredients]
<li>
<a href="{@permalink}" title="{@post_title}"><span
style="vertical-align: text-
top;">{@ingredients.post_thumbnail}</span>{@ingredients.post_titl
e}</a>
</li>
[/each]
</ul>
</div>
</article>
[/if]

27. STEP 6: PODS TEMPLATE:
Produce List pt. 1
[if gardening]
<article>
<header>
<h3>Learn More About Growing {@gardening.post_title}</h3>
</header>
<div class="produce-links">
<ul>
[each gardening]
<li>
<a href="{@permalink}"
title="{@post_title}">{@post_title}</a>
</li>
[/each]
</ul>
</div>
</article>
[/if]

28. STEP 6: PODS TEMPLATE:
Produce List pt. 2
[if recipe]
<article>
<header>
<h3>Recipes Featuring {@gardening.post_title}</h3>
</header>
<div class="produce-links">
<ul>
[each recipe]
<li>
<a href=“{@permalink}"
title="{@post_title}">{@post_title}</a>
</li>
[/each]
</ul>
</div>
</article>
[/if]

29. STEP 6: PODS TEMPLATE:
Recipe Links pt. 1
[if recipe]
<article style="border:1px solid green; padding:1em">
<header>
<h3>See Our Related Recipes</h3>
</header>
<div class="produce-links">
<ul>
[each recipe]
<li>
<a href="{@permalink}"
title="{@post_title}">{@post_title}</a>
</li>
[/each]
</ul>
</div>
</article>
[/if]

30. STEP 6: PODS TEMPLATE:
Recipe Links pt. 2
[if cooking_ingredient]
<article style="border:1px solid green; padding:1em">
<header>
<h3>Learn More About {@cooking_ingredient.post_title}</h3>
</header>
<div class="produce-links">
<ul>
[each cooking_ingredient]
<li>
<a href="{@permalink}"
title="{@post_title}">{@post_title}</a>
</li>
[/each]
</ul>
</div>
</article>
[/if]

31. STEP 7: CUSTOMIZE
THEME
• Site Identity
• Front Page Image
• Color (#00aa02)
• Menus

32. STEP 7: CUSTOMIZER
Widgets
Front Page 1:
<h2>
Welcome to Farm-to-Table<br />Restaurant
</h2>

33. STEP 7: CUSTOMIZER
Widgets
Home Featured Menu Item:
<div style="text-align: center; color:
#fff; margin-top: 2em;">
<h1><strong>Today's Menu</strong></h1>
</div>
PODS List (3)
Recipe : Home Featured Menu Item

34. STEP 7: CUSTOMIZER
Widgets
Front Page 4:
<h2 style="text-align: center;margin-
top:2em">Become part of our community</h2>

35. STEP 7: CUSTOMIZER
Widgets
Front Page 5:
PODS Single
- Gardening : {slug} : Home Page Gardening
PODS Single
- Ingredients : {slug} : Home Page Ingredients
PODS Single
- Recipes : {slug} : Home Page Recipes

36. STEP 8: CHECK IT OUT
Go look at your Prototype:

37. RESOURCES
• GitHub Rapid Prototype
• Mockaroo
• ConvertCSV
• Faker
• https://loripsum.net/
• Pixabay
• MediaWiki
• Pexels
• [pods] shortcode
• #2: Using Pods Templates Part 1
• Template Tags in Pods Templates
• Using Magic Tags
• Pods How-Tos Sceencasts

38. Nick Batik
@nick_batik
512-879-8658