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. 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

  7. None
  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?

  22. None
  23. None
  24. Heading & Paragraph The paragraph block has a custom font

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