A brief introduction and overview of WordPress themes and child themes.

1. Themes 101
Jacob Martella
@ViewFromTheBox
Slides:

2. What is a theme?
• A WordPress Theme is a collection of files that work together to
produce a graphical interface with an underlying unifying design
for a weblog. A Theme modifies the way the site is displayed,
without modifying the underlying software.
• - WordPress Codex

3. Difference between themes and plugins
• Themes control the design and look
of the front end of your WordPress
website.
• Ex. Genesis, Twentysixteen
• Plugins add functionality to your
website.
• Ex. Jetpack, Yoast SEO, Gravity
Forms

4. Car metaphor
● WordPress is the engine, frame and other basics of the car.
● Plugins are the added functionality, like power windows, the radio, etc.
● Themes are the design of the car — the colors, wheels, interior decoration

5. What does this matter?
● Themes adding functionality can wreck a site when a theme is switched.
● If a theme adds shortcodes or Gutenberg blocks and you change themes, you lose all of
that code.
● You can only run one theme, but run multiple plugins, those themes are more likely to be
changed.

6. What goes into a theme?
● Three files are needed inside of a theme directory
○ Functions.php
○ Index.php
○ Style.css
● Different templates
○ Single.php - for single posts
○ Page.php - for single pages
○ Front-page.php/home.php - for the homepage
○ Page-{template name}.php - for a custom page template
○ Archive.php - for the default listing page
○ Category.php - for listing posts in a category
○ 404.php - for the 404 template

7. Template Hierarchy https://wphierarchy.com
/

8. What to look for in a theme
● Is a design you like?
● What are the ratings like?
● Does it add functionality to the website?
○ If so, does it do it through a separate plugin that’s included?
● Does it fit your needs?

9. Places to look for a theme
● WordPress.org Theme Directory
● StudioPress
● ThemeForest
● Mojo Marketplace

10. Child Themes

11. Child Themes
● Child themes inherit all of the styles and templates from the specified parent theme
● You can overwrite those inherited styles and templates
○ Ex. You can change the single.php file by creating a single.php file in your child theme
● Protects all of your changes when the theme is updated

12. Case Study: Lawrenceville
Presbyterian
• Had a developer who built website based off of one of the default
themes.
• Church volunteer updated everything — WordPress, Plugins,
Themes.
• All of the changes were overwritten effectively making the front
end unusable.
• Situation could have been avoided if the original developer had
used a child theme.

13. Creating a Child Theme
• Need three things: child theme directory, functions.php file and
style.css file.
• Functions.php file:
• add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}

14. Creating a Child Theme
• Style.css file:
• /*
Theme Name: Child Theme Name
Theme Description:
Author:
Template: theme-slug
Version: 1.0.0
*/
• Links to more info:
• https://www.smashingmagazine.com/2016/01/create-
customize-wordpress-child-theme/

15. Resources - General
● WordPress Theme Directory
● WPBeginner
● Smashing Magazine
● WP101

16. Resources — Developer
● WordPress Codex
● Theme Unit Test
● Envato Tuts+
● WPRig

17. Q&A / Shop Talk Time

18. My Info
● Website: https://jacobmartella.com
● Twitter: @ViewFromTheBox
● Slack: @ViewFromTheBox on wpdfw.slack.com