Your SlideShare is downloading. ×
  • Like
Theme Development and Customization
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Theme Development and Customization


Slides from my talk at WordCamp Jabalpur 2011. …

Slides from my talk at WordCamp Jabalpur 2011.

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. THEME DEVELOPMENTAND CUSTOMIZATION By Aniket Pant / @aniket_pant
  • 2. PREVIEW1. Basic Concepts2. Stylesheets3. Functions4. Templates5. Child Themes6. Bones
  • 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. “ In Web design, we should all be craftsmen or craftswomen. We shouldbreak 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 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. 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 #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. 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. 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. 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"
  • 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. 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. 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. “ The content is like water. And design is like a flavour sprinkled on content. ” By @standardistas at #frontend2011
  • 21. “ People say Web Design is not coding, I call that bullshit. We design the web by coding. ”
  • 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. 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. WHAT WE HAVE COVEREDThe basic concepts of WordPressLittle on StylesheetsSome snippets on functionsMaking TemplatesBuilding Child ThemesMy favorite theme bones
  • 26. “ We are the architects of the Web, and this is our playground. ”
  • 27. WHAT DO I DO? Read Smashing Magazine regularly. Visit Hacker News daily. Read about typography.Read anything and everything about CSS.
  • 28. QUESTIONS?