How to Create a Compelling WordPress Portfolio - with Gutenberg (redux)

Expanded version of my WCSAC 2018 presentation about using Gutenberg block templates for a portfolio CPT in WordPress. Now includes both my custom plugin and the code to add the template to the popular Portfolio Post Type plugin.

Transcript

1. Building a Compelling Portfolio… with Gutenberg WordCamp Sacramento 2018 Sallie Goetsch @salliegoetsch https://speakerdeck.com/wpfangirl/
2. What’s a portfolio when it’s at home?
3. 1985 port·fo·li·o pôrtˈfōlēˌō/ noun 1. a large, thin, flat case for loose sheets of paper such as drawings or maps.
4. 2018 “The real purpose of a professional portfolio is to provide tangible proof of your value in the workplace.”†
5. Who am I to talk to you about portfolios?
6. My 2015 Portfolio
8. Showed the Wrong Things
9. Visual Clutter
10. Over-Engineered
11. Then I Had an Epiphany https://www.sinicom.com/about/case-studies/
12. A Portfolio of Case Studies “Case studies are the best way to show your work. Outline the challenges of the project, and then tell the story of how you arrived at the solution.”†
13. Elements of a Good Case Study
14. Case Study Content Template • Headline • Client Logo • Client Profile • Executive Summary • Client Quote • Challenges But skip the trite stock photo!
15. Case Study Content Template • How You Helped • Results & ROI • Illustrations • Call to Action
16. Designing a Case Study Template
17. h1. Case Study Headline Executive Summary. Keep it short enough to act as your meta description, and use keywords. h2. The Challenge What motivated the client to hire you? What were the pain points? Were they losing money? Quantifying the problem helps demonstrate the value of your work. This should be one or two paratraphs and maybe a bullet list. You could add a graphic or image if appropriate. You can include a client Our business was in so much trouble before we hired WP Fangirl. — Job title at Client Company h2. Client (Company) Name Short client profile goes here. Tell us what industry the company is in, what the company does, who their customers are, their mission, their vision, their purpose.
18. How do we build this?
19. Before Gutenberg, we had… • ACF and custom templates • PODS and shortcode templates • Widgets • Page builders
20. With Gutenberg, we have
21. Can we build this layout with Gutenberg blocks?
24. Heading & Paragraph The paragraph block has a custom font size.
25. Columns (Nested Blocks)
26. Putting It All Together
27. It’s Time to Show Code Stuff for Developers
28. Turning the Case Study Layout into a Block Template
29. Step 1: Create a Portfolio Post Type • Portfolio Post Type • Project Type Taxonomy • Client Type Taxonomy • Project Tag Taxonomy https://github.com/wpfangirl/block-portfolio
30. Need Help Creating Custom Post Types and Taxonomies? https://generatewp.com/
31. Step 2: Add Block Template
32. Identify Your Blocks
33. Write Your Code
34. Block Template in Action
35. Block Portfolio Plugin https://github.com/wpfangirl/block-portfolio/
36. Add Block Template to Existing Post Type https://wordpress.org/gutenberg/handbook/templates/#existing-post-types
37. Modify the Post Type Object
38. Modify the Taxonomies
39. Make It a Plugin https://github.com/wpfangirl/gutenberg-ppt
40. How soon can we start using block templates?
41. Go forth & build amazing portfolios— with or without Gutenberg
42. Questions for Sallie? • Twitter: @salliegoetsch • GitHub: wpfangirl • SpeakerDeck: wpfangirl • Web: wpfangirl.com • Meetup: eastbaywp.com • Email: sallie@wpfangirl.com