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

1. Making static sites
dynamic (with
WordPress yo!)
Anthony Montalbano • 05.31.2017

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

4. How WordPress does template files
Headers, footers & menus (oh my!)
Scripts and styles (the right way)
The Loop
Template Parts
Overview

5. How WordPress does
template files

6. (some folder where WordPress is installed)
● /wp-content/
○ /themes/
■ /some_theme_name/
Contents of a WordPress theme

7. /wp-content/themes/some_theme_name/
● style.css
Contents of a WordPress theme

8. /*
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

9. Oh hey, you got a new theme!

10. Oh hey, you got a new theme!
Include a
screenshot.png
in your theme
folder.
(1200 x 900)

11. /wp-content/themes/some_theme_name/
● style.css
● screenshot.png
Contents of a WordPress theme

12. WordPress Template Hierarchy

13. /wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
Contents of a WordPress theme

14. Inside the
index.php

15. Headers, footers and
menus (oh my!)

16. /wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
Contents of a WordPress theme

17. Inside the
index.php

18. Inside the header.php

19. Inside the index.php (with header)

20. /wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
● footer.php
Contents of a WordPress theme

21. Inside the index.php

22. Inside the footer.php

23. Inside the index.php (with header and footer)

24. Loads: header-homepage.php
Loads: footer-about.php
Protip: Headers and Footers

25. /wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
● footer.php
● functions.php
Contents of a WordPress theme

26. Inside the functions.php

27. Inside the header.php

28. Inside the header.php (with menu)

29. Inside the footer.php

30. Inside the footer.php (with menu)

31. Managing your menus from wp-admin

32. Scripts and styles
(the right way)

33. Inside the
index.php

34. Inside the index.php (assets)

35. Inside the functions.php

36. Inside the functions.php
More included scripts with WordPress:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

37. Inside the functions.php (load in footer)

38. Inside the functions.php (localized vars)

39. Inside the functions.php (template conditionals)

40. The Loop

41. Inside the index.php

42. Inside the index.php (with the loop)

43. Inside the index.php (with the loop)

45. Template Parts

46. Inside the index.php (with the loop)

47. /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

48. Inside the callout-primary.php

49. Inside the index.php

51. /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

52. Merci!
Questions?
Me again:
@italianst4
ambrdetroit.com