Theme Development and Customization


Published on

Slides from my talk at WordCamp Jabalpur 2011.

Note: All slides redone from deck.js to reveal.js

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Theme Development and Customization

  1. 1. THEME DEVELOPMENTAND CUSTOMIZATION By Aniket Pant / @aniket_pant
  2. 2. PREVIEW1. Basic Concepts2. Stylesheets3. Functions4. Templates5. Child Themes6. Bones
  5. 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 yoursite 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. 6. “ In Web design, we should all be craftsmen or craftswomen. We shouldbreak the frame and explore the unknown. ” By Simon Collison at #frontend2011
  7. 7. WHAT MAKES A THEME? Theme Stylesheets Function Files Template Files
  8. 8. THEME STYLESHEETS This is the theme information of Bones/********************************* *********************************TeeNm:Bns hm ae oeTeeUI ht:/w.hml.o/oe hm R: tp/wwtebecmbnsDsrpin A iceil sml satrteefrdvlpr. ecito: n nrdby ipe tre hm o eeoesAto:EdeMcao uhr di ahdAto UI ht:/w.hml.o/oe/ uhr R: tp/wwtebecmbnsVrin 10 eso: .7Tg:hm5 faeok cs,dvlpet as tl, rmwr, s3 eeomnLcne GLo waee ies: P r htvrLcneUI ? ies R:AlDfutSye aei lbaycsdfutcs l eal tls r n irr/s/eal.sIrcmednteiigtoeflsadmkn al eomn o dtn hs ie n aig lcagshr.Ta wyi smtigge ar,yu hne ee ht a f oehn os wy ocnesl rvr bc t teoiia,btta a aiy eet ak o h rgnl u htsttlyu t yu oal p o o.HpyDvlpn! ap eeoig
  9. 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. 10. EXAMPLE #1fnto 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. 11. EXAMPLE #2fnto 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. 12. TEMPLATE FILESstyle.css index.php comments.php home.phpsingle.php single-.php search.php attachment.phpimage.php 404.php page.php category.phptag.php taxonomy.php author.php date.php
  13. 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. 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"
  16. 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 eor, o ot ace or rtra; ><ppedf ? ?h ni; >
  18. 18. SINGLE-<POST-TYPE>.PHPAnother 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
  19. 19. REGISTER A POST TYPE Add this to your fnto.h ucinpprgse_ottp(mve ary eitrps_yeois, ra( ae= ois, lbl > Mve ulc = tu, pbi > re hwu= tu, so_i > re aaiiytp= ot, cpblt_ye > ps irrhcl = fle heacia > as, ert= arylg = 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,));
  20. 20. “ The content is like water. And design is like a flavour sprinkled on content. ” By @standardistas at #frontend2011
  21. 21. “ People say Web Design is not coding, I call that bullshit. We design the web by coding. ”
  22. 22. CHILD THEMES
  23. 23. CHILD THEMESDerive 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 themes directory.
  24. 24. BUILD A CHILD THEMEJust make a directory in your parent theme directory.You can name it anything. You can put anything in this directory.So, if its 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 themes CSS like – Theme Name & Template. You can refer to the Codex regarding this.
  25. 25. WHAT WE HAVE COVEREDThe basic concepts of WordPressLittle on StylesheetsSome snippets on functionsMaking TemplatesBuilding Child ThemesMy favorite theme bones
  26. 26. “ We are the architects of the Web, and this is our playground. ”
  27. 27. WHAT DO I DO? Read Smashing Magazine regularly. Visit Hacker News daily. Read about typography.Read anything and everything about CSS.
  28. 28. QUESTIONS?