Slides from a presentation given at a Columbus, OH WordPress Meetup

1. INTRO TO WORDPRESS THEMES
Damon Sharp

2. Intro to WordPress Themes
ABOUT ME
Damon Sharp
http://damonsharp.me
@damonsharp
http://sharpwebsolutions.com
@sharpwebsolns

3. Intro to WordPress Themes
TOPICS TO COVER

4. Intro to WordPress Themes
TOPICS TO COVER
What WordPress themes are

5. Intro to WordPress Themes
TOPICS TO COVER
What WordPress themes are
Anatomy of a theme (parent and child)

6. Intro to WordPress Themes
TOPICS TO COVER
What WordPress themes are
Anatomy of a theme (parent and child)
Where to find themes

7. Intro to WordPress Themes
TOPICS TO COVER
What WordPress themes are
Anatomy of a theme (parent and child)
Where to find themes
What to look for in a theme

8. Intro to WordPress Themes
TOPICS TO COVER
What WordPress themes are
Anatomy of a theme (parent and child)
Where to find themes
What to look for in a theme
How to install, activate, and change themes

9. Intro to WordPress Themes
WHAT WORDPRESS THEMES ARE

10. Intro to WordPress Themes
WHAT WORDPRESS THEMES ARE
• Background: WordPress is a CMS

11. Intro to WordPress Themes
WHAT WORDPRESS THEMES ARE
• Background: WordPress is a CMS
• Themes represent different ways to display this data

12. Intro to WordPress Themes
ANATOMY OF A THEME

13. Intro to WordPress Themes
ANATOMY OF A THEME
• Parent theme minimum requirements: style.css & index.php
• style.css must be in root directory & have a stylesheet header:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background,
threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support,
editor-style, custom-menu (optional)
License:
License URI:
General comments (optional).
*/

14. Intro to WordPress Themes
ANATOMY OF A THEME

15. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:

16. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php

17. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php

18. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php

19. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php

20. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php
• page.php

21. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php
• page.php
• home.php

22. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php
• page.php
• home.php
• single.php

23. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php
• page.php
• home.php
• single.php
• 404.php

24. Intro to WordPress Themes
ANATOMY OF A THEME
Other theme files:
• header.php
• footer.php
• sidebar.php
• functions.php
• page.php
• home.php
• single.php
• 404.php
• thumbnail.png

25. Intro to WordPress Themes
ANATOMY OF A THEME

26. Intro to WordPress Themes
ANATOMY OF A THEME
• Child theme minimum requirements: style.css
• style.css must have a stylesheet header (“Template” required
and must match the directory name of the parent theme):
/*
Theme Name: Twenty Eleven Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentyeleven
Version: 0.1.0
*/
• Any additional files override those of the parent (except
functions.php)

27. Intro to WordPress Themes
ANATOMY OF A THEME

28. Intro to WordPress Themes
ANATOMY OF A THEME
•How does WordPress determine which files to use?

29. Intro to WordPress Themes
ANATOMY OF A THEME
•How does WordPress determine which files to use?
•By following a template hierarchy:

30. Intro to WordPress Themes
ANATOMY OF A THEME
•How does WordPress determine which files to use?
•By following a template hierarchy:

31. Intro to WordPress Themes
WHERE TO FIND THEMES

32. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository

33. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest

34. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes

35. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes

36. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes
• WPzoom

37. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes
• WPzoom
• Theme Garden

38. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes
• WPzoom
• Theme Garden
• AppThemes

39. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes
• WPzoom
• Theme Garden
• AppThemes
• StudioPress

40. Intro to WordPress Themes
WHERE TO FIND THEMES
• WordPress Theme Repository
• ThemeForest
• WooThemes
• ElegantThemes
• WPzoom
• Theme Garden
• AppThemes
• StudioPress
• Premium Themes

41. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME

42. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• If purchasing, does it come from a reputable source/
developer, and is there support available?

43. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• If purchasing, does it come from a reputable source/
developer, and is there support available?
• Does it contain “hooks”... wp_head() & wp_footer()? If not,
plugins and styling may cease to work.

44. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• If purchasing, does it come from a reputable source/
developer, and is there support available?
• Does it contain “hooks”... wp_head() & wp_footer()? If not,
plugins and styling may cease to work.
• Does the code used to build the site validate? Running each
page through the W3C Validator will tell you. Browsers may
have issues displaying the page depending on the severity.

45. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• If purchasing, does it come from a reputable source/
developer, and is there support available?
• Does it contain “hooks”... wp_head() & wp_footer()? If not,
plugins and styling may cease to work.
• Does the code used to build the site validate? Running each
page through the W3C Validator will tell you. Browsers may
have issues displaying the page depending on the severity.
• When changing templates, does the new template have the
same files as your current one. This may cause issues if they
differ.

46. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME

47. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• Is the theme widgetized? This allows for addition of widgets
through the WordPress Admin.

48. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• Is the theme widgetized? This allows for addition of widgets
through the WordPress Admin.
• Does it work in all browsers? Premium themes should have
this information readily available.

49. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• Is the theme widgetized? This allows for addition of widgets
through the WordPress Admin.
• Does it work in all browsers? Premium themes should have
this information readily available.
• Does the theme have search functionality?

50. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• Is the theme widgetized? This allows for addition of widgets
through the WordPress Admin.
• Does it work in all browsers? Premium themes should have
this information readily available.
• Does the theme have search functionality?
• Does the theme have a functions.php file that adds theme
specific functionality such as custom post types, thumbnail
support, etc.?

51. Intro to WordPress Themes
WHAT TO LOOK FOR IN A THEME
• Is the theme widgetized? This allows for addition of widgets
through the WordPress Admin.
• Does it work in all browsers? Premium themes should have
this information readily available.
• Does the theme have search functionality?
• Does the theme have a functions.php file that adds theme
specific functionality such as custom post types, thumbnail
support, etc.?
• Does the theme have an admin options panel to allow for
easy update of theme options such as colors, backgrounds,
images, etc.?

52. Intro to WordPress Themes
INSTALLATION & ACTIVATION

53. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:

54. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:

55. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:
/wp-content/themes/

56. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:
/wp-content/themes/

57. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:
/wp-content/themes/
• How to I get them there?

58. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:
/wp-content/themes/
• How to I get them there?

59. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Directory where theme files are located:
/wp-content/themes/
• How to I get them there?
Upload via FTP or direct installation from Appearance >
Themes in WordPress admin

60. Intro to WordPress Themes
INSTALLATION & ACTIVATION

61. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:

62. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:

63. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)

64. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)
2. Cyberduck (Mac & Windows)

65. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)
2. Cyberduck (Mac & Windows)
3. FileZilla (All platforms)

66. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)
2. Cyberduck (Mac & Windows)
3. FileZilla (All platforms)
4. WinSCP (Windows)

67. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)
2. Cyberduck (Mac & Windows)
3. FileZilla (All platforms)
4. WinSCP (Windows)

68. Intro to WordPress Themes
INSTALLATION & ACTIVATION
• Popular FTP Clients:
1. Transmit (Mac)
2. Cyberduck (Mac & Windows)
3. FileZilla (All platforms)
4. WinSCP (Windows)
•Once files are in proper place the theme can be changed by
clicking “activate” under Appearance > Themes

69. Intro to WordPress Themes
QUESTIONS ?