Anatomy of a Wordpress theme

Wordpress
themes
• Wordpress
can
install
themes
to
change
the
“look
and

feel”
of
the
site.
• h7p://wordpress.org/extend/themes/
• Your
ﬁrst
assignment
is
to
create
your
own
wordpress

theme
which
uniquely
services
the
content
and
purpose

of
your
site.
1

Wordpress
themes
admin
interface
2

Wordpress
themes
directory
• h7p://wordpress.org/extend/themes/
3

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
aestheJc
in
mind
–
depending
on
how
much
customisaJon
you
do,
it
can
actually
end
up
taking
you

longer
and
cosJng
more
than
doing
your
own
from
scratch

4

CreaJng
your
own
theme
from
scratch
• Disadvantages
–
can
take
longer
and
be
costlier
–
you
have
to
learn
how
to
make
themes
• Advantages
–
Unique
–
completely
ﬂexible
and
customisable
–
complete
control
over
resources
-‐
no
waste
–
you
get
to
learn
how
to
make
themes!
5

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

Anatomy
of
a
Wordpress
theme
• consist
of
a
collecJon
of
php
files
as

well
as
one
or
more
css
files
and

associated
resources
(e.g.
imagery,

javascript
files
etc.).
7

Anatomy
of
a
Wordpress
theme
• php
ﬁles
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
8

Template
tags
• Wordpress
uses
it’s
own
php
funcJons
called
template
tags

to
output
informaJon
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
<Jtle>
html
element.

• These
handy
funcJons
save
us
from
wriJng
a
lot
of
extra

php
code.
9

header.php
template
ﬁle
10
view-‐source
in
the
browser

So
where
do
we
ﬁnd
out
what
data
wordpress
can
retrieve

and
what
php
code
retrieves
it?

• The
wordpress
codex
–h7p://codex.wordpress.org/Template_Tags
–h7p://codex.wordpress.org/FuncJon_Reference/bloginfo
• Look
at
other
themes
• google
it
–
e.g.
h7p://www.google.com.au/search?hl=en&qscrl=1&q=wordpress
+display+blog+name&aq=f&aqi=&aql=&oq=&gs_rfai=
11

Anatomy
of
a
Wordpress
theme
• wordpress
page
structure
can
be
logically
secJoned

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
parJcular
names
like
header.php,
footer.php,

sidebar.php
etc).
• each
block
(file)
can
be
included
and
reused
in
mulJple

page
templates
using
template
tags
like
<?php

get_header();
?>
12

Anatomy
of
a
Wordpress
theme
13

Anatomy
of
a
Wordpress
theme
14
h7p://www.webdesignerwall.com/tutorials/building-‐custom-‐wordpress-‐theme/

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

Template
Hierarchy
16
h7p://codex.wordpress.org/Template_Hierarchy

Anatomy
of
a
Wordpress
theme
• Use
as
much
or
as
li7le
of
the
template

hierarchy
as
your
site
requires.
• lets
look
at
some
of
the
most
common

template
ﬁles...
17

header.php
• usually
contains
the
doctype,
metadata
and
<head>
secJon
of

the
html
document
• may
contain
the
top
navigaJon
• include
the
header
in
other
template
ﬁles
to
avoid
duplicaJng

the
code
it
contains
with
<?php
get_header();
?>
18

footer.php
• anything
you
would
normally
put
in
a
common
page
footer.

• include
the
footer
in
other
template
ﬁles
to
avoid
duplicaJng

the
code
it
contains
with
<?php
get_footer();
?>
19

sidebar.php
• commonly
contains:
–
navigaJon
(main
and/or
subnav)
–
links
(internal
and
external)
–
searchform
–
widgeJsed
plugins
that
can
be
added
and
removed

through
the
administrator
interface
(dashboard)
• include
the
sidebar
in
other
template
ﬁles
with

<?php
get_sidebar(
$name
);
?>
20

sidebar
-‐
widgets
21

The
content
• Wordpress
has
2
main
content
types,
posts
and
pages
• The
3
main
template
ﬁles
associated
with
displaying
these
are

single.php,
page.php
and
index.php
22

index.php
• default
frontpage
• usually
displays
excerpts
of
recent
posts
• use
the
wordpress
loop
to
ouput
posts
–
h7p://codex.wordpress.org/The_Loop
• usually
includes
the
header,
footer
and
sidebar

template
ﬁles
23

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

ﬁles
24

page.php
• displays
the
contents
of
a
wordpress
page

content
item
• may
display
comments
if
enabled
• usually
includes
header
and
footer
template

ﬁles
25

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
navigaJon
menu
that
links
to
various
categories
as
a

way
of
secJoning
your
site
content.
–
e.g.
h7p://www.smashingmagazine.com/
26

funcJons.php
• the
funcJons
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
funcJons
that
can

be
used
by
any
other
template
files.
• it
is
automaJcally
“included”
by
Wordpress
(so
you
don’t

need
to
use
include
or
require
statements
before
accessing

it
from
another
template
file)
27

Anatomy
of
a
Wordpress
theme
• for
a
more
detailed
and
complete
list
of
template
ﬁles
see
the
Wordpress

codex,
parJcularly:
– h7p://codex.wordpress.org/Stepping_Into_Templates
– h7p://codex.wordpress.org/Theme_Development
– h7p://codex.wordpress.org/Site_Architecture_1.5
– h7p://codex.wordpress.org/Template_Hierarchy
• for
a
complete
list
of
wordpress
funcJons
and
template
tags
(the
bits
of

php
you
use
to
get
stuﬀ
from
the
database)
see
the
following:
–
h7p://codex.wordpress.org/FuncJon_Reference
–
h7p://codex.wordpress.org/Template_Tags
28

NavigaJon
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
navigaJon
menu.
–
h7p://codex.wordpress.org/FuncJon_Reference/wp_list_pages
–
h7p://codex.wordpress.org/Template_Tags/wp_list_categories
• CSS
lists
-‐
h7p://css.maxdesign.com.au/listamaJc/
29

So
what
about
the
CSS?
• This
is
probably
the
least
diﬀerent
part
of
developing
a
Wordpress

theme
compared
with
a
staJc
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
funcJon
in

place
of
the
url.
–
<link
rel="stylesheet"
type="text/css"
media="all"
href="<?php

bloginfo(
'stylesheet_url'
);
?>"
/>

• Get
used
to
using
ﬁrebug
or
a
similar
html/css
inspecJon
tool
-‐
it
is
even

more
of
useful
when
working
with
dynamic
websites.
30

Installing
the
theme
• Wordpress
looks
for
some
pre-‐deﬁned
text
in
a
comment
block
at
the

top
of
style.css
so
it
can
display
this
informaJon
about
the
theme
in
the

administrator
interface.
31

Installing
the
theme
• it
also
looks
for
a
ﬁle
called
screenshot.png
in

the
template
directory
to
provide
a
preview

thumbnail
of
the
theme
32

Installing
the
theme
• installing
the
theme
is
simply
a
ma7er
of
pupng
the
theme
folder
in
the

wp-‐content/themes
directory
and
acJvaJng
it
through
the
Wordpress

admin
interface.
33

Anatomy of a Wordpress theme

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Anatomy of a Wordpress theme

Similar a Anatomy of a Wordpress theme (20)

Más de Dave Wallace

Más de Dave Wallace (7)

Último

Último (20)

Anatomy of a Wordpress theme