Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro To WordPress Themes

2,717 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

Intro To WordPress Themes

  1. 1. INTRO TO WORDPRESS THEMES Damon Sharp
  2. 2. Intro to WordPress Themes ABOUT ME Damon Sharp http://damonsharp.me @damonsharp http://sharpwebsolutions.com @sharpwebsolns
  3. 3. Intro to WordPress ThemesTOPICS TO COVER
  4. 4. Intro to WordPress ThemesTOPICS TO COVER What WordPress themes are
  5. 5. Intro to WordPress ThemesTOPICS TO COVER What WordPress themes areAnatomy of a theme (parent and child)
  6. 6. Intro to WordPress ThemesTOPICS TO COVER What WordPress themes areAnatomy of a theme (parent and child) Where to find themes
  7. 7. Intro to WordPress ThemesTOPICS TO COVER What WordPress themes areAnatomy of a theme (parent and child) Where to find themes What to look for in a theme
  8. 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 themeHow to install, activate, and change themes
  9. 9. Intro to WordPress ThemesWHAT WORDPRESS THEMES ARE
  10. 10. Intro to WordPress ThemesWHAT WORDPRESS THEMES ARE• Background: WordPress is a CMS
  11. 11. Intro to WordPress ThemesWHAT WORDPRESS THEMES ARE• Background: WordPress is a CMS• Themes represent different ways to display this data
  12. 12. Intro to WordPress ThemesANATOMY OF A THEME
  13. 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. 14. Intro to WordPress ThemesANATOMY OF A THEME
  15. 15. Intro to WordPress ThemesANATOMY OF A THEME Other theme files:
  16. 16. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php
  17. 17. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php
  18. 18. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php
  19. 19. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php • functions.php
  20. 20. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php • functions.php • page.php
  21. 21. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php • functions.php • page.php • home.php
  22. 22. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php • functions.php • page.php • home.php • single.php
  23. 23. Intro to WordPress ThemesANATOMY OF A THEME Other theme files: • header.php • footer.php • sidebar.php • functions.php • page.php • home.php • single.php • 404.php
  24. 24. Intro to WordPress ThemesANATOMY 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. 25. Intro to WordPress ThemesANATOMY OF A THEME
  26. 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. 27. Intro to WordPress ThemesANATOMY OF A THEME
  28. 28. Intro to WordPress Themes ANATOMY OF A THEME•How does WordPress determine which files to use?
  29. 29. Intro to WordPress Themes ANATOMY OF A THEME•How does WordPress determine which files to use?•By following a template hierarchy:
  30. 30. Intro to WordPress Themes ANATOMY OF A THEME•How does WordPress determine which files to use?•By following a template hierarchy:
  31. 31. Intro to WordPress ThemesWHERE TO FIND THEMES
  32. 32. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository
  33. 33. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest
  34. 34. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes
  35. 35. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes
  36. 36. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes• WPzoom
  37. 37. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes• WPzoom• Theme Garden
  38. 38. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes• WPzoom• Theme Garden• AppThemes
  39. 39. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes• WPzoom• Theme Garden• AppThemes• StudioPress
  40. 40. Intro to WordPress ThemesWHERE TO FIND THEMES• WordPress Theme Repository• ThemeForest• WooThemes• ElegantThemes• WPzoom• Theme Garden• AppThemes• StudioPress• Premium Themes
  41. 41. Intro to WordPress ThemesWHAT TO LOOK FOR IN A THEME
  42. 42. Intro to WordPress ThemesWHAT TO LOOK FOR IN A THEME• If purchasing, does it come from a reputable source/ developer, and is there support available?
  43. 43. Intro to WordPress ThemesWHAT 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. 44. Intro to WordPress ThemesWHAT 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. 45. Intro to WordPress ThemesWHAT 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. 46. Intro to WordPress ThemesWHAT TO LOOK FOR IN A THEME
  47. 47. Intro to WordPress ThemesWHAT TO LOOK FOR IN A THEME• Is the theme widgetized? This allows for addition of widgets through the WordPress Admin.
  48. 48. Intro to WordPress ThemesWHAT 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. 49. Intro to WordPress ThemesWHAT 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. 50. Intro to WordPress ThemesWHAT 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. 51. Intro to WordPress ThemesWHAT 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. 52. Intro to WordPress ThemesINSTALLATION & ACTIVATION
  53. 53. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located:
  54. 54. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located:
  55. 55. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located: /wp-content/themes/
  56. 56. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located: /wp-content/themes/
  57. 57. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located: /wp-content/themes/• How to I get them there?
  58. 58. Intro to WordPress Themes INSTALLATION & ACTIVATION• Directory where theme files are located: /wp-content/themes/• How to I get them there?
  59. 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. 60. Intro to WordPress ThemesINSTALLATION & ACTIVATION
  61. 61. Intro to WordPress Themes INSTALLATION & ACTIVATION• Popular FTP Clients:
  62. 62. Intro to WordPress Themes INSTALLATION & ACTIVATION• Popular FTP Clients:
  63. 63. Intro to WordPress Themes INSTALLATION & ACTIVATION• Popular FTP Clients: 1. Transmit (Mac)
  64. 64. Intro to WordPress Themes INSTALLATION & ACTIVATION• Popular FTP Clients: 1. Transmit (Mac) 2. Cyberduck (Mac & Windows)
  65. 65. Intro to WordPress Themes INSTALLATION & ACTIVATION• Popular FTP Clients: 1. Transmit (Mac) 2. Cyberduck (Mac & Windows) 3. FileZilla (All platforms)
  66. 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. 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. 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 byclicking “activate” under Appearance > Themes
  69. 69. Intro to WordPress Themes QUESTIONS ?

×