Design 2 WordPress @ Barcamp Tampa 2010

3,226 views
3,127 views

Published on

Alison Foxall's presentation of "Design 2 WordPress" in Saturday's session of Barcamp Tampa 2010.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,226
On SlideShare
0
From Embeds
0
Number of Embeds
248
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design 2 WordPress @ Barcamp Tampa 2010

  1. 1. DESIGN 2 WORDPRESS understanding the theming process Alison Foxall alisonfoxall.com @alisonmf front-end web design & development
  2. 2. YOU’LL NEED 1. DESIGN 2. HTML & CSS IN YOUR BRAIN 3. WORDPRESS INSTALL 4. GENERAL WP KNOW-HOW RESOURCE: WORDPRESS.ORG
  3. 3. LAYERED PSD- READY TO MARKUP URL: ALISONFOXALL.COM
  4. 4. BUILD THE PAGE AS YOU WOULD NORMALLY RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP
  5. 5. DETERMINE STATIC, DYNAMIC & CONTENT AREAS 1. HEADER & FOOTER FILES 2. WHAT’S CHANGING? 3. WHAT’S EDITABLE IN THE BACK-END (ADMIN PANEL) RESOURCE: WORDPRESS.ORG
  6. 6. AS SEEN ON: ALISONFOXALL.COM
  7. 7. AS SEEN ON: ALISONFOXALL.COM
  8. 8. LET’S DO THIS.
  9. 9. THEME FILES STYLE.CSS* INDEX.PHP* HEADER.PHP* FOOTER.PHP* ARCHIVE.PHP SINGLE.PHP PAGE.PHP COMMENTS.PHP SEARCH.PHP ETC..... CODEX.WORDPRESS.ORG/THEME_DEVELOPMENT#TEMPLATE_FILES
  10. 10. WP TEMPLATE HIERARCHY PAGE-ID.PHP PAGE.PHP INDEX.PHP CATEGORY.PHP ARCHIVE.PHP TAG.PHP SINGLE.PHP RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY
  11. 11. WP TEMPLATE HIERARCHY INDEX.PHP RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY
  12. 12. WP TEMPLATE HIERARCHY SINGLE.PHP RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY
  13. 13. THE LOOP (DON’T BE AFRAID) CODEX.WORDPRESS.ORG/THE_LOOP
  14. 14. WP TEMPLATE TAGS (MAKE OUR LIVES EASIER) PRE- DEFINED CALLS TO THE WP CORE TO OUTPUT DATA SUCH AS: POST TITLE YOUR CONTENT AN EXCERPT POST TAGS POST CATEGORIES DATE OF POST RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_TAGS
  15. 15. WP TEMPLATE TAGS (MAKE OUR LIVES EASIER) THIS OUTPUTS THE CONTENT OF A POST RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_TAGS
  16. 16. NORMAL STATIC HTML PAGE RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP
  17. 17. CODEX.WORDPRESS.ORG/THEME_DEVELOPMENT
  18. 18. TIPS Look at other themes. Try, try, and try again. Research!
  19. 19. QUESTIONS, COMMENTS AND ANY SMART ALECK REMARKS? Alison Foxall alisonfoxall.com @alisonmf front-end developer/designer

×