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
Tweet

More Decks by Sallie Goetsch

Other Decks in Design

Transcript

  1. Building a
    Compelling
    Portfolio…
    with
    Gutenberg
    WordCamp
    Sacramento
    2018
    Sallie Goetsch
    @salliegoetsch
    https://speakerdeck.com/wpfangirl/

    View Slide

  2. What’s a portfolio
    when it’s at home?

    View Slide

  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.

    View Slide

  4. 2018
    “The real purpose of a
    professional portfolio is to
    provide tangible proof of your
    value in the workplace.Ӡ

    View Slide

  5. Who am I to talk to you
    about portfolios?

    View Slide

  6. My 2015 Portfolio

    View Slide

  7. View Slide

  8. Showed the Wrong Things

    View Slide

  9. Visual Clutter

    View Slide

  10. Over-Engineered

    View Slide

  11. Then I Had an Epiphany
    https://www.sinicom.com/about/case-studies/

    View Slide

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

    View Slide

  13. Elements of a Good Case
    Study

    View Slide

  14. Case Study Content Template
    • Headline
    • Client Logo
    • Client Profile
    • Executive Summary
    • Client Quote
    • Challenges
    But skip the trite stock photo!

    View Slide

  15. Case Study Content Template
    • How You Helped
    • Results & ROI
    • Illustrations
    • Call to Action

    View Slide

  16. Designing a Case Study
    Template

    View Slide

  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.

    View Slide

  18. How do we build this?

    View Slide

  19. Before Gutenberg, we had…
    • ACF and custom templates
    • PODS and shortcode templates
    • Widgets
    • Page builders

    View Slide

  20. With Gutenberg, we have

    View Slide

  21. Can we build this layout with
    Gutenberg blocks?

    View Slide

  22. View Slide

  23. View Slide

  24. Heading & Paragraph
    The paragraph block has a custom font size.

    View Slide

  25. Columns (Nested Blocks)

    View Slide

  26. Putting It All
    Together

    View Slide

  27. It’s Time to Show Code
    Stuff for Developers

    View Slide

  28. Turning the Case
    Study Layout into a
    Block Template

    View Slide

  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

    View Slide

  30. Need Help Creating
    Custom Post Types
    and Taxonomies?
    https://generatewp.com/

    View Slide

  31. Step 2: Add Block Template

    View Slide

  32. Identify Your Blocks

    View Slide

  33. Write Your Code

    View Slide

  34. Block Template in Action

    View Slide

  35. Block Portfolio Plugin
    https://github.com/wpfangirl/block-portfolio/

    View Slide

  36. Add Block Template to
    Existing Post Type
    https://wordpress.org/gutenberg/handbook/templates/#existing-post-types

    View Slide

  37. Modify the Post Type Object

    View Slide

  38. Modify the Taxonomies

    View Slide

  39. Make It a Plugin
    https://github.com/wpfangirl/gutenberg-ppt

    View Slide

  40. How soon can we start using
    block templates?

    View Slide

  41. Go forth & build
    amazing portfolios—
    with or without
    Gutenberg

    View Slide

  42. Questions for
    Sallie?
    • Twitter: @salliegoetsch
    • GitHub: wpfangirl
    • SpeakerDeck: wpfangirl
    • Web: wpfangirl.com
    • Meetup: eastbaywp.com
    • Email: [email protected]

    View Slide