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

1. DESIGN 2 WORDPRESS
understanding the theming process
Alison Foxall
alisonfoxall.com
@alisonmf
front-end web design & development

2. YOU’LL NEED
1. DESIGN
2. HTML & CSS IN YOUR BRAIN
3. WORDPRESS INSTALL
4. GENERAL WP KNOW-HOW
RESOURCE: WORDPRESS.ORG

3. LAYERED PSD- READY TO MARKUP
URL: ALISONFOXALL.COM

4. BUILD THE PAGE AS YOU WOULD NORMALLY
RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP

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. AS SEEN ON: ALISONFOXALL.COM

7. AS SEEN ON: ALISONFOXALL.COM

8. LET’S DO THIS.

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. 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. WP TEMPLATE HIERARCHY
INDEX.PHP
RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY

12. WP TEMPLATE HIERARCHY
SINGLE.PHP
RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY

13. THE LOOP (DON’T BE AFRAID)
CODEX.WORDPRESS.ORG/THE_LOOP

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. WP TEMPLATE TAGS
(MAKE OUR LIVES EASIER)
THIS OUTPUTS THE CONTENT OF A POST
RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_TAGS

16. NORMAL STATIC HTML PAGE
RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP

17. CODEX.WORDPRESS.ORG/THEME_DEVELOPMENT

18. TIPS
Look at other themes.
Try, try, and try again.
Research!

19. QUESTIONS, COMMENTS AND
ANY SMART ALECK REMARKS?
Alison Foxall
alisonfoxall.com
@alisonmf
front-end developer/designer