Web Content Management Systems and Wordpress theme development

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

2. • first, a quick recap...

3. So what are the trends?
• More content
• More frequently (up-to-date and on-
demand)
• From more sources (crowd sourcing,
mashups etc)

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. So what are the trends?
• Moving away from a static web towards a
dynamic web.

6. Static vs Dynamic Website

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. 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. 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. 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. 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. 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. 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. 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. 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. Common WCMS features
• Automated Templates
• Easily Editable Content
• Scalable Feature Sets
• Web Standards Upgrades
• Workflow Management
• Delegation
• Document Management
• Content Virtualisation

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

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

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

27. Flickout.com

28. LucasHirata.com

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

34. Extract

35. Upload to web server

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

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

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

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

46. Admin/Backend Interface

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

48. Public/Frontend Interface

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

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

51. Wordpress
themes
admin
interface
51

52. Wordpress
themes
directory
• h;p://wordpress.org/extend/themes/
52

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

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

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

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

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

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

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

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

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

62. Anatomy
of
a
Wordpress
theme
62

63. Anatomy
of
a
Wordpress
theme
h;p://www.webdesignerwall.com/tutorials/building-­‐custom-­‐wordpress-­‐theme/
63

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

65. Template
Hierarchy
h;p://codex.wordpress.org/Template_Hierarchy
65

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

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

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

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

70. sidebar
-­‐
widgets
70

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

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

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

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

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

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

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

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

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

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

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

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

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