0
Why CMS? (Content Management Systems)                 &    Wordpress theme development
• first, a quick recap...
So what are the trends?• More content• More frequently (up-to-date and on-  demand)• From more sources (crowd sourcing,  m...
So what are the trends?•   More contributors. As a web designer you need to at least have    an understanding of all these...
So what are the trends?• Moving away from a static web towards a  dynamic web.
Static vs Dynamic Website
Advantages of static       websites• Lower entry barrier for development (just  plain old html and css files).• Simple host...
Disadvantages of static      websites• Much less scope for interactivity,  customisation, personalisation.• Every little c...
Dynamic website• Website content is stored in a database  (and/or other external sources) and  assembled with markup and o...
Advantages of dynamic      website• Content can be updated in a decentralised  way. (a single “webmaster” does not have  t...
Disadvantages of dynamic website•   Higher entry barrier / learning curve for    development•   More complex web server re...
Web Content Management   Systems (WCMS)•    Basically a series of interfaces for performing common tasks     by various us...
Advantages of using a CMS•   It makes managing lots of constantly updated content manageable.•   What kind of management? ...
Disadvantages of using a CMS•   More complicated to set up•   Level of technical knowledge required for developer AND desi...
Disadvantages of using a CMS•   Upgrading the underlying technologies of the CMS may    be difficult or impossible (especia...
Common WCMS features•   Automated Templates•   Easily Editable Content•   Scalable Feature Sets•   Web Standards Upgrades•...
Content Management     Confusion• So how many WCMS exist?• http://en.wikipedia.org/wiki/  List_of_content_management_syste...
Which CMS!?•   Choosing a WCMS:    •   Your needs, eg. technological, knowledge    •   Client needs, eg. content to be man...
When not to use a       CMS• If you have a website with a small amount  of static content that will never change  very fre...
Which CMS?•   What are the requirements of my website?        •   From a design perspective (both presentation and content...
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 functionali...
•   Blogging Tool•   Brief History    •   Roots and development date back to 2001    •   In 2005, version 1.5 was released...
Wordpress Plugins = CMS?•   “Plugins can extend WordPress to do almost anything you can imagine.”    Community contributed...
Example: Rebranding using the    custom login plugin
Wordpress sites don’thave to look like blogs• There is no doubt that Wordpress began its  life as a blogging tool, but wit...
Flickout.com
LucasHirata.com
More	  Wordpress	  sites	  that	  don’t	  look	  like	                          blogs• h;p://designtutorials4u.com/30-­‐cr...
Server	  requirements	  (as	  of	  Wordpress	  3.2)• 	  h;p://wordpress.org/about/requirements/  –PHP	  version	  5.2.4	  ...
LAMP server stack•   LAMP stands for Linux Apache MySql and Php, which, in a nutshell    is just all the software that is ...
Installing Wordpress on your remote             web server•   http://codex.wordpress.org/Installing_WordPress•   4 main st...
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 ho...
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 ...
Admin/Backend Interface
Admin/Backend Interface•   This is where you do all your Content Management    •   editing posts, moderating comments, ins...
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 w...
Wordpress	  themes• Wordpress	  can	  install	  themes	  to	  change	  the	    “look	  and	  feel”	  of	  the	  site.• h;p...
Wordpress	  themes	  admin	  interface                                        51
Wordpress	  themes	  directory• h;p://wordpress.org/extend/themes/                                          52
Using	  a	  pre-­‐made	  theme• Advantages  –	  quick	  &	  easy  –	  plenty	  of	  well-­‐made	  free	  themes  –	  can	 ...
Crea4ng	  your	  own	  theme	  from	  scratch• Disadvantages –	  can	  take	  longer	  and	  be	  costlier –	  you	  have	...
Anatomy	  of	  a	  Wordpress	  theme• wordpress	  themes	  are	  installed	  to	  the	  wp-­‐  content/themes	  directory ...
Anatomy	  of	  a	  Wordpress	  theme• consist	  of	  a	  collec4on	  of	  php	    files	  as	  well	  as	  one	  or	  more	...
Anatomy	  of	  a	  Wordpress	  theme• php	  files	  contain	  html	  markup	  interspersed	  with	  php	  snippets	    whic...
Template	  tags• Wordpress	  uses	  it’s	  own	  php	  func4ons	  called	    template	  tags	  to	  output	  informa4on	  ...
header.php	  template	  fileview-­‐source	  in	  the	  browser                                        59
So	  where	  do	  we	  find	  out	  what	  data	  wordpress	   can	  retrieve	  and	  what	  php	  code	  retrieves	  it?	 ...
Anatomy	  of	  a	  Wordpress	  theme• wordpress	  page	  structure	  can	  be	  logically	    sec4oned	  into	  a	  number...
Anatomy	  of	  a	  Wordpress	  theme                                           62
Anatomy	  of	  a	  Wordpress	  themeh;p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/        ...
Anatomy	  of	  a	  Wordpress	  theme                   default	  template	  for	  a	  single	  post	  -­‐	  single.phph;p:...
Template	  Hierarchyh;p://codex.wordpress.org/Template_Hierarchy                                               65
Anatomy	  of	  a	  Wordpress	  theme• Use	  as	  much	  or	  as	  li;le	  of	  the	  template	  hierarchy	    as	  your	  ...
header.php• usually	  contains	  the	  doctype,	  metadata	  and	    <head>	  sec4on	  of	  the	  html	  document• may	  c...
footer.php• anything	  you	  would	  normally	  put	  in	  a	  common	    page	  footer.	  	  • include	  the	  footer	  i...
sidebar.php• commonly	  contains:   –	  naviga4on	  (main	  and/or	  subnav)   –	  links	  (internal	  and	  external)   –...
sidebar	  -­‐	  widgets                            70
The	  content• Wordpress	  has	  2	  main	  content	  types,	  posts	  and	    pages• The	  3	  main	  template	  files	  a...
index.php• default	  frontpage• usually	  displays	  excerpts	  of	  recent	  posts• use	  the	  wordpress	  loop	  to	  o...
single.php• displays	  the	  en4re	  contents	  of	  a	  single	  post• may	  display	  comments	  if	  enabled• usually	 ...
page.php• displays	  the	  contents	  of	  a	  wordpress	  page	    content	  item• may	  display	  comments	  if	  enable...
categories.php• wordpress	  supports	  categorising	  posts	  in	  a	  custom	    taxonomy.• It	  can	  be	  useful	  to	 ...
funcMons.php• the	  func4ons	  file	  is	  different	  in	  that	  it	  doesn’t	    map	  to	  any	  displayable	  content	 ...
Anatomy	  of	  a	  Wordpress	  theme• for	  a	  more	  detailed	  and	  complete	  list	  of	  template	  files	  see	    t...
NavigaMon	  menus• the	  template	  tags	  wp_list_pages	  and	    wp_list_categories	  will	  output	  a	  list	  of	  li...
So	  what	  about	  the	  CSS?• This	  is	  probably	  the	  least	  different	  part	  of	  developing	  a	    wordpress	 ...
Installing	  the	  theme• Wordpress	  looks	  for	  some	  pre-­‐defined	  text	  in	  a	    comment	  block	  at	  the	  t...
Installing	  the	  theme• it	  also	  looks	  for	  a	  file	  called	  screenshot.png	  in	  the	    template	  directory	...
Installing	  the	  theme• installing	  the	  theme	  is	  simply	  a	  ma;er	  of	  puong	    the	  theme	  folder	  in	  ...
Wordpress	  theme	  development	  =	   all	  your	  usual	  staMc-­‐web	  design	  principles	  plus	  the	  power	  of	  ...
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
Upcoming SlideShare
Loading in...5
×

Cms & wordpress theme development 2011

1,803

Published on

Web Content Management Systems and Wordpress theme development

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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: http://www.contentmanager.eu.com/history.htm (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?• http://en.wikipedia.org/wiki/ 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: http://boagworld.com/technology/too- 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) • http://www.opensourcecms.com
  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, wordpress.com 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.• 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/
  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. Flickout.com
  28. 28. LucasHirata.com
  29. 29. More  Wordpress  sites  that  don’t  look  like   blogs• h;p://designtutorials4u.com/30-­‐crea4ve-­‐ wordpress-­‐sites-­‐that-­‐dont-­‐look-­‐like-­‐blogs/• h;p://blogsessive.com/blogging-­‐tools/10-­‐ beau4ful-­‐wordpress-­‐websites/• h;p://pelfusion.com/inspira4on/30-­‐wordpress-­‐ based-­‐websites-­‐that-­‐dont-­‐look-­‐like-­‐blogs/• h;p://www.websitetology.com/?p=244 29
  30. 30. Server  requirements  (as  of  Wordpress  3.2)•  h;p://wordpress.org/about/requirements/ –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.• http://www.computerguideonline.com/internet/what-lamp-stack
  32. 32. 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!
  33. 33. 1. Install the Wordpress package• http://wordpress.org/download/
  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).• http://www.cpanel.net/media/tutorials/ 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 www.yourwordpresssite.com/wp- admin• http://codex.wordpress.org/ 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://wordpress.org/extend/themes/• 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://wordpress.org/extend/themes/ 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://codex.wordpress.org/Template_Tags –h;p://codex.wordpress.org/Func4on_Reference/ bloginfo• Look  at  other  themes• google  it –  e.g.  h;p://www.google.com.au/search? 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://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/ 63
  58. 58. Anatomy  of  a  Wordpress  theme default  template  for  a  single  post  -­‐  single.phph;p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/ 64
  59. 59. Template  Hierarchyh;p://codex.wordpress.org/Template_Hierarchy 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://codex.wordpress.org/The_Loop• 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://www.smashingmagazine.com/ 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://codex.wordpress.org/Stepping_Into_Templates – h;p://codex.wordpress.org/Theme_Development – h;p://codex.wordpress.org/Site_Architecture_1.5 – h;p://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: –  h;p://codex.wordpress.org/Func4on_Reference –  h;p://codex.wordpress.org/Template_Tags 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://codex.wordpress.org/Func4on_Reference/ wp_list_pages –  h;p://codex.wordpress.org/Template_Tags/ wp_list_categories• CSS  lists  -­‐  h;p://css.maxdesign.com.au/listama4c/ 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
  1. A particular slide catching your eye?

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

×