Content Aware WordPress theming

My talk from WordCamp Providence 2014

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