Cms & wordpress theme development 2011


Published on

Web Content Management Systems and Wordpress theme development

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cms & wordpress theme development 2011

  1. 1. Why CMS? (Content Management Systems) & Wordpress theme development
  2. 2. • first, a quick recap...
  3. 3. So what are the trends?• More content• More frequently (up-to-date and on- demand)• From more sources (crowd sourcing, mashups etc)
  4. 4. So what are the trends?• More contributors. As a web designer you need to at least have an understanding of all these areas and how they fit together.
  5. 5. So what are the trends?• Moving away from a static web towards a dynamic web.
  6. 6. Static vs Dynamic Website
  7. 7. Advantages of static websites• Lower entry barrier for development (just plain old html and css files).• Simple hosting requirements• Easily cacheable• Can be viewed “offline”
  8. 8. Disadvantages of static websites• Much less scope for interactivity, customisation, personalisation.• Every little change/update needs to be done manually.• Version control issues with multiple contributors.
  9. 9. Dynamic website• Website content is stored in a database (and/or other external sources) and assembled with markup and output by a web server script.
  10. 10. 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
  11. 11. Disadvantages of dynamic website• Higher entry barrier / learning curve for development• More complex web server requirements• Issues with pages being indexed by search engines.• Overall the benefits will almost always outweigh the disadvantages.
  12. 12. Web Content Management Systems (WCMS)• Basically a series of interfaces for performing common tasks by various users of a dynamic website.• ... and an official definition ...• 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: (Accessed 20/08/09)
  13. 13. 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 level access.• Automation of processes• Common architecture means development of reusable plugins, templates/themes etc
  14. 14. 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?
  15. 15. Disadvantages of using a CMS• Upgrading the underlying technologies of the CMS may be difficult or impossible (especially if you have customised core code)• Migrating content to a different CMS may be difficult or impossible • 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?• Search Engine Optimisation (SEO) issues associated with dynamic web sites.
  16. 16. Common WCMS features• Automated Templates• Easily Editable Content• Scalable Feature Sets• Web Standards Upgrades• Workflow Management• Delegation• Document Management• Content Virtualisation
  17. 17. Content Management Confusion• So how many WCMS exist?• List_of_content_management_systems• Why are there so many?
  18. 18. 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: many-content-management-systems (Accessed 20/08/09)
  19. 19. 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. Don’t believe the hype!• If the design and/or architecture of your website is highly unique/specialised then attempting to make it work with an out-of-
  20. 20. 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) •
  21. 21. Which CMS!?Complexity Versa4lity
  22. 22. 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• 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
  23. 23. • Blogging Tool• Brief History • Roots and development date back to 2001 • In 2005, version 1.5 was released which introduced themes, hosting startedIn 2006, 191,567 downloads, 371 plugins • In 2007, 2.9million downloads, 1,384 plugins• Is Wordpress a CMS?
  24. 24. Wordpress Plugins = CMS?• “Plugins can extend WordPress to do almost anything you can imagine.” Community contributed plugins that extend the Wordpress installation.•• 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• website/
  25. 25. Example: Rebranding using the custom login plugin
  26. 26. Wordpress sites don’thave 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.
  27. 27.
  28. 28.
  29. 29. More  Wordpress  sites  that  don’t  look  like   blogs• h;p://­‐crea4ve-­‐ wordpress-­‐sites-­‐that-­‐dont-­‐look-­‐like-­‐blogs/• h;p://­‐tools/10-­‐ beau4ful-­‐wordpress-­‐websites/• h;p://­‐wordpress-­‐ based-­‐websites-­‐that-­‐dont-­‐look-­‐like-­‐blogs/• h;p:// 29
  30. 30. Server  requirements  (as  of  Wordpress  3.2)•  h;p:// –PHP  version  5.2.4  or  greater –MySQL  version  5.0  or  greater –Apache  is  the  recommended  h;p  server 30
  31. 31. 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.•
  32. 32. Installing Wordpress on your remote web server•• 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!
  33. 33. 1. Install the Wordpress package•
  34. 34. Extract
  35. 35. Upload to web server
  36. 36. 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).• addmysql.htm
  37. 37. 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).
  38. 38. 4. Create an administrator account for your wordpress site
  39. 39. 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.
  40. 40. Admin/Backend Interface
  41. 41. 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 admin• Administration_Screens#Dashboard
  42. 42. Public/Frontend Interface
  43. 43. 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.
  44. 44. Wordpress  themes• Wordpress  can  install  themes  to  change  the   “look  and  feel”  of  the  site.• h;p://• Your  first  assignment  is  to  create  your  own   wordpress  theme  which  uniquely  services  the   content  and  purpose  of  your  site. 50
  45. 45. Wordpress  themes  admin  interface 51
  46. 46. Wordpress  themes  directory• h;p:// 52
  47. 47. Using  a  pre-­‐made  theme• Advantages –  quick  &  easy –  plenty  of  well-­‐made  free  themes –  can  modify  to  suit  your  own  needs• Disadvantages –  less  unique –  generic  -­‐  so  not  made  with  your  unique  content  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   53
  48. 48. 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! 54
  49. 49. Anatomy  of  a  Wordpress  theme• wordpress  themes  are  installed  to  the  wp-­‐ content/themes  directory 55
  50. 50. 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.). 56
  51. 51. 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 57
  52. 52. 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  whithin  the  <4tle>   html  element.    • These  handy  func4ons  save  us  from  wri4ng  a  lot   of  extra  php  code. 58
  53. 53. header.php  template  fileview-­‐source  in  the  browser 59
  54. 54. So  where  do  we  find  out  what  data  wordpress   can  retrieve  and  what  php  code  retrieves  it?  • The  wordpress  codex –h;p:// –h;p:// bloginfo• Look  at  other  themes• google  it –  e.g.  h;p:// hl=en&qscrl=1&q=wordpress+display+blog +name&aq=f&aqi=&aql=&oq=&gs_rfai= 60
  55. 55. 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();  ?> 61
  56. 56. Anatomy  of  a  Wordpress  theme 62
  57. 57. Anatomy  of  a  Wordpress  themeh;p://­‐custom-­‐wordpress-­‐theme/ 63
  58. 58. Anatomy  of  a  Wordpress  theme default  template  for  a  single  post  -­‐  single.phph;p://­‐custom-­‐wordpress-­‐theme/ 64
  59. 59. Template  Hierarchyh;p:// 65
  60. 60. Anatomy  of  a  Wordpress  theme• Use  as  much  or  as  li;le  of  the  template  hierarchy   as  your  site  requires.• lets  look  at  some  of  the  most  common  template   files... 66
  61. 61. 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();  ?> 67
  62. 62. 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();  ?> 68
  63. 63. 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  );  ?> 69
  64. 64. sidebar  -­‐  widgets 70
  65. 65. 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 71
  66. 66. index.php• default  frontpage• usually  displays  excerpts  of  recent  posts• use  the  wordpress  loop  to  ouput  posts –  h;p://• usually  includes  the  header,  footer  and  sidebar   template  files 72
  67. 67. single.php• displays  the  en4re  contents  of  a  single  post• may  display  comments  if  enabled• usually  includes  header  and  footer  template  files 73
  68. 68. page.php• displays  the  contents  of  a  wordpress  page   content  item• may  display  comments  if  enabled• usually  includes  header  and  footer  template  files 74
  69. 69. 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.  h;p:// 75
  70. 70. funcMons.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. 76
  71. 71. Anatomy  of  a  Wordpress  theme• for  a  more  detailed  and  complete  list  of  template  files  see   the  wordpress  codex,  par4cularly: – h;p:// – h;p:// – h;p:// – h;p://• 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: –  h;p:// –  h;p:// 77
  72. 72. NavigaMon  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. –  h;p:// wp_list_pages –  h;p:// wp_list_categories• CSS  lists  -­‐  h;p:// 78
  73. 73. 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  (or  whatever  you  want  to  call  it)  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  a  godsend  when  working  with   dynamic  websites. 79
  74. 74. 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. 80
  75. 75. Installing  the  theme• it  also  looks  for  a  file  called  screenshot.png  in  the   template  directory  to  provide  a  preview   thumbnail  of  the  theme 81
  76. 76. Installing  the  theme• installing  the  theme  is  simply  a  ma;er  of  puong   the  theme  folder  in  the  wp-­‐content/themes   directory  and  ac4va4ng  it  through  the  wordpress   admin  interface. 82
  77. 77. Wordpress  theme  development  =   all  your  usual  staMc-­‐web  design  principles  plus  the  power  of  the   dynamic  web! 83