making static sites dynamic (with wordpress yo!)
TRANSCRIPT
Making static sites dynamic (with WordPress yo!)
Anthony Montalbano • 05.31.2017
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
How WordPress does template files
Headers, footers & menus (oh my!)
Scripts and styles (the right way)
The Loop
Template Parts
Overview
How WordPress does template files
(some folder where WordPress is installed)
● /wp-content/
○ /themes/
■ /some_theme_name/
Contents of a WordPress theme
/wp-content/themes/some_theme_name/
● style.css
Contents of a WordPress theme
/*
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
Oh hey, you got a new theme!
Oh hey, you got a new theme!
Include a screenshot.png in your theme folder.(1200 x 900)
/wp-content/themes/some_theme_name/
● style.css
● screenshot.png
Contents of a WordPress theme
WordPress Template Hierarchy
/wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
Contents of a WordPress theme
Inside the index.php
Headers, footers and menus (oh my!)
/wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
Contents of a WordPress theme
Inside the index.php
Inside the header.php
Inside the index.php (with header)
/wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
● footer.php
Contents of a WordPress theme
Inside the index.php
Inside the footer.php
Inside the index.php (with header and footer)
Loads: header-homepage.php
Loads: footer-about.php
Protip: Headers and Footers
/wp-content/themes/some_theme_name/
● style.css *
● screenshot.png
● index.php *
● header.php
● footer.php
● functions.php
Contents of a WordPress theme
Inside the functions.php
Inside the header.php
Inside the header.php (with menu)
Inside the footer.php
Inside the footer.php (with menu)
Managing your menus from wp-admin
Scripts and styles (the right way)
Inside the index.php
Inside the index.php (assets)
Inside the functions.php
Inside the functions.php
More included scripts with WordPress: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Inside the functions.php (load in footer)
Inside the functions.php (localized vars)
Inside the functions.php (template conditionals)
The Loop
Inside the index.php
Inside the index.php (with the loop)
Inside the index.php (with the loop)
Template Parts
Inside the index.php (with the loop)
/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
Inside the callout-primary.php
Inside the index.php
/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
Merci!
Questions?
Me again:
@italianst4
ambrdetroit.com