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

Content Aware WordPress theming

CodeProKid
September 27, 2014

Content Aware WordPress theming

My talk from WordCamp Providence 2014

CodeProKid

September 27, 2014
Tweet

Other Decks in Programming

Transcript

  1. Content Aware
    WordPress Theming
    Ryan Kanner
    @CodeProKid

    View Slide

  2. + +
    Who am I?

    View Slide

  3. Content Aware
    What?

    View Slide

  4. Templates that can automatically
    make adjustments based on the
    content being displayed.
    { }

    View Slide

  5. We aren’t
    launching this
    service until
    next year, can
    we remove it?
    Can we add a
    newsletter
    signup here?
    We don’t have
    anything to
    put here...

    View Slide

  6. View Slide

  7. The Problem
    ● Rigid grid systems
    ● WordPress gives non technical people
    total control of their content.
    ● Content changes, as it should.
    ● Clients needs change over time.

    View Slide

  8. Current Solutions...

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Issue with this solution
    ● Limitless layout possibilities to account
    for
    ● Fragmented User Experience
    ● Overwhelming amount of options
    ● Too much control for clients
    ● Good luck moving that content ever.

    View Slide

  15. My Solution
    ● Decisions, not options.
    ● Identify layout modules that can be
    broken by content.
    ● Fallbacks for empty content.
    ● A little bit of math + grid system = a
    whole lot of awesome.

    View Slide

  16. What to look out for
    Changing Content
    ● More
    ● Less
    ● Longer
    ● Shorter
    ● NULL
    Trouble Spots
    ● Filtered Content
    ● Sidebars
    ● Widgets
    ● Content Buckets
    ● Inline lists

    View Slide

  17. Examples
    woo, code.

    View Slide

  18. What happens
    when this is
    empty?

    View Slide

  19. “No Posts Found...”

    View Slide

  20. View Slide

  21. Empty Queries
    Yes No
    Is this content the main focus of this page?
    Display Similar
    content, or another
    way to find what they
    are looking for
    Display an
    alternate set of
    content instead
    Don’t display
    anything

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Establish what
    you were looking
    for in the first
    place
    State there
    was nothing
    found
    Offer a way to
    find something
    else

    View Slide

  26. Empty Sidebars

    View Slide

  27. Content Conditional
    Sidebar Conditional

    View Slide

  28. Let’s Count

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Flexible Widgets

    View Slide

  33. View Slide

  34. View Slide

  35. Widgets
    ● Horizontal widgets are a nightmare
    ● Fixed classes on widgets goes against the
    entire concept of widgets
    ● My solution https://github.
    com/CodeProKid/Flexible-Widget-Widths

    View Slide

  36. View Slide

  37. But why?
    ● Saves you time in the end
    ● Eliminates jobs you don’t want
    ● Establishes trust between you and your
    clients
    ● Provides a better user experience

    View Slide

  38. Thanks!

    View Slide