Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FROM PIXEL TO USER Creating WordPress themes that satisfy the design and work for the end user WordCamp Chicago 2013 Becky...
ABOUT BECKY  Designer/Dev from Chicago  1st WordPress site in 2009  1st WordCamp – Chicago 2010  1st WordCamp site des...
WHY DO WE WORK IN WORDPRESS?  Easier for developers?  (sure, there‟s a plugin for that)  Easier for designers?  (not r...
WE BUILD 2 SITES  One for the designer and public o The other is how we structure the Dashboard and pages/posts for the e...
WEB DESIGN IS NOT PRINT  We usually don‟t have all the content ahead of time  Web design needs to be flexible  Height c...
HOW MANY TEMPLATE PAGES NEEDED?  Every time layout changes  Label them well so user knows /** * Template name: Full widt...
LET TEMPLATES DO THE WORK  This part gets edited by the user.  This part gets populated “automagically” by adding a quer...
WHERE DO I EDIT THIS?  Keep the content area in mind Gets edited in Widgets, not the page.
DON‟T EXPECT THE USER TO KNOW HTML  DON‟T code HTML <div> into the content area.  No matter how well you train, the user...
DON‟T RESTRICT THE TEXT <div class=“entry-content”> <?php the_content();?> </div> If „the_content‟ is in the main area how...
A BUNCH OF PAGES THAT NEED TO LOOK THE SAME  Product, real estate listings, chamber members etc.  Setup Custom Post (Con...
WHAT ABOUT WIDGETS?  Great if what‟s in them is static  If they need to change for some pages…  Dynamic Widgets is a go...
TRAINING  All of your customizations are no good if you don‟t show the end user admin how to use them  Where does what c...
PLUGINS  Advanced Custom fields  A real rockstar and has many add-ons to increase it‟s versatility. http://wordpress.org...
CONTACT INFO  Beckydavisdesign.com  @beckyddesign  Slides on slideshare.net/bdgardengirl
Upcoming SlideShare
Loading in …5
×

Pixel to User

3,448 views

Published on

We develop 2 sites in WordPress; one for the designer/end user and one for the client/admin. Let's make it easier for our clients to edit their own sites. That's why we work in WordPress right?
The talk that goes with these is available on WordPress.tv. http://wordpress.tv/2013/09/17/becky-davis-from-pixel-to-user-creating-themes-that-satisfy-the-design-and-are-usable/

Published in: Technology, Business
no profile picture user

  • Login to see the comments

Pixel to User

  1. 1. FROM PIXEL TO USER Creating WordPress themes that satisfy the design and work for the end user WordCamp Chicago 2013 Becky Davis - @beckyddesign
  2. 2. ABOUT BECKY  Designer/Dev from Chicago  1st WordPress site in 2009  1st WordCamp – Chicago 2010  1st WordCamp site design – Chicago 2011  Number of WordPress custom themes built – 30+  Mom – both kids in college
  3. 3. WHY DO WE WORK IN WORDPRESS?  Easier for developers?  (sure, there‟s a plugin for that)  Easier for designers?  (not really, unless they understand the structure)  Because the end client wants editing control! http://wpmu.org/why-you-hate-the-wordpress-text-editor/
  4. 4. WE BUILD 2 SITES  One for the designer and public o The other is how we structure the Dashboard and pages/posts for the end admin user
  5. 5. WEB DESIGN IS NOT PRINT  We usually don‟t have all the content ahead of time  Web design needs to be flexible  Height changes based on content  Width changes responsively based on device
  6. 6. HOW MANY TEMPLATE PAGES NEEDED?  Every time layout changes  Label them well so user knows /** * Template name: Full width, no sidebar */ page-full.php
  7. 7. LET TEMPLATES DO THE WORK  This part gets edited by the user.  This part gets populated “automagically” by adding a query loop for this particular post type.
  8. 8. WHERE DO I EDIT THIS?  Keep the content area in mind Gets edited in Widgets, not the page.
  9. 9. DON‟T EXPECT THE USER TO KNOW HTML  DON‟T code HTML <div> into the content area.  No matter how well you train, the user will break it. o DO give the user special font and other styles they may need.
  10. 10. DON‟T RESTRICT THE TEXT <div class=“entry-content”> <?php the_content();?> </div> If „the_content‟ is in the main area how do we get this layout to work and allow the editing to happen on the page and not a widget? A custom template page with a custom field is one solution. Using plugins is another. Design should allow for content to breathe and change. The client should be allowed to update without restrictions!
  11. 11. A BUNCH OF PAGES THAT NEED TO LOOK THE SAME  Product, real estate listings, chamber members etc.  Setup Custom Post (Content) Types so it‟s very clear where that kind of content goes.  Plugins:  Custom Post Type UI  Custom Content Types  Several other good ones available as well  Or roll you own
  12. 12. WHAT ABOUT WIDGETS?  Great if what‟s in them is static  If they need to change for some pages…  Dynamic Widgets is a good  There are several other plugins that do similar things  If sidebar content needs to change on every page..  Graceful sidebar is great – sadly has no WYSIWYG editor  A custom template page with ACF is another way
  13. 13. TRAINING  All of your customizations are no good if you don‟t show the end user admin how to use them  Where does what content go? Make it as simple as possible  Where do slideshows go and how do I change them?  How do I use [shortcodes] for tables, forms, slideshows?  If you hate training, find someone who doesn‟t  Do more than train – have the client actually add content while developing, best way to learn
  14. 14. PLUGINS  Advanced Custom fields  A real rockstar and has many add-ons to increase it‟s versatility. http://wordpress.org/plugins/advanced-custom-fields/, http://www.advancedcustomfields.com/add-ons  Graceful Sidebar  Custom content in every page  http://wordpress.org/plugins/graceful-sidebar-plugin/  Custom Post Type UI  Easy to add custom taxonomies as well http://wordpress.org/plugins/custom-post- type-ui/  Custom Content Type Manager  Can add custom taxonomies, gives you a basic template to start with to show the fields and you can pick the menu icon http://wordpress.org/plugins/custom-content- type-manager/  Needs Custom Permalinks with it to give you pretty links. http://wordpress.org/plugins/custom-permalinks/  Dynamic Widgets  Assign different widget areas to different pages http://wordpress.org/plugins/dynamic-widgets/  TablePress  If you need to have tables, this is the best, easy to insert shortcode, easy to style http://wordpress.org/plugins/tablepress/  Underscores (_s) theme  Not a plugin, but a terrific starter theme that allows you complete flexibility to customize! http://underscores.me/
  15. 15. CONTACT INFO  Beckydavisdesign.com  @beckyddesign  Slides on slideshare.net/bdgardengirl

×