Wordpress	
  themes
• Wordpress	
  can	
  install	
  themes	
  to	
  change	
  the	
  “look	
  and	
  
feel”	
  of	
  the	...
Wordpress	
  themes	
  admin	
  interface
2
Wordpress	
  themes	
  directory
• h7p://wordpress.org/extend/themes/
3
Using	
  a	
  pre-­‐made	
  theme
• Advantages
–	
  quick	
  &	
  easy
–	
  plenty	
  of	
  well-­‐made	
  free	
  themes
...
CreaJng	
  your	
  own	
  theme	
  from	
  scratch
• Disadvantages
–	
  can	
  take	
  longer	
  and	
  be	
  costlier
–	
...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• wordpress	
  themes	
  are	
  installed	
  to	
  the	
  wp-­‐content/themes	
  ...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• consist	
  of	
  a	
  collecJon	
  of	
  php	
  files	
  as	
  
well	
  as	
  on...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• php	
  files	
  contain	
  html	
  markup	
  interspersed	
  with	
  php	
  snip...
Template	
  tags
• Wordpress	
  uses	
  it’s	
  own	
  php	
  funcJons	
  called	
  template	
  tags	
  
to	
  output	
  i...
header.php	
  template	
  file
10
view-­‐source	
  in	
  the	
  browser
So	
  where	
  do	
  we	
  find	
  out	
  what	
  data	
  wordpress	
  can	
  retrieve	
  
and	
  what	
  php	
  code	
  re...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• wordpress	
  page	
  structure	
  can	
  be	
  logically	
  secJoned	
  
into	
...
Anatomy	
  of	
  a	
  Wordpress	
  theme
13
Anatomy	
  of	
  a	
  Wordpress	
  theme
14
h7p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
Anatomy	
  of	
  a	
  Wordpress	
  theme
15
h7p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/...
Template	
  Hierarchy
16
h7p://codex.wordpress.org/Template_Hierarchy
Anatomy	
  of	
  a	
  Wordpress	
  theme
• Use	
  as	
  much	
  or	
  as	
  li7le	
  of	
  the	
  template	
  
hierarchy	
...
header.php
• usually	
  contains	
  the	
  doctype,	
  metadata	
  and	
  <head>	
  secJon	
  of	
  
the	
  html	
  docume...
footer.php
• anything	
  you	
  would	
  normally	
  put	
  in	
  a	
  common	
  page	
  footer.	
  	
  
• include	
  the	...
sidebar.php
• commonly	
  contains:
–	
  navigaJon	
  (main	
  and/or	
  subnav)
–	
  links	
  (internal	
  and	
  externa...
sidebar	
  -­‐	
  widgets
21
The	
  content
• Wordpress	
  has	
  2	
  main	
  content	
  types,	
  posts	
  and	
  pages
• The	
  3	
  main	
  templat...
index.php
• default	
  frontpage
• usually	
  displays	
  excerpts	
  of	
  recent	
  posts
• use	
  the	
  wordpress	
  l...
single.php
• displays	
  the	
  enJre	
  contents	
  of	
  a	
  single	
  post
• may	
  display	
  comments	
  if	
  enabl...
page.php
• displays	
  the	
  contents	
  of	
  a	
  wordpress	
  page	
  
content	
  item
• may	
  display	
  comments	
 ...
categories.php
• wordpress	
  supports	
  categorising	
  posts	
  in	
  a	
  custom	
  taxonomy.
• It	
  can	
  be	
  use...
funcJons.php
• the	
  funcJons	
  file	
  is	
  different	
  in	
  that	
  it	
  doesn’t	
  map	
  to	
  any	
  
displayable...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• for	
  a	
  more	
  detailed	
  and	
  complete	
  list	
  of	
  template	
  fil...
NavigaJon	
  menus
• the	
  template	
  tags	
  wp_list_pages	
  and	
  wp_list_categories	
  
will	
  output	
  a	
  list...
So	
  what	
  about	
  the	
  CSS?
• This	
  is	
  probably	
  the	
  least	
  different	
  part	
  of	
  developing	
  a	
...
Installing	
  the	
  theme
• Wordpress	
  looks	
  for	
  some	
  pre-­‐defined	
  text	
  in	
  a	
  comment	
  block	
  a...
Installing	
  the	
  theme
• it	
  also	
  looks	
  for	
  a	
  file	
  called	
  screenshot.png	
  in	
  
the	
  template	...
Installing	
  the	
  theme
• installing	
  the	
  theme	
  is	
  simply	
  a	
  ma7er	
  of	
  pupng	
  the	
  theme	
  fo...
Upcoming SlideShare
Loading in …5
×

Anatomy of a Wordpress theme

3,123 views
3,035 views

Published on

A look at how a Wordpress theme is constructed

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,123
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Anatomy of a Wordpress theme

  1. 1. Wordpress  themes • Wordpress  can  install  themes  to  change  the  “look  and   feel”  of  the  site. • h7p://wordpress.org/extend/themes/ • Your  first  assignment  is  to  create  your  own  wordpress   theme  which  uniquely  services  the  content  and  purpose   of  your  site. 1
  2. 2. Wordpress  themes  admin  interface 2
  3. 3. Wordpress  themes  directory • h7p://wordpress.org/extend/themes/ 3
  4. 4. Using  a  pre-­‐made  theme • Advantages –  quick  &  easy –  plenty  of  well-­‐made  free  themes –  can  modify  to  suit  your  own  needs • Disadvantages –  generic  -­‐  so  not  made  with  your  unique  content  or  aestheJc  in  mind –  depending  on  how  much  customisaJon  you  do,  it  can  actually  end  up  taking  you   longer  and  cosJng  more  than  doing  your  own  from  scratch   4
  5. 5. CreaJng  your  own  theme  from  scratch • Disadvantages –  can  take  longer  and  be  costlier –  you  have  to  learn  how  to  make  themes • Advantages –  Unique –  completely  flexible  and  customisable –  complete  control  over  resources  -­‐  no  waste –  you  get  to  learn  how  to  make  themes! 5
  6. 6. Anatomy  of  a  Wordpress  theme • wordpress  themes  are  installed  to  the  wp-­‐content/themes  directory 6
  7. 7. Anatomy  of  a  Wordpress  theme • consist  of  a  collecJon  of  php  files  as   well  as  one  or  more  css  files  and   associated  resources  (e.g.  imagery,   javascript  files  etc.). 7
  8. 8. Anatomy  of  a  Wordpress  theme • php  files  contain  html  markup  interspersed  with  php  snippets  which   retrieve  content  from  the  wordpress  database  and  output  the  result  to   plain  html  for  the  browser  to  render 8
  9. 9. Template  tags • Wordpress  uses  it’s  own  php  funcJons  called  template  tags   to  output  informaJon  to  the  page. • For  example  in  the  next  slide  the  template  tag  bloginfo  is   used  to  get  the  name  of  the  site  from  the  database  and   output  it  within  the  <Jtle>  html  element.     • These  handy  funcJons  save  us  from  wriJng  a  lot  of  extra   php  code. 9
  10. 10. header.php  template  file 10 view-­‐source  in  the  browser
  11. 11. So  where  do  we  find  out  what  data  wordpress  can  retrieve   and  what  php  code  retrieves  it?   • The  wordpress  codex –h7p://codex.wordpress.org/Template_Tags –h7p://codex.wordpress.org/FuncJon_Reference/bloginfo • Look  at  other  themes • google  it –  e.g.  h7p://www.google.com.au/search?hl=en&qscrl=1&q=wordpress +display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai= 11
  12. 12. Anatomy  of  a  Wordpress  theme • wordpress  page  structure  can  be  logically  secJoned   into  a  number  of  building  blocks. • each  of  these  blocks  correspond  to  a  separate  php  file   in  the  theme  directory  (wordpress  expects  these  files   to  have  parJcular  names  like  header.php,  footer.php,   sidebar.php  etc). • each  block  (file)  can  be  included  and  reused  in  mulJple   page  templates  using  template  tags  like  <?php   get_header();  ?> 12
  13. 13. Anatomy  of  a  Wordpress  theme 13
  14. 14. Anatomy  of  a  Wordpress  theme 14 h7p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
  15. 15. Anatomy  of  a  Wordpress  theme 15 h7p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/ default  template  for  a  single  post  -­‐  single.php
  16. 16. Template  Hierarchy 16 h7p://codex.wordpress.org/Template_Hierarchy
  17. 17. Anatomy  of  a  Wordpress  theme • Use  as  much  or  as  li7le  of  the  template   hierarchy  as  your  site  requires. • lets  look  at  some  of  the  most  common   template  files... 17
  18. 18. header.php • usually  contains  the  doctype,  metadata  and  <head>  secJon  of   the  html  document • may  contain  the  top  navigaJon • include  the  header  in  other  template  files  to  avoid  duplicaJng   the  code  it  contains  with  <?php  get_header();  ?> 18
  19. 19. footer.php • anything  you  would  normally  put  in  a  common  page  footer.     • include  the  footer  in  other  template  files  to  avoid  duplicaJng   the  code  it  contains  with  <?php  get_footer();  ?> 19
  20. 20. sidebar.php • commonly  contains: –  navigaJon  (main  and/or  subnav) –  links  (internal  and  external) –  searchform –  widgeJsed  plugins  that  can  be  added  and  removed   through  the  administrator  interface  (dashboard) • include  the  sidebar  in  other  template  files  with   <?php  get_sidebar(  $name  );  ?> 20
  21. 21. sidebar  -­‐  widgets 21
  22. 22. The  content • Wordpress  has  2  main  content  types,  posts  and  pages • The  3  main  template  files  associated  with  displaying  these  are   single.php,  page.php  and  index.php 22
  23. 23. index.php • default  frontpage • usually  displays  excerpts  of  recent  posts • use  the  wordpress  loop  to  ouput  posts –  h7p://codex.wordpress.org/The_Loop • usually  includes  the  header,  footer  and  sidebar   template  files 23
  24. 24. single.php • displays  the  enJre  contents  of  a  single  post • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 24
  25. 25. page.php • displays  the  contents  of  a  wordpress  page   content  item • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 25
  26. 26. categories.php • wordpress  supports  categorising  posts  in  a  custom  taxonomy. • It  can  be  useful  to  have  pages  that  only  show  posts  in  a  given  category. • You  can  provide  a  navigaJon  menu  that  links  to  various  categories  as  a   way  of  secJoning  your  site  content. –  e.g.  h7p://www.smashingmagazine.com/ 26
  27. 27. funcJons.php • the  funcJons  file  is  different  in  that  it  doesn’t  map  to  any   displayable  content  block  on  the  page • it  is  simply  a  place  to  store  any  reusable  funcJons  that  can   be  used  by  any  other  template  files. • it  is  automaJcally  “included”  by  Wordpress  (so  you  don’t   need  to  use  include  or  require  statements  before  accessing   it  from  another  template  file) 27
  28. 28. Anatomy  of  a  Wordpress  theme • for  a  more  detailed  and  complete  list  of  template  files  see  the  Wordpress   codex,  parJcularly: – h7p://codex.wordpress.org/Stepping_Into_Templates – h7p://codex.wordpress.org/Theme_Development – h7p://codex.wordpress.org/Site_Architecture_1.5 – h7p://codex.wordpress.org/Template_Hierarchy • for  a  complete  list  of  wordpress  funcJons  and  template  tags  (the  bits  of   php  you  use  to  get  stuff  from  the  database)  see  the  following: –  h7p://codex.wordpress.org/FuncJon_Reference –  h7p://codex.wordpress.org/Template_Tags 28
  29. 29. NavigaJon  menus • the  template  tags  wp_list_pages  and  wp_list_categories   will  output  a  list  of  links  (<li><a>...</a></li>)  that  can  be   styled  like  any  list  based  navigaJon  menu. –  h7p://codex.wordpress.org/FuncJon_Reference/wp_list_pages –  h7p://codex.wordpress.org/Template_Tags/wp_list_categories • CSS  lists  -­‐  h7p://css.maxdesign.com.au/listamaJc/ 29
  30. 30. So  what  about  the  CSS? • This  is  probably  the  least  different  part  of  developing  a  Wordpress   theme  compared  with  a  staJc  website. • The  style.css  sits  in  the  theme  directory  and  is  usually  added  to  the   header.php  with  a  standard  link  tag,  but  with  a  Wordpress  funcJon  in   place  of  the  url. –  <link  rel="stylesheet"  type="text/css"  media="all"  href="<?php   bloginfo(  'stylesheet_url'  );  ?>"  />   • Get  used  to  using  firebug  or  a  similar  html/css  inspecJon  tool  -­‐  it  is  even   more  of  useful  when  working  with  dynamic  websites. 30
  31. 31. Installing  the  theme • Wordpress  looks  for  some  pre-­‐defined  text  in  a  comment  block  at  the   top  of  style.css  so  it  can  display  this  informaJon  about  the  theme  in  the   administrator  interface. 31
  32. 32. Installing  the  theme • it  also  looks  for  a  file  called  screenshot.png  in   the  template  directory  to  provide  a  preview   thumbnail  of  the  theme 32
  33. 33. Installing  the  theme • installing  the  theme  is  simply  a  ma7er  of  pupng  the  theme  folder  in  the   wp-­‐content/themes  directory  and  acJvaJng  it  through  the  Wordpress   admin  interface. 33

×