1. Oh The Themes You’ll Do!
Learning

2. WordPress

3. Themes

4. is

5. GOOD

6. for

7. you!
@LisaSabinWilson | WordCamp Philly 2012

8. Lisa Sabin Wilson
Knows JUST what to
do:
✤ Wisconsin

9. (Go

10. Pack!)
Lisa Sabin-Wilson
Author

11. of

12. books.
✤ WordPress

13. user

14. since

15. 2003 Designer

16. of

17. sites.
Lover

18. of

19. WordPress.
✤ Author

20. since

21. 2006 http://lisasabin-wilson.com
@LisaSabinWilson
✤ Twitter:

22. @LisaSabinWilson
Thanks for coming!

23. Oh, The Books That
You’ll Read...
Books,

24. by

25. the

26. way

27. -

28. I’ve

29.
written

30. just

31. three:
✤ WordPress For Dummies
✤ WordPress All In One
✤ WordPress Web Design For
Dummies
@LisaSabinWilson | WordCamp Philly - Oct. 2012

32. Congratulations! Today is
your day.
You’re off to create
Themes!
You’re off and away!
@LisaSabinWilson | WordCamp Philly - Oct. 2012

33. You have brains in your head.
You have nothing to lose.
You can pick a WordPress
theme and style it up how you
choose.
@LisaSabinWilson | WordCamp Philly - Oct. 2012

34. There is more than one way to skin a cat
I

35. present

36. one

37. way

38. to

39. accomplish

40. a

41. theme

42. -

43. your

44. mileage

45.
may

46. vary

47. -

48. ya

49. know

50. what

51. i

52. mean??
@LisaSabinWilson | WordCamp Philly - Oct. 2012

53. Theme vs Template
The

54. difference

55. is

56. simple

57. and

58. easy

59. to

60. see
A

61. template

62. is

63. single
A

64. theme

65. can

66. be

67. three
@LisaSabinWilson | WordCamp Philly - Oct. 2012

68. Theme vs Template
A

69. WordPress

70. Theme

71. is

72. a

73.
group

74. of

75. templates

76. ....
Put

77. templates

78. together,

79.
the

80. result

81. is

82. SO

83. GREAT!
@LisaSabinWilson | WordCamp Philly - Oct. 2012

84. Correct syntax is not simply a
must...
It’s

85. needed

86. to

87. make

88. your

89. code

90. good

91. and

92. just!
A Bracket ...
A Question Mark ...
php, true
Before the tag you’re intending to use
A semicolon ...
A Question Mark...
All comes before
You close that bracket again
so you can do more!
@LisaSabinWilson | WordCamp Philly - Oct. 2012

93. Correct syntax is not simply a
must...
It’s

94. needed

95. to

96. make

97. your

98. code

99. good

100. and

101. just!
?php the_title(); ?
@LisaSabinWilson | WordCamp Philly - Oct. 2012

102. Themes Live - yes they do
Themes live, yes they do
on a server, its true!
They stay, and they live...
I would say that they do
They live, with no doubt
Where you store them, it seems
Those files surely live
in a folder called THEMES
@LisaSabinWilson | WordCamp Philly - Oct. 2012

103. Themes Live - yes they do
Each theme has its own folder
can even stay as it grows older:
/wp-content/themes/your-awesome-theme/
/wp-content/themes/your-lame-theme/
@LisaSabinWilson | WordCamp Philly - Oct. 2012

104. 6 Main Template
Files:
✤ Stylesheet (style.css)
✤ Header (header.php)
✤ Main Index (index.php)
✤ Sidebar (sidebar.php)
✤ Footer (footer.php)
✤ Theme Functions (functions.php)
@LisaSabinWilson | WordCamp Philly - Oct. 2012

105. 6 Main Template Files:
✤ Stylesheet = Contains the CSS that defines the formatting and style
✤ Header = Starting point for every page of a web site
✤ Main Index = contains template tags that display the content
✤ Sidebar = Navigation items, links, banners, etc
✤ Footer = copyright statements, menus, etc.
✤ Functions = contains functions to include features in your theme such as
thumbnails, menus, custom backgrounds, etc.
@LisaSabinWilson | WordCamp Philly - Oct. 2012

106. Creating a Theme from Scratch:
part slides / part live demo.
Download sample files here:
http://lisas.co/wcatl-demo
@LisaSabinWilson | WordCamp Philly - Oct. 2012

107. Theme Stylesheet (style.css)
✤ Contains the CSS style information for your
site
✤ ALSO must contain theme information in
the form of comments so WordPress
recognizes the unique theme.
@LisaSabinWilson | WordCamp Philly - Oct. 2012

108. Theme Stylesheet (style.css)
/*
Theme Name: WordCamp Theme Demo
Theme URI: http://lisasabin-wilson.com
Description: WordCamp Theme Demo
Version: 1.0
Author: Lisa Sabin-Wilson
Author URI: http://lisasabin-wilson.com
License: GNU Public License
*/
@LisaSabinWilson | WordCamp Philly - Oct. 2012

109. Theme Stylesheet
(style.css)
Comments in the style.css file
display in the Theme Information
section in the Dashboard under
“Manage Themes”
Create a 300 x 225 JPG or PNG file
called “screenshot” to display the
theme thumbnail.
@LisaSabinWilson | WordCamp Philly - Oct. 2012

110. Theme Stylesheet (style.css)
Follow coding standards for CSS for best results:
http://codex.wordpress.org/CSS_Coding_Standards
@LisaSabinWilson | WordCamp Philly - Oct. 2012

111. Header Template
@LisaSabinWilson | WordCamp Philly - Oct. 2012

112. Sidebar Template
@LisaSabinWilson | WordCamp Philly - Oct. 2012

113. Footer Template
@LisaSabinWilson | WordCamp Philly - Oct. 2012

114. Use Simple includes to pull
template files into the Main Index:
✤ To include the header, use get_header()
✤ To include the sidebar, use get_sidebar()
✤ To include the footer, use get_footer()
✤ To include the search form, use get_search_form()
@LisaSabinWilson | WordCamp Philly - Oct. 2012

115. Main Index Template
@LisaSabinWilson | WordCamp Philly - Oct. 2012

116. Theme Functions
@LisaSabinWilson | WordCamp Philly - Oct. 2012

117. Stylesheeet
Start adding CSS style definitions.
@LisaSabinWilson | WordCamp Philly - Oct. 2012

118. Theme Functions
Add Custom Background Feature
add_custom_background();
@LisaSabinWilson | WordCamp Philly - Oct. 2012

119. Theme Functions
Add Post Thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size( 'blog', '600', '200', true );
@LisaSabinWilson | WordCamp Philly - Oct. 2012

120. Theme Functions
Add Post Thumbnails to your template file:
?php if ( has_post_thumbnail($post-ID)) {
echo get_the_post_thumbnail($post-ID, 'blog');
}
?
@LisaSabinWilson | WordCamp Philly - Oct. 2012

121. Theme Functions
Add Widget Areas:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' = 'Sidebar',
'id' = 'sidebar-widget',
));
@LisaSabinWilson | WordCamp Philly - Oct. 2012

122. Theme Functions Reference
http://codex.wordpress.org/Theme_Features
http://codex.wordpress.org/Function_Reference
@LisaSabinWilson | WordCamp Philly - Oct. 2012

123. Creating a Theme from Scratch
http://lisas.co/wcp-demo
@LisaSabinWilson | WordCamp Philly - Oct. 2012

124. Creating a Theme from Scratch
http://lisas.co/wcp-demo
@LisaSabinWilson | WordCamp Philly - Oct. 2012