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.
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.
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.
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.
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.
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.
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.
WHERE DO I EDIT THIS?
 Keep the content area in mind
Gets edited in
Widgets, not
the page.

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.
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.
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.
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.
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.
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.
CONTACT INFO
 Beckydavisdesign.com
 @beckyddesign
 Slides on slideshare.net/bdgardengirl