1. Why CMS? (Content Management Systems)
&
Wordpress theme development

2. • first, a quick recap...

3. Web development trends
• More content
• More frequently (up-to-date and on-demand)
• From more sources (crowd sourcing, mashups etc)

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. 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. 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. 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. 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. 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. 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. 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. 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. Content Management Confusion
• So how many WCMS exist?
• http://en.wikipedia.org/wiki/
List_of_content_management_systems

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. 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. Which CMS!?
Complexity
Versa4lity

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. • 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. 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. Example: Rebranding using the
custom login plugin

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. Flickout.com

23. LucasHirata.com

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. 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. 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. 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. 1. Install the Wordpress package
• http://wordpress.org/download/

29. Extract

30. Upload to web server

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

37. 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/

38. 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).

40. 4. Create an administrator account for your wordpress
site

41. 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.

42. Admin/Backend Interface

43. 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

44. Public/Frontend Interface

45. 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.

46. 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

47. Wordpress
themes
admin
interface
47

48. Wordpress
themes
directory
• hAp://wordpress.org/extend/themes/
48

49. 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

50. 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

51. Anatomy
of
a
Wordpress
theme
• wordpress
themes
are
installed
to
the
wp-­‐content/themes
directory
51

52. 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

53. 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

54. 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

55. header.php
template
file
55
view-­‐source
in
the
browser

56. 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

57. 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

58. Anatomy
of
a
Wordpress
theme
58

59. Anatomy
of
a
Wordpress
theme
59
hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/

60. Anatomy
of
a
Wordpress
theme
60
hAp://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
default
template
for
a
single
post
-­‐
single.php

61. Template
Hierarchy
61
hAp://codex.wordpress.org/Template_Hierarchy

62. 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

63. 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

64. 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

65. 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

66. sidebar
-­‐
widgets
66

67. 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

68. 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

69. single.php
• displays
the
en4re
contents
of
a
single
post
• may
display
comments
if
enabled
• usually
includes
header
and
footer
template
files
69

70. page.php
• displays
the
contents
of
a
wordpress
page
content
item
• may
display
comments
if
enabled
• usually
includes
header
and
footer
template
files
70

71. 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

72. 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

73. 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

74. 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

75. 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

76. 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

77. 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

78. 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

79. Wordpress
theme
development
=
all
your
usual
sta4c-­‐web
design
principles
plus
the
power
of
the
dynamic
web!
79