Slide 1

Slide 1 text

Building a Compelling Portfolio… with Gutenberg WordCamp Sacramento 2018 Sallie Goetsch @salliegoetsch

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


Slide 11

Slide 11 text

Then I Had an Epiphany

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

Slide 30

Slide 30 text

Need Help Creating Custom Post Types and Taxonomies?

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

Slide 36

Slide 36 text

Add Block Template to Existing Post Type

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

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: • Meetup: • Email: [email protected]