Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sallie Goetsch
September 23, 2018

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.

Sallie Goetsch

September 23, 2018

More Decks by Sallie Goetsch

Other Decks in Design


  1. Building a Compelling Portfolio… with Gutenberg WordCamp Sacramento 2018 Sallie

    Goetsch @salliegoetsch https://speakerdeck.com/wpfangirl/
  2. 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.
  3. 2018 “The real purpose of a professional portfolio is to

    provide tangible proof of your value in the workplace.Ӡ
  4. 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.Ӡ
  5. Case Study Content Template • Headline • Client Logo •

    Client Profile • Executive Summary • Client Quote • Challenges But skip the trite stock photo!
  6. Case Study Content Template • How You Helped • Results

    & ROI • Illustrations • Call to Action
  7. 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.
  8. Before Gutenberg, we had… • ACF and custom templates •

    PODS and shortcode templates • Widgets • Page builders
  9. 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
  10. Questions for Sallie? • Twitter: @salliegoetsch • GitHub: wpfangirl •

    SpeakerDeck: wpfangirl • Web: wpfangirl.com • Meetup: eastbaywp.com • Email: [email protected]