Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGN 2 WORDPRESS
understanding the theming process
Alison Foxall
alisonfoxall.com
@alisonmf
front-end web design & devel...
YOU’LL NEED



    1. DESIGN
    2. HTML & CSS IN YOUR BRAIN
    3. WORDPRESS INSTALL
    4. GENERAL WP KNOW-HOW




     ...
LAYERED PSD- READY TO MARKUP




URL: ALISONFOXALL.COM
BUILD THE PAGE AS YOU WOULD NORMALLY




 RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP
DETERMINE STATIC, DYNAMIC & CONTENT AREAS


1. HEADER & FOOTER FILES

2. WHAT’S CHANGING?

3. WHAT’S EDITABLE IN THE BACK-...
AS SEEN ON: ALISONFOXALL.COM
AS SEEN ON: ALISONFOXALL.COM
LET’S DO THIS.
THEME FILES
STYLE.CSS*
INDEX.PHP*
HEADER.PHP*
FOOTER.PHP*
ARCHIVE.PHP
SINGLE.PHP
PAGE.PHP
COMMENTS.PHP
SEARCH.PHP
ETC........
WP TEMPLATE HIERARCHY



PAGE-ID.PHP                PAGE.PHP           INDEX.PHP

          CATEGORY.PHP      ARCHIVE.PHP
...
WP TEMPLATE HIERARCHY
INDEX.PHP




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




        RESOURCE: CODEX.WORDPRESS.ORG/TEMPLATE_HIERARCHY
THE LOOP (DON’T BE AFRAID)




          CODEX.WORDPRESS.ORG/THE_LOOP
WP TEMPLATE TAGS
              (MAKE OUR LIVES EASIER)



PRE- DEFINED CALLS TO THE WP CORE
TO OUTPUT DATA SUCH AS:

   PO...
WP TEMPLATE TAGS
                   (MAKE OUR LIVES EASIER)




THIS OUTPUTS THE CONTENT OF A POST




             RESOUR...
NORMAL STATIC HTML PAGE




RESOURCE: W3SCHOOLS.COM/HTML5/DEFAULT.ASP
CODEX.WORDPRESS.ORG/THEME_DEVELOPMENT
TIPS

Look at other themes.

Try, try, and try again.

Research!
QUESTIONS, COMMENTS AND
         ANY SMART ALECK REMARKS?




Alison Foxall
alisonfoxall.com
@alisonmf
front-end developer...
Upcoming SlideShare
Loading in …5
×

of

Design 2 WordPress @ Barcamp Tampa 2010 Slide 1 Design 2 WordPress @ Barcamp Tampa 2010 Slide 2 Design 2 WordPress @ Barcamp Tampa 2010 Slide 3 Design 2 WordPress @ Barcamp Tampa 2010 Slide 4 Design 2 WordPress @ Barcamp Tampa 2010 Slide 5 Design 2 WordPress @ Barcamp Tampa 2010 Slide 6 Design 2 WordPress @ Barcamp Tampa 2010 Slide 7 Design 2 WordPress @ Barcamp Tampa 2010 Slide 8 Design 2 WordPress @ Barcamp Tampa 2010 Slide 9 Design 2 WordPress @ Barcamp Tampa 2010 Slide 10 Design 2 WordPress @ Barcamp Tampa 2010 Slide 11 Design 2 WordPress @ Barcamp Tampa 2010 Slide 12 Design 2 WordPress @ Barcamp Tampa 2010 Slide 13 Design 2 WordPress @ Barcamp Tampa 2010 Slide 14 Design 2 WordPress @ Barcamp Tampa 2010 Slide 15 Design 2 WordPress @ Barcamp Tampa 2010 Slide 16 Design 2 WordPress @ Barcamp Tampa 2010 Slide 17 Design 2 WordPress @ Barcamp Tampa 2010 Slide 18 Design 2 WordPress @ Barcamp Tampa 2010 Slide 19
Upcoming SlideShare
WordPress 2.5 Overview - Rich Media Institute
Next

3 Likes

Share

Design 2 WordPress @ Barcamp Tampa 2010

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • KyleWilliams

    Sep. 30, 2010
  • doncabaleiro

    Sep. 30, 2010
  • Blanka_art

    Sep. 27, 2010

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

Views

Total views

3,446

On Slideshare

0

From embeds

0

Number of embeds

249

Actions

Downloads

0

Shares

0

Comments

0

Likes

3

×