Anatomy of a Wordpress theme
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Anatomy of a Wordpress theme

on

  • 2,646 views

A look at how a Wordpress theme is constructed

A look at how a Wordpress theme is constructed

Statistics

Views

Total Views
2,646
Views on SlideShare
2,601
Embed Views
45

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 45

http://dave.if90.net 45

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Anatomy of a Wordpress theme Presentation Transcript

  • 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. Wordpress  themes  admin  interface 2
  • 3. Wordpress  themes  directory • h7p://wordpress.org/extend/themes/ 3
  • 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. 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. Anatomy  of  a  Wordpress  theme • wordpress  themes  are  installed  to  the  wp-­‐content/themes  directory 6
  • 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. 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. 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. header.php  template  file 10 view-­‐source  in  the  browser
  • 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. 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. Anatomy  of  a  Wordpress  theme 13
  • 14. Anatomy  of  a  Wordpress  theme 14 h7p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
  • 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. Template  Hierarchy 16 h7p://codex.wordpress.org/Template_Hierarchy
  • 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. 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. 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. 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. sidebar  -­‐  widgets 21
  • 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. 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. single.php • displays  the  enJre  contents  of  a  single  post • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 24
  • 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. 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. 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. 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. 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. 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. 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. 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. 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