Pixel to User

Becky Davis
Becky DavisChief geek, Designer, Developer, Trainer at Becky Davis Design
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
1 of 15

Recommended

Take Control of Your Site w/ WordPress by
Take Control of Your Site w/ WordPressTake Control of Your Site w/ WordPress
Take Control of Your Site w/ WordPressBecky Davis
1.6K views18 slides
New Computer Systems by
New Computer SystemsNew Computer Systems
New Computer Systemsmrsmackenzie
2.3K views198 slides
W pthemes by
W pthemesW pthemes
W pthemesBecky Davis
988 views21 slides
Successful Website Design by
Successful Website DesignSuccessful Website Design
Successful Website DesignBecky Davis
3.1K views28 slides
الميتاداتا ودورها في تحسين الوصول الى مصادر المعلومات على شبكة الانترنت by
الميتاداتا ودورها في تحسين الوصول الى مصادر المعلومات على شبكة الانترنتالميتاداتا ودورها في تحسين الوصول الى مصادر المعلومات على شبكة الانترنت
الميتاداتا ودورها في تحسين الوصول الى مصادر المعلومات على شبكة الانترنتالدكتور طلال ناظم الزهيري
1.3K views30 slides
Project Management or how to herd cats by
Project Management or how to herd catsProject Management or how to herd cats
Project Management or how to herd catsBecky Davis
2.9K views11 slides

More Related Content

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows by
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Safe Software
344 views86 slides
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...ShapeBlue
65 views28 slides
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue by
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueMigrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueShapeBlue
96 views20 slides
PharoJS - Zürich Smalltalk Group Meetup November 2023 by
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023Noury Bouraqadi
141 views17 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
96 views7 slides
Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
369 views20 slides

Recently uploaded(20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software344 views
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by ShapeBlue
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
ShapeBlue65 views
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue by ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueMigrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
ShapeBlue96 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi141 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue96 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10369 views
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
ShapeBlue50 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson133 views
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates by ShapeBlue
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesKeynote Talk: Open Source is Not Dead - Charles Schulz - Vates
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates
ShapeBlue119 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue62 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue48 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc77 views
HTTP headers that make your website go faster - devs.gent November 2023 by Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn28 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu141 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue91 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ... by ShapeBlue
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
Backup and Disaster Recovery with CloudStack and StorPool - Workshop - Venko ...
ShapeBlue77 views

Featured

ChatGPT and the Future of Work - Clark Boyd by
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
25.3K views69 slides
Getting into the tech field. what next by
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
6K views22 slides
Google's Just Not That Into You: Understanding Core Updates & Search Intent by
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
6.5K views99 slides
How to have difficult conversations by
How to have difficult conversations How to have difficult conversations
How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC
5.2K views19 slides
Introduction to Data Science by
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data ScienceChristy Abraham Joy
82.4K views51 slides
Time Management & Productivity - Best Practices by
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
169.7K views42 slides

Featured(20)

ChatGPT and the Future of Work - Clark Boyd by Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd25.3K views
Getting into the tech field. what next by Tessa Mero
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero6K views
Google's Just Not That Into You: Understanding Core Updates & Search Intent by Lily Ray
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray6.5K views
Time Management & Productivity - Best Practices by Vit Horky
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky169.7K views
The six step guide to practical project management by MindGenius
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius36.6K views
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... by RachelPearson36
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson3612.7K views
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by Applitools
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools55.5K views
12 Ways to Increase Your Influence at Work by GetSmarter
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter401.7K views
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by DevGAMM Conference
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference3.6K views
Barbie - Brand Strategy Presentation by Erica Santiago
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago25.1K views
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well by Saba Software
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software25.2K views
Introduction to C Programming Language by Simplilearn
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn8.4K views
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr... by Palo Alto Software
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
Palo Alto Software88.4K views
9 Tips for a Work-free Vacation by Weekdone.com
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
Weekdone.com7.2K views
How to Map Your Future by SlideShop.com
How to Map Your FutureHow to Map Your Future
How to Map Your Future
SlideShop.com275.1K views

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