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/
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Pixel to User
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/