Slide 1
Slide 1 text
Building a
Compelling
Portfolio…
with
Gutenberg
WordCamp
Sacramento
2018
Sallie Goetsch
@salliegoetsch
https://speakerdeck.com/wpfangirl/
Slide 2
Slide 2 text
What’s a portfolio
when it’s at home?
Slide 3
Slide 3 text
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.
Slide 4
Slide 4 text
2018
“The real purpose of a
professional portfolio is to
provide tangible proof of your
value in the workplace.Ӡ
Slide 5
Slide 5 text
Who am I to talk to you
about portfolios?
Slide 6
Slide 6 text
My 2015 Portfolio
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Showed the Wrong Things
Slide 9
Slide 9 text
Visual Clutter
Slide 10
Slide 10 text
Over-Engineered
Slide 11
Slide 11 text
Then I Had an Epiphany
https://www.sinicom.com/about/case-studies/
Slide 12
Slide 12 text
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.Ӡ
Slide 13
Slide 13 text
Elements of a Good Case
Study
Slide 14
Slide 14 text
Case Study Content Template
• Headline
• Client Logo
• Client Profile
• Executive Summary
• Client Quote
• Challenges
But skip the trite stock photo!
Slide 15
Slide 15 text
Case Study Content Template
• How You Helped
• Results & ROI
• Illustrations
• Call to Action
Slide 16
Slide 16 text
Designing a Case Study
Template
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
How do we build this?
Slide 19
Slide 19 text
Before Gutenberg, we had…
• ACF and custom templates
• PODS and shortcode templates
• Widgets
• Page builders
Slide 20
Slide 20 text
With Gutenberg, we have
Slide 21
Slide 21 text
Can we build this layout with
Gutenberg blocks?
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Heading & Paragraph
The paragraph block has a custom font size.
Slide 25
Slide 25 text
Columns (Nested Blocks)
Slide 26
Slide 26 text
Putting It All
Together
Slide 27
Slide 27 text
It’s Time to Show Code
Stuff for Developers
Slide 28
Slide 28 text
Turning the Case
Study Layout into a
Block Template
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
Need Help Creating
Custom Post Types
and Taxonomies?
https://generatewp.com/
Slide 31
Slide 31 text
Step 2: Add Block Template
Slide 32
Slide 32 text
Identify Your Blocks
Slide 33
Slide 33 text
Write Your Code
Slide 34
Slide 34 text
Block Template in Action
Slide 35
Slide 35 text
Block Portfolio Plugin
https://github.com/wpfangirl/block-portfolio/
Slide 36
Slide 36 text
Add Block Template to
Existing Post Type
https://wordpress.org/gutenberg/handbook/templates/#existing-post-types
Slide 37
Slide 37 text
Modify the Post Type Object
Slide 38
Slide 38 text
Modify the Taxonomies
Slide 39
Slide 39 text
Make It a Plugin
https://github.com/wpfangirl/gutenberg-ppt
Slide 40
Slide 40 text
How soon can we start using
block templates?
Slide 41
Slide 41 text
Go forth & build
amazing portfolios—
with or without
Gutenberg
Slide 42
Slide 42 text
Questions for
Sallie?
• Twitter: @salliegoetsch
• GitHub: wpfangirl
• SpeakerDeck: wpfangirl
• Web: wpfangirl.com
• Meetup: eastbaywp.com
• Email: [email protected]