• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pixel to User

Pixel to User



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?

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/



Total Views
Views on SlideShare
Embed Views



5 Embeds 335

http://codewordpress.com 266
http://eventifier.co 29
http://plus.url.google.com 27
https://twitter.com 12
http://www.eventifier.co 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Pixel to User Pixel to User Presentation Transcript

    • FROM PIXEL TO USER Creating WordPress themes that satisfy the design and work for the end user WordCamp Chicago 2013 Becky Davis - @beckyddesign
    • 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
    • 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/
    • 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
    • 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
    • HOW MANY TEMPLATE PAGES NEEDED?  Every time layout changes  Label them well so user knows /** * Template name: Full width, no sidebar */ page-full.php
    • 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.
    • 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 will break it. o DO give the user special font and other styles they may need.
    • 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!
    • 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
    • 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
    • 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
    • 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/
    • CONTACT INFO  Beckydavisdesign.com  @beckyddesign  Slides on slideshare.net/bdgardengirl