SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
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

Mais conteúdo relacionado

Último

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Último (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

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