Content Management Systems (CMS) & Wordpress theme development
Upcoming SlideShare
Loading in...5

Content Management Systems (CMS) & Wordpress theme development






Total Views
Views on SlideShare
Embed Views



1 Embed 1,351 1351



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.

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

Content Management Systems (CMS) & Wordpress theme development Content Management Systems (CMS) & Wordpress theme development Presentation Transcript

  • Why CMS? (Content Management Systems) & Wordpress theme development
  • • first, a quick recap...
  • Web development trends • More content • More frequently (up-to-date and on-demand) • From more sources (crowd sourcing, mashups etc)
  • • More roles/contributors. • As a web designer you need to at least have an understanding of all these areas and how they fit together.
  • 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.
  • 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
  • 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:// (Accessed 20/08/09)
  • 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?
  • 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?
  • 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.
  • 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
  • Some Common WCMS features • Automated Templates • Access Control • Scalable Feature Sets • Web Standards Upgrades • Delegation and Collaboration • Document Workflow Management • Content Syndication
  • Content Management Confusion • So how many WCMS exist? • List_of_content_management_systems
  • 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: management-systems (Accessed 20/08/09)
  • 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) •
  • Which CMS!? Complexity Versa4lity
  • 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% - • 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
  • • 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?
  • 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 •
  • Example: Rebranding using the custom login plugin
  • 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.
  • More  Wordpress  sites  that  don’t  look  like  blogs • hAp://­‐crea4ve-­‐wordpress-­‐sites-­‐that-­‐dont-­‐ look-­‐like-­‐blogs/ • hAp://­‐tools/10-­‐beau4ful-­‐wordpress-­‐ websites/ • hAp://­‐wordpress-­‐based-­‐websites-­‐that-­‐ dont-­‐look-­‐like-­‐blogs/ • hAp:// 24
  • Server  requirements  (as  of  Wordpress  3.2) •  hAp:// –PHP  version  5.2.4  or  greater –MySQL  version  5.0  or  greater –Apache  is  the  recommended  hAp  server 25
  • 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. • internet/what-lamp-stack
  • 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!
  • 1. Install the Wordpress package •
  • Extract
  • Upload to web server
  • 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). •
  • 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 •
  • 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).
  • 4. Create an administrator account for your wordpress site
  • 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.
  • Admin/Backend Interface
  • 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 •
  • Public/Frontend Interface
  • 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.
  • Wordpress  themes • Wordpress  can  install  themes  to  change  the  “look  and   feel”  of  the  site. • hAp:// • Your  first  assignment  is  to  create  your  own  wordpress   theme  which  uniquely  services  the  content  and  purpose   of  your  site. 46
  • Wordpress  themes  admin  interface 47
  • Wordpress  themes  directory • hAp:// 48
  • 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
  • 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
  • Anatomy  of  a  Wordpress  theme • wordpress  themes  are  installed  to  the  wp-­‐content/themes  directory 51
  • 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
  • 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
  • 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
  • header.php  template  file 55 view-­‐source  in  the  browser
  • So  where  do  we  find  out  what  data  wordpress  can  retrieve   and  what  php  code  retrieves  it?   • The  wordpress  codex –hAp:// –hAp:// • Look  at  other  themes • google  it –  e.g.  hAp:// +display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai= 56
  • 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
  • Anatomy  of  a  Wordpress  theme 58
  • Anatomy  of  a  Wordpress  theme 59 hAp://­‐custom-­‐wordpress-­‐theme/
  • Anatomy  of  a  Wordpress  theme 60 hAp://­‐custom-­‐wordpress-­‐theme/ default  template  for  a  single  post  -­‐  single.php
  • Template  Hierarchy 61 hAp://
  • 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
  • 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
  • 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
  • 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
  • sidebar  -­‐  widgets 66
  • 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
  • index.php • default  frontpage • usually  displays  excerpts  of  recent  posts • use  the  wordpress  loop  to  ouput  posts –  hAp:// • usually  includes  the  header,  footer  and  sidebar   template  files 68
  • single.php • displays  the  en4re  contents  of  a  single  post • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 69
  • page.php • displays  the  contents  of  a  wordpress  page   content  item • may  display  comments  if  enabled • usually  includes  header  and  footer  template   files 70
  • 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:// 71
  • 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
  • Anatomy  of  a  Wordpress  theme • for  a  more  detailed  and  complete  list  of  template  files  see  the  Wordpress   codex,  par4cularly: – hAp:// – hAp:// – hAp:// – hAp:// • 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:// –  hAp:// 73
  • 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:// –  hAp:// • CSS  lists  -­‐  hAp:// 74
  • 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
  • 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
  • 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
  • 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
  • Wordpress  theme  development  =  all  your  usual   sta4c-­‐web  design  principles  plus  the  power  of  the   dynamic  web! 79