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
Upcoming SlideShare
Loading in...5
×

WordPress: A Designer's CMS

2,857

Published on

for WordCamp PDX

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,857
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

WordPress: A Designer's CMS

  1. 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. 2. THE DESIGNER’S CMS
  3. 3. ROOTS IN DESIGN
  4. 4. ? WHAT DO WE NEED?
  5. 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. 6. Aa
  7. 7. BUILT-IN TOOLS
  8. 8. WIDGETS • Drag & Drop interface • Flexible content ordering • Individually designed content area • Preserves design integrity • Not specifically for sidebars
  9. 9. JQUERY MASONRY by David Desandro http://desandro.com/resources/jquery-masonry
  10. 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. 11. CUSTOM PAGE TEMPLATES
  12. 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. 13. USAGE Just add this to the top of any file: <?php /* Template Name: Zombie Template */ ?>
  14. 14. WORDPRESS CSS CLASSES • <?php body_class(); ?> • adds unique classes for categories, tags, archives, pages, page templates, posts, etc. • <?php post_class(); ?>
  15. 15. USAGE <body class=”<?php body_class(); ?>”> returns <body class=”page-34 page-template etc”>
  16. 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. 17. PLUGINS
  18. 18. SIMPLE SECTION WIDGET • Creates a submenu based on the top level page of the current page • <?php simple_section_nav(); ?>
  19. 19. SIMPLE SECTION WIDGET
  20. 20. SIMPLE SECTION WIDGET
  21. 21. TINY MCE ADVANCED
  22. 22. JQUERY LIGHTBOX FOR NATIVE GALLERIES
  23. 23. WP GOOGLE FONTS
  24. 24. WP TYPOGRAPHY • Adds CSS classes to ampersands, quotes, etc. • Transforms TM and Registration marks • Transform fractions to appropriate entities • Prevents widows
  25. 25. WTF IS A WIDOW?
  26. 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. 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. 28. WP TYPOGRAPHY • Adds CSS classes to ampersands, quotes, etc. • Transforms TM and Registration marks • Transform fractions to appropriate entities • Prevents widows orphans
  29. 29. OTHER COOL SHIT
  30. 30. ELASTIC • Drag-n-drop WordPress themes • Column- based elastictheme.org
  31. 31. CARRINGTON BUILD • Drag-n-drop page templates • Column-based • Per-page basis crowdfavorite.com/wordpress/carrington-build
  32. 32. THEME FRAMEWORKS Theme Hybrid Thematic Carrington
  33. 33. TEXT EDITOR PLUGINS coda-clips.com/category/wordpress yoast.com/tools/textmate/
  34. 34. THE WORDPRESS DASHBOARD
  35. 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. 36. real name CHELSEA OTAKAN @chexee chexee@livelylabs.com its alive! nickname DON’T not what i am doing right now PANIC
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×