Making static sites dynamic (with WordPress yo!)

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

● anthony@ambrdetroit.com

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