The document discusses Magento theme development best practices. It recommends creating a single local.xml file for layout updates, avoiding duplicate CSS/template files from the default theme, and only modifying templates that need to be changed. It also covers enabling template path hints and installing the Magento Developer toolbar to aid in theme development.

1. set the basics right
for better templating
http://www.flickr.com/photos/unloveable/2396019222
Thursday 19 May 2011 (wk )

2. boring stuff first
http://www.flickr.com/photos/swiv/5719738832
Thursday 19 May 2011 (wk )

3. endless possibilities
Thursday 19 May 2011 (wk )

4. temporary design change
Thursday 19 May 2011 (wk )

5. set your theme
based on default Magento
Thursday 19 May 2011 (wk )

6. first fallback
set your theme
based on default Modern
Thursday 19 May 2011 (wk )

7. does file exist in yes
package_name/ How stuff works
theme_name/
Magento fall-back logic
no
does file exist in yes
package_name/ display
default/
no
does file exist in yes
base/
default/
no
rendering error
Thursday 19 May 2011 (wk )

8. an existing theme
http://www.flickr.com/photos/popilop/331357312
Thursday 19 May 2011 (wk )

9. create your own Page generation xml instructions
for each module
app/design/frontend/default/yourtheme/layout
app/design/frontend/default/yourtheme/template
Content block .phtml files for
each module
skin/frontend/default/yourtheme/css
skin/frontend/default/yourtheme/images
Visual layout info and files &
UI-specific Javascript
Thursday 19 May 2011 (wk )

10. a well coded theme
should have to following traits
• a single layout file, named local.xml, where all
layout updates are placed.
• no layout files with the same name as any layout
file in the base theme
• no css files with the same name as any css file in
the default skin create local.css
• no .phtml template files, except for those that
were modified to support the new theme.
usually this number will be very small
Thursday 19 May 2011 (wk )

11. Remove callouts and rarely used stuff
Add the local stylesheet
your theme starts
with local.xml
Thursday 19 May 2011 (wk )

12. not much is changed
Thursday 19 May 2011 (wk )

13. earn money with adsense
http://www.flickr.com/photos/playerdue/5285272605/
Thursday 19 May 2011 (wk )

14. Thursday 19 May 2011 (wk )

15. http://www.adsense-generator.com
Thursday 19 May 2011 (wk )

16. set both to yes
scroll down to Developer
Thursday 19 May 2011 (wk )

17. referral to catalog.xml
Thursday 19 May 2011 (wk )

18. almost every time the same .xml
referral to catalog.xml
Thursday 19 May 2011 (wk )

19. this is base/default/layout/catalog.xml
don’t edit this file
only copy this handle to local.xml
Thursday 19 May 2011 (wk )

20. only change
what needs to be changed
call for your adsense script
Thursday 19 May 2011 (wk )

21. newly created file
in newly created directory
in yourtheme
create your .phtml file
Thursday 19 May 2011 (wk )

22. and you’re done
Thursday 19 May 2011 (wk )

23. timesaver
http://www.flickr.com/photos/maigh/2141921845
Thursday 19 May 2011 (wk )

24. Magento backend
goto System >> Configuration
goto Developer
change Scope
expand Debug
set Template Path Hints to Yes
save Config
(clean Cache)
Magento frontend
refresh page
Thursday 19 May 2011 (wk )

25. Magento backend
goto System >> Configuration
goto Developer
change Scope
expand Debug
set Template Path Hints to No
save Config
(clean Cache)
Magento frontend
refresh page
Thursday 19 May 2011 (wk )

26. http://bit.ly/DeveloperToolbar
Thursday 19 May 2011 (wk )

27. find the extension key
use it to install
done
I’m a UNIX geek fond of SSH
Thursday 19 May 2011 (wk )

28. enabled by default
scroll down to Developer
Thursday 19 May 2011 (wk )

29. click and go
Thursday 19 May 2011 (wk )

30. click and go
Thursday 19 May 2011 (wk )

31. from the book: “I always get my sin”
a child can do the laundry
Thursday 19 May 2011 (wk )

32. add more
four ways to add a link
http://www.flickr.com/photos/farruska/208926935
Thursday 19 May 2011 (wk )

33. Thursday 19 May 2011 (wk )

34. do not forget to activate
Thursday 19 May 2011 (wk )

35. Thursday 19 May 2011 (wk )

36. http://www.flickr.com/photos/andrec/2893549851
Thursday 19 May 2011 (wk )

37. Thursday 19 May 2011 (wk )

38. a call for a template file
app/design/frontend/base/layout/catalog.xml
Thursday 19 May 2011 (wk )

39. URL key from CMS page
app/design/frontend/default/yourtheme/
template/catalog/navigation/top.phtml
Thursday 19 May 2011 (wk )

40. DONE!!
Thursday 19 May 2011 (wk )

41. http://www.flickr.com/photos/boklm/486678763
Thursday 19 May 2011 (wk )

42. Thursday 19 May 2011 (wk )

43. call for static block in backend
app/design/frontend/default/yourtheme/
template/catalog/navigation/top.phtml
Thursday 19 May 2011 (wk )

44. create new static block
Thursday 19 May 2011 (wk )

45. {{store direct_url="loremipsum"}}
Thursday 19 May 2011 (wk )

46. http://www.flickr.com/photos/boklm/486646798
Thursday 19 May 2011 (wk )

47. Thursday 19 May 2011 (wk )

48. no call for a template file
app/design/frontend/base/layout/page.xml
Thursday 19 May 2011 (wk )

49. URL key from CMS page
app/design/frontend/default/yourtheme/
layout/local.xml
Thursday 19 May 2011 (wk )

50. DONE!!
Thursday 19 May 2011 (wk )

51. http://www.flickr.com/photos/boklm/486676439
Thursday 19 May 2011 (wk )

52. Thursday 19 May 2011 (wk )

53. Thursday 19 May 2011 (wk )

54. Thursday 19 May 2011 (wk )

55. Thursday 19 May 2011 (wk )

56. Thursday 19 May 2011 (wk )

57. Thursday 19 May 2011 (wk )

58. see you at Magento Competence Center
magento-competence-center.com
hans2103
yireo
jiraict
http://slideshare.net/hans2103
http://www.flickr.com/photos/trasimac/1217071176
Thursday 19 May 2011 (wk )