Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Content Management Systems (CMS) & Wordpress theme development

Nächste SlideShare
Anatomy of a Wordpress theme
Anatomy of a Wordpress theme
Wird geladen in …3

Hier ansehen

1 von 79 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Content Management Systems (CMS) & Wordpress theme development (20)


Aktuellste (20)


Content Management Systems (CMS) & Wordpress theme development

  1. 1. Why CMS? (Content Management Systems) & Wordpress theme development
  2. 2. • first, a quick recap...
  3. 3. Web development trends • More content • More frequently (up-to-date and on-demand) • From more sources (crowd sourcing, mashups etc)
  4. 4. • More roles/contributors. • As a web designer you need to at least have an understanding of all these areas and how they fit together.
  5. 5. Dynamic Website Model • Website content is stored in a database (and/or other external sources) and assembled with markup and output by a web server script/application.
  6. 6. Advantages of dynamic website • Content can be updated in a decentralised way. (a single “webmaster” does not have the sole privilege/responsibility of updating the website) • Modularisation and reuse of common code (e.g. headers, menus). • Automation of tasks
  7. 7. Web Content Management Systems (WCMS) • A Content  Management  Systems  (CMS) is a tool that enables a variety of (centralised) technical and (de-centralised) non technical staff to create, edit, manage and finally publish (in a number of formats) a variety of content (such as text, graphics, video, documents etc), whilst being constrained by a centralised set of rules, process and workflows that ensure coherent, validated electronic content. • Enterprise Content Management (2008) What is a Content Management System or CMS? Available from: http:// www.contentmanager.eu.com/history.htm (Accessed 20/08/09)
  8. 8. Disadvantages of using a CMS • More complicated to set up • Level of technical knowledge required for developer AND designer increased • Designer needs to understand to an extent what constraints/conventions a design needs to be compatible • These will be different for every CMS and often difficult to determine definitively. • ‘One size fits most approach’ • Any ‘out of the box’ solution will force you into a certain way of doing things • Many CMSs are extendable/customisable, but even these processes follow certain models/conventions • At what point of does it make more sense to build your own CMS from scratch?
  9. 9. Disadvantages of using a CMS • Upgrading to newer versions of the CMS may break things. • Migrating content to a different CMS may be difficult or infeasible • In a rapidly evolving website, how do we know the current solution will still be the best one in a month, a year, 10 years? • What if we can’t export the content and view it outside the context of the CMS?
  10. 10. When not to use a CMS • If you have a website with a small amount of static content that will never change very frequently the overhead of setting up an elaborate CMS solution is probably not worth it. • If the design and/or architecture of your website is highly unique/ specialised then attempting to make it work with an out-of-the- box solution will be like forcing a square peg in a round hole.
  11. 11. Advantages of using a CMS • It makes managing lots of constantly updated content manageable. • What kind of management? • updating, publishing/unpublishing, archiving, searching, moderating, automating, securing etc. • By providing administration interfaces it (ideologically at least) allows people with no understanding of web architecture to become content publishers. • Internal and external (e.g. users can be leveraged as content contributors) • User accounts and privileges. • Automation of processes (e.g. publishing, creating users, menu creation etc.) • Common architecture means development of reusable plugins, templates/themes etc
  12. 12. Some Common WCMS features • Automated Templates • Access Control • Scalable Feature Sets • Web Standards Upgrades • Delegation and Collaboration • Document Workflow Management • Content Syndication http://en.wikipedia.org/wiki/Web_content_management_system#Capabilities
  13. 13. Content Management Confusion • So how many WCMS exist? • http://en.wikipedia.org/wiki/ List_of_content_management_systems
  14. 14. Which CMS!? • Choosing a WCMS: • Your needs, eg. technological, knowledge • Client needs, eg. content to be managed, costs, timeframe • CMS options, eg. Licensing, development team, security, accessibility and code quality, documentation and training, support • Boag, P (2008) too many content management systems.Available from: http://boagworld.com/technology/too-many-content- management-systems (Accessed 20/08/09)
  15. 15. Which CMS? • What are the requirements of my website? • From a design perspective (both presentation and content) • From an economic perspective • From a technological compatibility perspective • Now and in a month, a year, 10 years...? • Which CMS solution best meets these requirements? • Research, research, research! Jumping the gun at this point could turn into a costly mistake later on. • Try before you buy! (so to speak) • http://www.opensourcecms.com
  16. 16. Which CMS!? Complexity Versa4lity
  17. 17. Why Wordpress? • It is a good platform to ease you into the world of CMSs • It is relatively simple, but its functionality can be expanded greatly with a little extra work. • Free and open source • Popular • WordPress is used by 19.0% of all the websites, that is a content management system market share of 57.1% - http://w3techs.com/technologies/overview/content_management/all • Excellent documentation • Plenty of 3rd party tutorials • It has a few years behind it now and is being actively developed (it probably isn’t going away anytime soon) • It has a good track record of upgrading to new features without breaking old ones. • Runs on the very common W/M/LAMP server stack
  18. 18. • Blogging Tool • Brief History • Roots and development date back to 2001 • In 2005, version 1.5 was released which introduced themes, wordpress.com hosting startedIn 2006, 191,567 downloads, 371 plugins • In 2007, 2.9million downloads, 1,384 plugins • Is Wordpress a CMS?
  19. 19. Wordpress Plugins = CMS? • “Plugins can extend WordPress to do almost anything you can imagine.” Community contributed plugins that extend the Wordpress installation. • http://wordpress.org/extend/plugins/ • Some wordpress plugins designed to add CMS features: • Custom Admin Menu • Clutter Free (hides features from clients) • Wordpress Dashboard Editor • Custom Write Panel (create your own custom fields) • WP Contact Form • fGallery (image gallery that supports light box) • User Permissions • WP E-commerce • Just about anything • http://www.kongtechnology.com/2008/02/29/how-to-turn-wordpress-into-a-cms-website/
  20. 20. Example: Rebranding using the custom login plugin
  21. 21. Wordpress sites don’t have to look like blogs • There is no doubt that Wordpress began its life as a blogging tool, but with each version it gains more CMS features. • There are many websites built on Wordpress that would not be considered blogs.
  22. 22. Flickout.com
  23. 23. LucasHirata.com
  24. 24. More  Wordpress  sites  that  don’t  look  like  blogs • hAp://designtutorials4u.com/30-­‐crea4ve-­‐wordpress-­‐sites-­‐that-­‐dont-­‐ look-­‐like-­‐blogs/ • hAp://blogsessive.com/blogging-­‐tools/10-­‐beau4ful-­‐wordpress-­‐ websites/ • hAp://pelfusion.com/inspira4on/30-­‐wordpress-­‐based-­‐websites-­‐that-­‐ dont-­‐look-­‐like-­‐blogs/ • hAp://www.websitetology.com/?p=244 24
  25. 25. Server  requirements  (as  of  Wordpress  3.2) •  hAp://wordpress.org/about/requirements/ –PHP  version  5.2.4  or  greater –MySQL  version  5.0  or  greater –Apache  is  the  recommended  hAp  server 25
  26. 26. LAMP server stack • LAMP stands for Linux Apache MySql and Php, which, in a nutshell is just all the software that is required to serve your wordpress site. • http://www.computerguideonline.com/ internet/what-lamp-stack
  27. 27. Installing Wordpress on your remote web server • http://codex.wordpress.org/Installing_WordPress • 4 main steps are: 1. Download the Wordpress install package, unzip and upload to your web server using an FTP client 2. Create a new MySql database 3. Edit the wp-config.php file 4. Create an administrator account and start using wordpress!
  28. 28. 1. Install the Wordpress package • http://wordpress.org/download/
  29. 29. Extract
  30. 30. Upload to web server
  31. 31. 2. Create the Database • When you set up your web hosting, you should have been given a url and login details to a web hosting control panel, such as cPanel. This interface will allow you to create and manage MySql databases (if you’re lucky, they might even have a 1-step automated Wordpress install feature). • http://www.cpanel.net/media/tutorials/addmysql.htm
  32. 32. PHPMyAdmin • A common web interface for administering databases • If your hosting doesn’t have a database setup ‘wizard’ you can set up the database with this • PHPMyAdmin is what you will need to use if you are using the CIF hosting • https://phpmyadmin.ci.qut.edu.au/
  33. 33. 3. Edit the wp-config.php file • The wordpress directory you uploaded to your web server will contain a file called wp-config-sample.php. • You need to edit this file and then re-upload it to your server with the name wp-config.php (lose the -sample part).
  34. 34. 4. Create an administrator account for your wordpress site
  35. 35. Wordpress interfaces • Wordpress interfaces can be divided into the admin interfaces and the public interfaces. We might also refer to these as the backend and frontend interfaces respectively.
  36. 36. Admin/Backend Interface
  37. 37. Admin/Backend Interface • This is where you do all your Content Management • editing posts, moderating comments, installing plugins and themes, managing user accounts etc. • requires a login which you setup during installation. • accessible at www.yourwordpresssite.com/wp-admin • http://codex.wordpress.org/Administration_Screens#Dashboard
  38. 38. Public/Frontend Interface
  39. 39. Public/Frontend Interface • This is what visitors to the site will see when they go to your url. • You will want to check what the site looks like after making changes to the appearance or the content.
  40. 40. Wordpress  themes • Wordpress  can  install  themes  to  change  the  “look  and   feel”  of  the  site. • hAp://wordpress.org/extend/themes/ • Your  first  assignment  is  to  create  your  own  wordpress   theme  which  uniquely  services  the  content  and  purpose   of  your  site. 46
  41. 41. Wordpress  themes  admin  interface 47
  42. 42. Wordpress  themes  directory • hAp://wordpress.org/extend/themes/ 48
  43. 43. 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  aesthe4c  in  mind –  depending  on  how  much  customisa4on  you  do,  it  can  actually  end  up  taking  you   longer  and  cos4ng  more  than  doing  your  own  from  scratch   49
  44. 44. Crea4ng  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! 50
  45. 45. Anatomy  of  a  Wordpress  theme • wordpress  themes  are  installed  to  the  wp-­‐content/themes  directory 51
  46. 46. Anatomy  of  a  Wordpress  theme • consist  of  a  collec4on  of  php  files  as   well  as  one  or  more  css  files  and   associated  resources  (e.g.  imagery,   javascript  files  etc.). 52
  47. 47. 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 53
  48. 48. Template  tags • Wordpress  uses  it’s  own  php  func4ons  called  template  tags   to  output  informa4on  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  <4tle>  html  element.     • These  handy  func4ons  save  us  from  wri4ng  a  lot  of  extra   php  code. 54
  49. 49. header.php  template  file 55 view-­‐source  in  the  browser
  50. 50. So  where  do  we  find  out  what  data  wordpress  can  retrieve   and  what  php  code  retrieves  it?   • The  wordpress  codex –hAp://codex.wordpress.org/Template_Tags –hAp://codex.wordpress.org/Func4on_Reference/bloginfo • Look  at  other  themes • google  it –  e.g.  hAp://www.google.com.au/search?hl=en&qscrl=1&q=wordpress +display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai= 56
  51. 51. Anatomy  of  a  Wordpress  theme • wordpress  page  structure  can  be  logically  sec4oned   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  par4cular  names  like  header.php,  footer.php,   sidebar.php  etc). • each  block  (file)  can  be  included  and  reused  in  mul4ple   page  templates  using  template  tags  like  <?php   get_header();  ?> 57
  52. 52. Anatomy  of  a  Wordpress  theme 58
  53. 53. Anatomy  of  a  Wordpress  theme 59 hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
  54. 54. Anatomy  of  a  Wordpress  theme 60 hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/ default  template  for  a  single  post  -­‐  single.php
  55. 55. Template  Hierarchy 61 hAp://codex.wordpress.org/Template_Hierarchy
  56. 56. Anatomy  of  a  Wordpress  theme • Use  as  much  or  as  liAle  of  the  template   hierarchy  as  your  site  requires. • lets  look  at  some  of  the  most  common   template  files... 62
  57. 57. header.php • usually  contains  the  doctype,  metadata  and  <head>  sec4on  of   the  html  document • may  contain  the  top  naviga4on • include  the  header  in  other  template  files  to  avoid  duplica4ng   the  code  it  contains  with  <?php  get_header();  ?> 63
  58. 58. footer.php • anything  you  would  normally  put  in  a  common  page  footer.     • include  the  footer  in  other  template  files  to  avoid  duplica4ng   the  code  it  contains  with  <?php  get_footer();  ?> 64
  59. 59. sidebar.php • commonly  contains: –  naviga4on  (main  and/or  subnav) –  links  (internal  and  external) –  searchform –  widge4sed  plugins  that  can  be  added  and  removed   through  the  administrator  interface  (dashboard) • include  the  sidebar  in  other  template  files  with   <?php  get_sidebar(  $name  );  ?> 65
  60. 60. sidebar  -­‐  widgets 66
  61. 61. 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 67
  62. 62. index.php • default  frontpage • usually  displays  excerpts  of  recent  posts • use  the  wordpress  loop  to  ouput  posts –  hAp://codex.wordpress.org/The_Loop • usually  includes  the  header,  footer  and  sidebar   template  files 68
  63. 63. single.php • displays  the  en4re  contents  of  a  single  post • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 69
  64. 64. page.php • displays  the  contents  of  a  wordpress  page   content  item • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 70
  65. 65. 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  naviga4on  menu  that  links  to  various  categories  as  a   way  of  sec4oning  your  site  content. –  e.g.  hAp://www.smashingmagazine.com/ 71
  66. 66. func4ons.php • the  func4ons  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  func4ons  that  can   be  used  by  any  other  template  files. • it  is  automa4cally  “included”  by  Wordpress  (so  you  don’t   need  to  use  include  or  require  statements  before  accessing   it  from  another  template  file) 72
  67. 67. Anatomy  of  a  Wordpress  theme • for  a  more  detailed  and  complete  list  of  template  files  see  the  Wordpress   codex,  par4cularly: – hAp://codex.wordpress.org/Stepping_Into_Templates – hAp://codex.wordpress.org/Theme_Development – hAp://codex.wordpress.org/Site_Architecture_1.5 – hAp://codex.wordpress.org/Template_Hierarchy • for  a  complete  list  of  wordpress  func4ons  and  template  tags  (the  bits  of   php  you  use  to  get  stuff  from  the  database)  see  the  following: –  hAp://codex.wordpress.org/Func4on_Reference –  hAp://codex.wordpress.org/Template_Tags 73
  68. 68. Naviga4on  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  naviga4on  menu. –  hAp://codex.wordpress.org/Func4on_Reference/wp_list_pages –  hAp://codex.wordpress.org/Template_Tags/wp_list_categories • CSS  lists  -­‐  hAp://css.maxdesign.com.au/listama4c/ 74
  69. 69. So  what  about  the  CSS? • This  is  probably  the  least  different  part  of  developing  a  Wordpress   theme  compared  with  a  sta4c  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  func4on  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  inspec4on  tool  -­‐  it  is  even   more  of  useful  when  working  with  dynamic  websites. 75
  70. 70. 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  informa4on  about  the  theme  in  the   administrator  interface. 76
  71. 71. Installing  the  theme • it  also  looks  for  a  file  called  screenshot.png  in   the  template  directory  to  provide  a  preview   thumbnail  of  the  theme 77
  72. 72. Installing  the  theme • installing  the  theme  is  simply  a  maAer  of  putng  the  theme  folder  in  the   wp-­‐content/themes  directory  and  ac4va4ng  it  through  the  wordpress   admin  interface. 78
  73. 73. Wordpress  theme  development  =  all  your  usual   sta4c-­‐web  design  principles  plus  the  power  of  the   dynamic  web! 79