SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Designing for WordPress
                        @alternatekev | alternate.org | alternatkev.me

Wednesday, May 9, 12
What is
                       WordPress?
                        How is it different from a static site?

Wednesday, May 9, 12
Theme

                                     Plugins

                                     WordPress

                                     PHP




                                                        WP REQUEST STACK
                       STATIC SITE




                                     APACHE

                                     HOSTING PROVIDER



Wednesday, May 9, 12
Admin   Theme
Wednesday, May 9, 12
• Content Blocks
        • Design for WP user AND reader
        • Customization vs. Control
        • Many types of content
        • Sidebars, sidebars, sidebars
        • Custom Menus




Wednesday, May 9, 12
Questions!
             • What will this navigation look like with 12 items? Should we
                   support nested items?

             • Which plugins are most likely to be installed? What will
                   they look like when in sidebar A, sidebar B, etc?

             • What about this layout is fluid? What is fixed?
             • What is part of the template and non-editable? What will the
                   user want to change?

             • You are the designer. It’s your job to ask these questions
                   and to provide guidance to on how to answer them.


                                                                              6

Wednesday, May 9, 12
A Basic Theme’s Structure
                       • Home Page                 • Search Results

                       • Blog River / Posts Page   • Search Form
                       • Single Blog Page          • Sidebar(s)

                       • Category Listing          • Posts Archive
                       • Author Bio Page           • 404 Page

                       • Post Format Templates     • Basic Page Template




                                                                           7

Wednesday, May 9, 12
Ok... and?
                        You are not the one in control.


Wednesday, May 9, 12
Meta Data

          WP Loop

          Sidebar




Wednesday, May 9, 12
Posts
             • Customizable into post types (products, books, etc.)
             • Grouped and ordered by date posted (blog river)
             • Appear in RSS feed
             • Multiple formats
             • Categories
             • Tags
             • Excerpt


                                                                      10

Wednesday, May 9, 12
Featured
                       Images
                       • Attach an image to
                         any post, page or
                         custom post type.

                       • Use this image and
                         WordPress’s many
                         image features to call
                         the post out visually
                         anywhere.



                                                  11

Wednesday, May 9, 12
Pages
             • Are implemented as a custom post type
             • Explicit ordering
             • Hierarchy
             • Templates




                                                       12

Wednesday, May 9, 12
Empty
                       Pages
                       • Give it a name
                       • Select a template
                       • Content/structure/
                         etc. is defined in
                         template, not page
                         content




                                              13

Wednesday, May 9, 12
Wednesday, May 9, 12
Part of    Sidebar
                                        Page       w/Widgets
                                        Template   (Custom &
                                                    Jetpack)




                        Custom Menu




                       8 Custom Menus




Wednesday, May 9, 12
Custom Post Types
             • Not simply different “kinds of blog posts” (image,
                   quote, video, music, etc.), used to describe different
                   kind of thing (books, products, plants, etc.)

             • Can be based on intrinsic post or page type
             • Addition of custom meta fields make them very
                   powerful




                                                                            16

Wednesday, May 9, 12
Post Type Labels
             •     Name                               • Not Found Text (“No Speakers
                                                         found that match your search”)
             •     Singular Name
                                                      • Not Found in Trash Text (“No
             •     Add New Text (“Add New
                                                         Speakers found in trash”)
                   Speaker”)
                                                      • Parent Item Name (Speakers
             •     All Items Label (“All Speakers”)
                                                         belong to a “Company”)
             •     Edit Item Label (“Edit Speaker”)
                                                      • Menu Name (if different from
             •     New Item Label (“New Speaker”)        Name)

             •     View Item Label (“View Speaker”)

             •     Search Items (“Search for
                   Speakers”)
                                                                                          17

Wednesday, May 9, 12
Post Type Options
             • Label (“Speakers”)              • Show in Admin Bar (y/n)

             • Labels (all on the last page)   • Menu Position (#)
             • Visible to Public Users (y/n)   • Menu Icon

             • Exclude from Search (y/n)       • Capabilities (read, edit, delete,
                                                  publish, read private)
             • Show Admin UI (y/n)
                                               • Hierarchical (categories, etc)
             • Show in Menus (y/n)

             • Search Items (“Search for
                   Speakers”)



                                                                                     18

Wednesday, May 9, 12
Post Type Features
                       • Title                      • Custom Fields
                       • Editor                     • Comments

                       • Author                     • Revisions
                       • Thumbnail/Featured Image   • Page Attributes

                       • Excerpt                    • Post Formats

                       • Trackbacks




                                                                        19

Wednesday, May 9, 12
Custom
                       Taxonomies

                       • Categories & Tags are
                         implemented as
                         Custom Taxonomies

                       • Groupings and
                         parents of your
                         custom post types




                                                 20

Wednesday, May 9, 12
Custom Fields

                       • Custom data attached
                         to posts or custom
                         post types

                       • This data is available
                         during the Loop




                                                  21

Wednesday, May 9, 12
Post Formats
Wednesday, May 9, 12
Wednesday, May 9, 12
No Child Left
                         Behind
                           (themes, that is)

Wednesday, May 9, 12
(Rebuilding
                       WordCamp
                          site)
                                     25

Wednesday, May 9, 12
Text/
                       HTML
                       • Text & HTML widget
                       • Simple widget, lots of
                         flexibility




                                                  26

Wednesday, May 9, 12
Extra
                       Credit
                       • BuddyPress
                       • bbPress
                       • Sharing Plugins
                       • Drag & Drop
                       • GPL!



                                           27

Wednesday, May 9, 12

Más contenido relacionado

La actualidad más candente

Introduction to Linked Data: RDF Vocabularies
Introduction to Linked Data: RDF VocabulariesIntroduction to Linked Data: RDF Vocabularies
Introduction to Linked Data: RDF Vocabularies
David Wood
 

La actualidad más candente (11)

Connecting the Dots
Connecting the DotsConnecting the Dots
Connecting the Dots
 
Improving Site Design and Usability
Improving Site Design and UsabilityImproving Site Design and Usability
Improving Site Design and Usability
 
Wordpress genesis september 3 english rev cg
Wordpress genesis september 3 english rev cgWordpress genesis september 3 english rev cg
Wordpress genesis september 3 english rev cg
 
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
 
The Anatomy of a WordPress Theme
The Anatomy of a WordPress ThemeThe Anatomy of a WordPress Theme
The Anatomy of a WordPress Theme
 
Snapguide - Amazon Cloudsearch
Snapguide - Amazon CloudsearchSnapguide - Amazon Cloudsearch
Snapguide - Amazon Cloudsearch
 
Snapguide - CloudSearch
Snapguide - CloudSearchSnapguide - CloudSearch
Snapguide - CloudSearch
 
Drupal101
Drupal101Drupal101
Drupal101
 
Remodel your website
Remodel your websiteRemodel your website
Remodel your website
 
Introduction to Linked Data: RDF Vocabularies
Introduction to Linked Data: RDF VocabulariesIntroduction to Linked Data: RDF Vocabularies
Introduction to Linked Data: RDF Vocabularies
 
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2Writing a WordPress Theme - HighEdWeb 2013 #WRK2
Writing a WordPress Theme - HighEdWeb 2013 #WRK2
 

Destacado (18)

978 979-756-363-9-402 2
978 979-756-363-9-402 2978 979-756-363-9-402 2
978 979-756-363-9-402 2
 
Evaluation question 3
Evaluation question 3Evaluation question 3
Evaluation question 3
 
Zara
ZaraZara
Zara
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
 
Evaluation Question 2
Evaluation Question 2Evaluation Question 2
Evaluation Question 2
 
magnt
magntmagnt
magnt
 
Desktop publishing
Desktop publishingDesktop publishing
Desktop publishing
 
Article atelier floral
Article atelier floralArticle atelier floral
Article atelier floral
 
Designing for WordPress: Rethinking the Blank Canvas (WCSD edition)
Designing for WordPress: Rethinking the Blank Canvas (WCSD edition)Designing for WordPress: Rethinking the Blank Canvas (WCSD edition)
Designing for WordPress: Rethinking the Blank Canvas (WCSD edition)
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1
 
To+pancen+oye
To+pancen+oyeTo+pancen+oye
To+pancen+oye
 
Wind Turbines
Wind TurbinesWind Turbines
Wind Turbines
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1
 
Business Plan by linky
Business Plan by linkyBusiness Plan by linky
Business Plan by linky
 
Wind Turbines
Wind TurbinesWind Turbines
Wind Turbines
 
Hijab
HijabHijab
Hijab
 
Wordle presentation updated
Wordle presentation updatedWordle presentation updated
Wordle presentation updated
 
Powerpoint objectives marketing and merchandising
Powerpoint objectives marketing and merchandisingPowerpoint objectives marketing and merchandising
Powerpoint objectives marketing and merchandising
 

Similar a Designing for WordPress

Advanced Skinning & Styling for Android
Advanced Skinning & Styling for AndroidAdvanced Skinning & Styling for Android
Advanced Skinning & Styling for Android
cephus07
 
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
Acquia
 

Similar a Designing for WordPress (20)

Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012
 
WordPress Themes Demystified
WordPress Themes DemystifiedWordPress Themes Demystified
WordPress Themes Demystified
 
WordCamp Philly Review
WordCamp Philly ReviewWordCamp Philly Review
WordCamp Philly Review
 
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
Advanced Skinning & Styling for Android
Advanced Skinning & Styling for AndroidAdvanced Skinning & Styling for Android
Advanced Skinning & Styling for Android
 
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
 
WordPress Blogs 101
WordPress Blogs 101WordPress Blogs 101
WordPress Blogs 101
 
SEO for Content Creators
SEO for Content CreatorsSEO for Content Creators
SEO for Content Creators
 
Drupal - Introduction to Drupal Menu and Theme Management
Drupal - Introduction to Drupal Menu and Theme  ManagementDrupal - Introduction to Drupal Menu and Theme  Management
Drupal - Introduction to Drupal Menu and Theme Management
 
WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1WordPress Theme Workshop: Part 1
WordPress Theme Workshop: Part 1
 
WordPress 101 Class
WordPress 101 ClassWordPress 101 Class
WordPress 101 Class
 
Mongodb my
Mongodb myMongodb my
Mongodb my
 
MongoDB
MongoDBMongoDB
MongoDB
 
MongoDB
MongoDBMongoDB
MongoDB
 
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type ChecklistPreventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
 
Choosing the Right WordPress Theme
Choosing the Right WordPress ThemeChoosing the Right WordPress Theme
Choosing the Right WordPress Theme
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
Confluence Theming 101: How to Build a Theme - Atlassian Summit 2010 - Lightn...
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 

Último

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Último (20)

ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 

Designing for WordPress

  • 1. Designing for WordPress @alternatekev | alternate.org | alternatkev.me Wednesday, May 9, 12
  • 2. What is WordPress? How is it different from a static site? Wednesday, May 9, 12
  • 3. Theme Plugins WordPress PHP WP REQUEST STACK STATIC SITE APACHE HOSTING PROVIDER Wednesday, May 9, 12
  • 4. Admin Theme Wednesday, May 9, 12
  • 5. • Content Blocks • Design for WP user AND reader • Customization vs. Control • Many types of content • Sidebars, sidebars, sidebars • Custom Menus Wednesday, May 9, 12
  • 6. Questions! • What will this navigation look like with 12 items? Should we support nested items? • Which plugins are most likely to be installed? What will they look like when in sidebar A, sidebar B, etc? • What about this layout is fluid? What is fixed? • What is part of the template and non-editable? What will the user want to change? • You are the designer. It’s your job to ask these questions and to provide guidance to on how to answer them. 6 Wednesday, May 9, 12
  • 7. A Basic Theme’s Structure • Home Page • Search Results • Blog River / Posts Page • Search Form • Single Blog Page • Sidebar(s) • Category Listing • Posts Archive • Author Bio Page • 404 Page • Post Format Templates • Basic Page Template 7 Wednesday, May 9, 12
  • 8. Ok... and? You are not the one in control. Wednesday, May 9, 12
  • 9. Meta Data WP Loop Sidebar Wednesday, May 9, 12
  • 10. Posts • Customizable into post types (products, books, etc.) • Grouped and ordered by date posted (blog river) • Appear in RSS feed • Multiple formats • Categories • Tags • Excerpt 10 Wednesday, May 9, 12
  • 11. Featured Images • Attach an image to any post, page or custom post type. • Use this image and WordPress’s many image features to call the post out visually anywhere. 11 Wednesday, May 9, 12
  • 12. Pages • Are implemented as a custom post type • Explicit ordering • Hierarchy • Templates 12 Wednesday, May 9, 12
  • 13. Empty Pages • Give it a name • Select a template • Content/structure/ etc. is defined in template, not page content 13 Wednesday, May 9, 12
  • 15. Part of Sidebar Page w/Widgets Template (Custom & Jetpack) Custom Menu 8 Custom Menus Wednesday, May 9, 12
  • 16. Custom Post Types • Not simply different “kinds of blog posts” (image, quote, video, music, etc.), used to describe different kind of thing (books, products, plants, etc.) • Can be based on intrinsic post or page type • Addition of custom meta fields make them very powerful 16 Wednesday, May 9, 12
  • 17. Post Type Labels • Name • Not Found Text (“No Speakers found that match your search”) • Singular Name • Not Found in Trash Text (“No • Add New Text (“Add New Speakers found in trash”) Speaker”) • Parent Item Name (Speakers • All Items Label (“All Speakers”) belong to a “Company”) • Edit Item Label (“Edit Speaker”) • Menu Name (if different from • New Item Label (“New Speaker”) Name) • View Item Label (“View Speaker”) • Search Items (“Search for Speakers”) 17 Wednesday, May 9, 12
  • 18. Post Type Options • Label (“Speakers”) • Show in Admin Bar (y/n) • Labels (all on the last page) • Menu Position (#) • Visible to Public Users (y/n) • Menu Icon • Exclude from Search (y/n) • Capabilities (read, edit, delete, publish, read private) • Show Admin UI (y/n) • Hierarchical (categories, etc) • Show in Menus (y/n) • Search Items (“Search for Speakers”) 18 Wednesday, May 9, 12
  • 19. Post Type Features • Title • Custom Fields • Editor • Comments • Author • Revisions • Thumbnail/Featured Image • Page Attributes • Excerpt • Post Formats • Trackbacks 19 Wednesday, May 9, 12
  • 20. Custom Taxonomies • Categories & Tags are implemented as Custom Taxonomies • Groupings and parents of your custom post types 20 Wednesday, May 9, 12
  • 21. Custom Fields • Custom data attached to posts or custom post types • This data is available during the Loop 21 Wednesday, May 9, 12
  • 24. No Child Left Behind (themes, that is) Wednesday, May 9, 12
  • 25. (Rebuilding WordCamp site) 25 Wednesday, May 9, 12
  • 26. Text/ HTML • Text & HTML widget • Simple widget, lots of flexibility 26 Wednesday, May 9, 12
  • 27. Extra Credit • BuddyPress • bbPress • Sharing Plugins • Drag & Drop • GPL! 27 Wednesday, May 9, 12