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.

Making static sites dynamic (with WordPress yo!)

100 views

Published on

This presentation walks through creating a very simple WordPress theme from a static HTML file. The goal is to understand how themes work and create a foundation to build future WordPress themes

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making static sites dynamic (with WordPress yo!)

  1. 1. Making static sites dynamic (with WordPress yo!) Anthony Montalbano • 05.31.2017
  2. 2. Anthony Montalbano Stuff I did ● Cofounded AMBR Detroit ● WordPress dev for 10 years ● Sold millions of pizza on the internet Stuff to contact me ● @italianst4 ● anthony@ambrdetroit.com
  3. 3. How WordPress does template files Headers, footers & menus (oh my!) Scripts and styles (the right way) The Loop Template Parts Overview
  4. 4. How WordPress does template files
  5. 5. (some folder where WordPress is installed) ● /wp-content/ ○ /themes/ ■ /some_theme_name/ Contents of a WordPress theme
  6. 6. /wp-content/themes/some_theme_name/ ● style.css Contents of a WordPress theme
  7. 7. /* Theme Name: Custom Theme Name Theme URI: https://ambrdetroit.com Description: A custom theme for AMBR Version: 1.0.0 Author: AMBR Detroit Author URI: http://ambrdetroit.com License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ambrdetroit */ Inside the style.css
  8. 8. Oh hey, you got a new theme!
  9. 9. Oh hey, you got a new theme! Include a screenshot.png in your theme folder. (1200 x 900)
  10. 10. /wp-content/themes/some_theme_name/ ● style.css ● screenshot.png Contents of a WordPress theme
  11. 11. WordPress Template Hierarchy
  12. 12. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * Contents of a WordPress theme
  13. 13. Inside the index.php
  14. 14. Headers, footers and menus (oh my!)
  15. 15. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * ● header.php Contents of a WordPress theme
  16. 16. Inside the index.php
  17. 17. Inside the header.php
  18. 18. Inside the index.php (with header)
  19. 19. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * ● header.php ● footer.php Contents of a WordPress theme
  20. 20. Inside the index.php
  21. 21. Inside the footer.php
  22. 22. Inside the index.php (with header and footer)
  23. 23. Loads: header-homepage.php Loads: footer-about.php Protip: Headers and Footers
  24. 24. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * ● header.php ● footer.php ● functions.php Contents of a WordPress theme
  25. 25. Inside the functions.php
  26. 26. Inside the header.php
  27. 27. Inside the header.php (with menu)
  28. 28. Inside the footer.php
  29. 29. Inside the footer.php (with menu)
  30. 30. Managing your menus from wp-admin
  31. 31. Scripts and styles (the right way)
  32. 32. Inside the index.php
  33. 33. Inside the index.php (assets)
  34. 34. Inside the functions.php
  35. 35. Inside the functions.php More included scripts with WordPress: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
  36. 36. Inside the functions.php (load in footer)
  37. 37. Inside the functions.php (localized vars)
  38. 38. Inside the functions.php (template conditionals)
  39. 39. The Loop
  40. 40. Inside the index.php
  41. 41. Inside the index.php (with the loop)
  42. 42. Inside the index.php (with the loop)
  43. 43. Template Parts
  44. 44. Inside the index.php (with the loop)
  45. 45. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * ● header.php ● footer.php ● functions.php ● /template-parts ○ callout-primary.php Contents of a WordPress theme
  46. 46. Inside the callout-primary.php
  47. 47. Inside the index.php
  48. 48. /wp-content/themes/some_theme_name/ ● style.css * ● screenshot.png ● index.php * ● header.php ● footer.php ● functions.php ● /template-parts ○ callout-primary.php Contents of a WordPress theme
  49. 49. Merci! Questions? Me again: @italianst4 ambrdetroit.com

×