0
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, ma...
• More roles/contributors.
• As a web designer you
need to at least have an
understanding of all these
areas and how they ...
Dynamic Website Model
• Website content is stored in a
database (and/or other external
sources) and assembled with
markup ...
Advantages of dynamic website
• Content can be updated in a decentralised way. (a single
“webmaster” does not have the sol...
Web Content Management
Systems (WCMS)
• A Content	
  Management	
  Systems	
  (CMS) is a tool that enables a
variety of (c...
Disadvantages of using a CMS
• More complicated to set up
• Level of technical knowledge required for developer AND design...
Disadvantages of using a CMS
• Upgrading to newer versions of the CMS may break things.
• Migrating content to a different...
When not to use a CMS
• If you have a website with a small amount of static content that
will never change very frequently...
Advantages of using a CMS
• It makes managing lots of constantly updated content manageable.
• What kind of management?
• ...
Some Common WCMS features
• Automated Templates
• Access Control
• Scalable Feature Sets
• Web Standards Upgrades
• Delega...
Content Management Confusion
• So how many WCMS exist?
• http://en.wikipedia.org/wiki/
List_of_content_management_systems
Which CMS!?
• Choosing a WCMS:
• Your needs, eg. technological, knowledge
• Client needs, eg. content to be managed, costs...
Which CMS?
• What are the requirements of my website?
• From a design perspective (both presentation and content)
• From a...
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...
• Blogging Tool
• Brief History
• Roots and development date back to 2001
• In 2005, version 1.5 was released which introd...
Wordpress Plugins = CMS?
• “Plugins can extend WordPress to do almost anything you can imagine.” Community contributed plu...
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 wi...
Flickout.com
LucasHirata.com
More	
  Wordpress	
  sites	
  that	
  don’t	
  look	
  like	
  blogs
• hAp://designtutorials4u.com/30-­‐crea4ve-­‐wordpres...
Server	
  requirements	
  (as	
  of	
  Wordpress	
  3.2)
• 	
  hAp://wordpress.org/about/requirements/
–PHP	
  version	
  ...
LAMP server stack
• LAMP stands for Linux Apache MySql and
Php, which, in a nutshell is just all the
software that is requ...
Installing Wordpress on your remote web server
• http://codex.wordpress.org/Installing_WordPress
• 4 main steps are:
1. Do...
1. Install the Wordpress package
• http://wordpress.org/download/
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 hos...
PHPMyAdmin
• A common web interface for
administering databases
• If your hosting doesn’t have a
database setup ‘wizard’ y...
3. Edit the wp-config.php file
• The wordpress directory you uploaded to your web server will
contain a file called wp-config-...
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 a...
Admin/Backend Interface
Admin/Backend Interface
• This is where you do all your Content Management
• editing posts, moderating comments, installin...
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 ...
Wordpress	
  themes
• Wordpress	
  can	
  install	
  themes	
  to	
  change	
  the	
  “look	
  and	
  
feel”	
  of	
  the	...
Wordpress	
  themes	
  admin	
  interface
47
Wordpress	
  themes	
  directory
• hAp://wordpress.org/extend/themes/
48
Using	
  a	
  pre-­‐made	
  theme
• Advantages
–	
  quick	
  &	
  easy
–	
  plenty	
  of	
  well-­‐made	
  free	
  themes
...
Crea4ng	
  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	
  collec4on	
  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	
  func4ons	
  called	
  template	
  tags	
  
to	
  output	
  i...
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	
  re...
Anatomy	
  of	
  a	
  Wordpress	
  theme
• wordpress	
  page	
  structure	
  can	
  be	
  logically	
  sec4oned	
  
into	
...
Anatomy	
  of	
  a	
  Wordpress	
  theme
58
Anatomy	
  of	
  a	
  Wordpress	
  theme
59
hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
Anatomy	
  of	
  a	
  Wordpress	
  theme
60
hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/...
Template	
  Hierarchy
61
hAp://codex.wordpress.org/Template_Hierarchy
Anatomy	
  of	
  a	
  Wordpress	
  theme
• Use	
  as	
  much	
  or	
  as	
  liAle	
  of	
  the	
  template	
  
hierarchy	
...
header.php
• usually	
  contains	
  the	
  doctype,	
  metadata	
  and	
  <head>	
  sec4on	
  of	
  
the	
  html	
  docume...
footer.php
• anything	
  you	
  would	
  normally	
  put	
  in	
  a	
  common	
  page	
  footer.	
  	
  
• include	
  the	...
sidebar.php
• commonly	
  contains:
–	
  naviga4on	
  (main	
  and/or	
  subnav)
–	
  links	
  (internal	
  and	
  externa...
sidebar	
  -­‐	
  widgets
66
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	
  en4re	
  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...
func4ons.php
• the	
  func4ons	
  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...
Naviga4on	
  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	
  maAer	
  of	
  putng	
  the	
  theme	
  fo...
Wordpress	
  theme	
  development	
  =	
  all	
  your	
  usual	
  
sta4c-­‐web	
  design	
  principles	
  plus	
  the	
  p...
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
Upcoming SlideShare
Loading in...5
×

Content Management Systems (CMS) & Wordpress theme development

4,284

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,284
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
93
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×