Download - Content Aware WordPress Theming
![Page 1: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/1.jpg)
Content Aware WordPress Theming
Ryan Kanner
@CodeProKid
![Page 2: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/2.jpg)
+ +
Who am I?
![Page 3: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/3.jpg)
Content Aware What?
![Page 4: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/4.jpg)
Templates that can
automatically make adjustments
based on the content being
displayed.
{ }
![Page 5: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/5.jpg)
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...
![Page 6: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/6.jpg)
![Page 7: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/7.jpg)
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.
![Page 8: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/8.jpg)
Current Solutions...
![Page 9: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/9.jpg)
![Page 10: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/10.jpg)
![Page 11: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/11.jpg)
![Page 12: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/12.jpg)
![Page 13: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/13.jpg)
![Page 14: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/14.jpg)
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.
![Page 15: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/15.jpg)
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.
![Page 16: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/16.jpg)
What to look out for
Changing Content
● More
● Less
● Longer
● Shorter
● NULL
Trouble Spots● Filtered Content
● Sidebars
● Widgets
● Content Buckets
● Inline lists
![Page 17: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/17.jpg)
Examples
woo, code.
![Page 18: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/18.jpg)
What happens when this is empty?
![Page 19: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/19.jpg)
“No Posts Found...”
![Page 20: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/20.jpg)
![Page 21: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/21.jpg)
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
![Page 22: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/22.jpg)
![Page 23: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/23.jpg)
![Page 24: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/24.jpg)
![Page 25: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/25.jpg)
Establish what you were looking for in the first place
State there was nothing found
Offer a way to find something else
![Page 26: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/26.jpg)
Empty Sidebars
![Page 27: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/27.jpg)
Content Conditional
Sidebar Conditional
![Page 28: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/28.jpg)
Let’s Count
![Page 29: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/29.jpg)
![Page 30: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/30.jpg)
![Page 31: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/31.jpg)
![Page 32: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/32.jpg)
Flexible Widgets
![Page 33: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/33.jpg)
![Page 34: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/34.jpg)
![Page 35: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/35.jpg)
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
![Page 36: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/36.jpg)
![Page 37: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/37.jpg)
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
![Page 38: Content Aware WordPress Theming](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557da7a4d8b42acb768b48d0/html5/thumbnails/38.jpg)
Thanks!