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.
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,490 views

Published on

A look at how a Wordpress theme is constructed

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

×