FOLLOW ALON G
C HEXE E.N ET/WC PDX
( I A M ACT U A L LY I N T H E P I CTU RE )
THE
DESIGNER’S CMS
ROOTS IN DESIGN
?
WHAT DO WE NEED?
The goal of any information
design is to communicate a
specific message to the end
user in a way that is clear,
...
Aa
BUILT-IN TOOLS
WIDGETS
• Drag & Drop
interface
• Flexible content
ordering
• Individually designed
content area
• Preserves design
...
JQUERY MASONRY by David Desandro
http://desandro.com/resources/jquery-masonry
JQUERY MASONRY
Usage
('#container').masonry({ singleMode: true });
('#co...
CUSTOM PAGE TEMPLATES
CUSTOM PAGE TEMPLATES
• Allow flexible design templates non-
designers can set
• Not limited to homepage, subpage, ...
USAGE
Just add this to the top of any file:
<?php /*
Template Name: Zombie Template
*/ ?>
WORDPRESS CSS CLASSES
• <?php body_class(); ?>
• adds unique classes for
categories, tags, archives,
pages, page t...
USAGE
<body class=”<?php body_class(); ?>”>
returns
<body class=”page-34 page-template etc”>
rtl page
home page-id-{page_id}
blog ...
PLUGINS
SIMPLE SECTION WIDGET
• Creates a submenu based on the
top level page of the current
page
• <?php simple_section_nav(...
SIMPLE SECTION WIDGET
SIMPLE SECTION WIDGET
TINY MCE ADVANCED
JQUERY LIGHTBOX FOR NATIVE GALLERIES
WP GOOGLE FONTS
WP TYPOGRAPHY
• Adds CSS classes to
ampersands, quotes,
etc.
• Transforms TM and
Registration marks
• Transform fr...
WTF IS A WIDOW?
WIDOWS & ORPHANS
widow my husband ...
PROOF DESIGNERS ARE SADISTS
A common mnemonic is
An orphan has no past; a widow has no future
...
WP TYPOGRAPHY
• Adds CSS classes to
ampersands, quotes,
etc.
• Transforms TM and
Registration marks
• Transform fr...
OTHER COOL SHIT
ELASTIC
• Drag-n-drop
WordPress
themes
• Column-
based
elastictheme.org
CARRINGTON BUILD
• Drag-n-drop
page templates
• Column-based
• Per-page basis
crowdfavorite.com...
THEME FRAMEWORKS
Theme Hybrid
Thematic
Carrington
TEXT EDITOR PLUGINS
coda-clips.com/category/wordpress
yoast.com/tools/textmate/
THE WORDPRESS DASHBOARD
CONTRIBUTE!
GATEKEEPERS: JANE WELLS, MATT THOMAS, JOHN O’NOLAN, BEN DUNKLE
• make.wordpress.org/ui
• Tuesdays at 2p e...
real name
CHELSEA OTAKAN
@chexee chexee@livelylabs.com
its aliv...
WordPress: A Designer's CMS
WordPress: A Designer's CMS
WordPress: A Designer's CMS
WordPress: A Designer's CMS
of 40

WordPress: A Designer's CMS

for WordCamp PDX
Published on: Mar 4, 2016
Source: www.slideshare.net


Transcripts - WordPress: A Designer's CMS

  • 1. FOLLOW ALON G C HEXE E.N ET/WC PDX ( I A M ACT U A L LY I N T H E P I CTU RE )
  • 2. THE DESIGNER’S CMS
  • 3. ROOTS IN DESIGN
  • 4. ? WHAT DO WE NEED?
  • 5. The goal of any information design is to communicate a specific message to the end user in a way that is clear, accessible, and easy to understand. THE INFORMATION DESIGN HANDBOOK, JENN + KEN VISOCKY O’GRADY
  • 6. Aa
  • 7. BUILT-IN TOOLS
  • 8. WIDGETS • Drag & Drop interface • Flexible content ordering • Individually designed content area • Preserves design integrity • Not specifically for sidebars
  • 9. JQUERY MASONRY by David Desandro http://desandro.com/resources/jquery-masonry
  • 10. JQUERY MASONRY Usage ('#container').masonry({ singleMode: true }); ('#container').masonry({ columnWidth: 200 }); CODE VIA HTTP://WWW.WPLOVER.COM/1818/TUTORIAL-USING-JQUERY-MASONRY-WITH-WORDPRESS
  • 11. CUSTOM PAGE TEMPLATES
  • 12. CUSTOM PAGE TEMPLATES • Allow flexible design templates non- designers can set • Not limited to homepage, subpage, and posts • Can integrate widget areas, conditionals, and custom styles
  • 13. USAGE Just add this to the top of any file: <?php /* Template Name: Zombie Template */ ?>
  • 14. WORDPRESS CSS CLASSES • <?php body_class(); ?> • adds unique classes for categories, tags, archives, pages, page templates, posts, etc. • <?php post_class(); ?>
  • 15. USAGE <body class=”<?php body_class(); ?>”> returns <body class=”page-34 page-template etc”>
  • 16. rtl page home page-id-{page_id} blog page-parent archive page-child date parent-pageid-{parent_id} search page-template paged page-template-{page_template}-php attachment search-results error404 search-no-results single logged-in single-{post_id} paged-{page_number} postid-{post_id} single-paged-{page_number} attachmentid-{post_id} page-paged-{page_number} attachment-{mime_type} category-paged-{page_number} author tag-paged-{page_number} author-{user_nicename} date-paged-{page_number} category author-paged-{page_number} category-{category_slug} search-paged-{page_number} tag
  • 17. PLUGINS
  • 18. SIMPLE SECTION WIDGET • Creates a submenu based on the top level page of the current page • <?php simple_section_nav(); ?>
  • 19. SIMPLE SECTION WIDGET
  • 20. SIMPLE SECTION WIDGET
  • 21. TINY MCE ADVANCED
  • 22. JQUERY LIGHTBOX FOR NATIVE GALLERIES
  • 23. WP GOOGLE FONTS
  • 24. WP TYPOGRAPHY • Adds CSS classes to ampersands, quotes, etc. • Transforms TM and Registration marks • Transform fractions to appropriate entities • Prevents widows
  • 25. WTF IS A WIDOW?
  • 26. WIDOWS & ORPHANS widow my husband died :[ One of the things Ford Prefect had always found thought, their mouths probably seize up. hardest to understand about humans was their habit of continually stating and repeating the very very obvious, After a few months' consideration and observation as in It's a nice day, or You're very tall, or Oh dear you he abandoned this theory in favour of a new one. If seem to have fallen down a thirty-foot well, are you they don't keep on exercising their lips, he thought, alright? At first Ford had formed a theory to account their brains start working. After a while he for this strange behaviour. for this strange behaviour. abandoned this one as well as being obstructively If human beings don't keep exercising their lips, he cynical. orphan i have a horrible red afro and no parents :[
  • 27. PROOF DESIGNERS ARE SADISTS A common mnemonic is An orphan has no past; a widow has no future or An orphan is left behind, where as a widow must go on alone VIA WIKIPEDIA (I CAN’T MAKE THIS SHIT UP)
  • 28. WP TYPOGRAPHY • Adds CSS classes to ampersands, quotes, etc. • Transforms TM and Registration marks • Transform fractions to appropriate entities • Prevents widows orphans
  • 29. OTHER COOL SHIT
  • 30. ELASTIC • Drag-n-drop WordPress themes • Column- based elastictheme.org
  • 31. CARRINGTON BUILD • Drag-n-drop page templates • Column-based • Per-page basis crowdfavorite.com/wordpress/carrington-build
  • 32. THEME FRAMEWORKS Theme Hybrid Thematic Carrington
  • 33. TEXT EDITOR PLUGINS coda-clips.com/category/wordpress yoast.com/tools/textmate/
  • 34. THE WORDPRESS DASHBOARD
  • 35. CONTRIBUTE! GATEKEEPERS: JANE WELLS, MATT THOMAS, JOHN O’NOLAN, BEN DUNKLE • make.wordpress.org/ui • Tuesdays at 2p eastern • That means 11a western • irc.freenode.net #wordpress-ui
  • 36. real name CHELSEA OTAKAN @chexee chexee@livelylabs.com its alive! nickname DON’T not what i am doing right now PANIC

Related Documents