Slides from my talk at WordCamp Jabalpur 2011. Note: All slides redone from deck.js to reveal.js

1. THEME DEVELOPMENT
AND CUSTOMIZATION
By Aniket Pant / @aniket_pant

2. PREVIEW
1. Basic Concepts
2. Stylesheets
3. Functions
4. Templates
5. Child Themes
6. Bones

3. WHAT IS WORDPRESS?

4. CONTENT
MANAGEMENT
SYSTEM

5. WHAT IS A THEME?
As per the codex —
“ Fundamentally, the WordPress Theme
system is a way to “skin” your weblog. Yet,
it is more than just a “skin.” Skinning your
site implies that only the design is changed.
WordPress Themes can provide much
more control over the look and
presentation of the material on your
website. ”

6. “ In Web design, we should all be
craftsmen or craftswomen. We should
break the frame and explore the unknown.
”
By Simon Collison at #frontend2011

7. WHAT MAKES A THEME?
Theme Stylesheets
Function Files
Template Files

8. THEME STYLESHEETS
This is the theme information of Bones
/*********************************
*********************************
TeeNm:Bns
hm ae oe
TeeUI ht:/w.hml.o/oe
hm R: tp/wwtebecmbns
Dsrpin A iceil sml satrteefrdvlpr.
ecito: n nrdby ipe tre hm o eeoes
Ato:EdeMcao
uhr di ahd
Ato UI ht:/w.hml.o/oe/
uhr R: tp/wwtebecmbns
Vrin 10
eso: .7
Tg:hm5 faeok cs,dvlpet
as tl, rmwr, s3 eeomn
Lcne GLo waee
ies: P r htvr
LcneUI ?
ies R:
AlDfutSye aei lbaycsdfutcs
l eal tls r n irr/s/eal.s
Ircmednteiigtoeflsadmkn al
eomn o dtn hs ie n aig l
cagshr.Ta wyi smtigge ar,yu
hne ee ht a f oehn os wy o
cnesl rvr bc t teoiia,btta'
a aiy eet ak o h rgnl u hts
ttlyu t yu
oal p o o.
HpyDvlpn!
ap eeoig

9. FUNCTIONS FILE
You can put in your custom PHP codes in this file to
modify some core functions of your theme.
It is often used to insert 2 sidebars, change the number of
characters in the excerpt, add custom admin panels or a
new type of post.
“Put in your entire hand coded functions, tailor made for your
theme.”

10. EXAMPLE #1
fnto bnsecrt){
ucin oe_xep(
teecrt)
h_xep(;
eh 'b /'
co <r >;
eh 'p< he="gtpraik)">Ra Mr../>/>;
co <>a rf'.e_emln(.' ed oe.<a<p'
}

11. EXAMPLE #2
fnto bnsrgse_ieas){
ucin oe_eitrsdbr(
rgse_iea(ra(
eitrsdbrary
'd = 'iea1,
i' > sdbr'
'ae = 'iea 1,
nm' > Sdbr '
'ecito'= 'h frt(rmr)sdbr'
dsrpin > Te is piay iea.,
'eoewde'= 'dvi=%$"cas"igt%$"'
bfr_igt > <i d"1s ls=wde 2s>,
'fe_igt = '/i>,
atrwde' > <dv'
'eoette = 'h cas"igtil"'
bfr_il' > <4 ls=wdette>,
'fe_il'= '/4'
atrtte > <h>,
);
)
}

12. TEMPLATE FILES
style.css index.php comments.php home.php
single.php single-.php search.php attachment.php
image.php 404.php page.php category.php
tag.php taxonomy.php author.php date.php

13. THE HEADER
<dcyehm>
!otp tl
<ed
ha>
<eacast"t-"
mt hre=uf8>
<il>?h w_il('' tu,'ih') boif('ae ) ?<tte
tte<pp ptte -, re rgt ; lgno nm' ; >/il>
<ikrl"hrctio"he=/aio.c"
ln e=sotu cn rf"fvcnio>
<ikrl"igak he="
ln e=pnbc" rf">
<ppw_ed) ?
?h pha(; >
<ikrl"tlset he="
ln e=syehe" rf">
<ha>
/ed
<oy<ppbd_ls(;?>
bd ?h oycas) >
<i i=cnanr>
dv d"otie"
<edrrl=bne"
hae oe"anr>
..
.
<hae>
/edr

14. THE CONTENT
<ppgthae(;?
?h e_edr) >
<i i=cnet cas"lafx>
dv d"otn" ls=ceri"
<i i=mi"cas"o70lf ceri"rl=mi"
dv d"an ls=cl0 et lafx oe"an>
<ppi (aepss) :wie(aepss) :teps(;?
?h f hv_ot() hl hv_ot() h_ot) >
<ril i=ps->
atce d"ot"
<edr
hae>
<1cas"2>?h tette) ?<h>
h ls=h"<pp h_il(; >/1
<hae>
/edr
<eto cas"otcnetceri"
scin ls=ps_otn lafx>
Ra mr o ".h_il(' ',fle."»,"oetee
ed oe n 'tette', ' as)' ' bnshm
") ?
); >
<scin
/eto>
<otr
foe>
..
.
<foe>
/otr
<ppcmet_epae) ?
?h omnstmlt(; >
<ppedhl;?
?h nwie >
<ppes :?
?h le >
<ril i=ps-o-on"
atce d"otntfud>
<edr
hae>
<1NtFud/1
h>o on<h>
<hae>
/edr
<eto cas"otcnet>
scin ls=ps_otn"

15. THE MIGHTY LOOP

16. THE LOOP
This is what you see.
It will contain The Loop.
The Loop is the key to printing all your posts.
This is how it starts:
<ppi (hv_ot( ):wie(hv_ot( ):teps(;?
?h f aepss) hl aepss) h_ot) >
And this is the end:
<ppedhl;es:?
?h nwie le >
<>?h _(Sry n pssmthdyu ciei.) ?
p<pp e'or, o ot ace or rtra'; >
<ppedf ?
?h ni; >

18. SINGLE POST TYPE

19. SINGLE-<POST-TYPE>.PHP
Another important feature in WordPress 3.0 is that you
can add your own Custom Post Type Boxes.
The default list –
Post, Page, Attachment, Revisions, Nav Menus

20. REGISTER A POST TYPE
Add this to your fnto.h
ucinpp
rgse_ottp(mve' ary
eitrps_ye'ois, ra(
'ae'= 'ois,
lbl > Mve'
'ulc = tu,
pbi' > re
'hwu'= tu,
so_i > re
'aaiiytp'= 'ot,
cpblt_ye > ps'
'irrhcl = fle
heacia' > as,
'ert'= ary'lg = 'ois)
rwie > ra(su' > mve',
'ur_a'= tu,
qeyvr > re
'uprs = ary
spot' > ra(
'il'
tte,
'dtr,
eio'
'xep'
ecrt,
'rcbcs,
takak'
'utmfed'
cso-ils,
'omns,
cmet'
'eiin'
rvsos,
'hmni'
tubal,
'uhr,
ato'
'aeatiue')
pg-trbts,
));

21. “ The content is like water. And design is
like a flavour sprinkled on content. ”
By @standardistas at #frontend2011

22. “ People say Web Design is not coding, I
call that bullshit.
We design the web by coding. ”

23. CHILD THEMES

24. CHILD THEMES
Derive something from another theme and what you get
is a Child Theme.
You can do absolutely anything with a Child Theme, but
the only difference between a new theme and a child
theme is that.
It would be residing in the parent theme's directory.

25. BUILD A CHILD THEME
Just make a directory in your parent theme directory.You
can name it anything.
You can put anything in this directory.So, if it's just a
styling change you wish to make, make a syecs
tl.s
There are some required information that you need to
mention in the child theme's CSS like –
Theme Name & Template.
You can refer to the Codex regarding this.

26. WHAT WE HAVE COVERED
The basic concepts of WordPress
Little on Stylesheets
Some snippets on functions
Making Templates
Building Child Themes
My favorite theme bones

27. “ We are the architects of the Web, and
this is our playground. ”

28. WHAT DO I DO?
Read Smashing Magazine regularly.
Visit Hacker News daily.
Read about typography.
Read anything and everything about CSS.

29. QUESTIONS?

30. THE END
BY ANIKET PANT / @ANIKET_PANT