This document provides an overview of the theming process in WordPress. It outlines the necessary skills, including design, HTML, CSS and WordPress knowledge. It explains how to determine static, dynamic and content areas. It describes key theme files like style.css, index.php and header/footer files. It also covers the WordPress template hierarchy and template tags to output content in an organized way. Resources are provided to learn more about the templating system and developing WordPress themes.

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