Efficient, organised and reusable WordPress theme development.

1. WordPress theme
structure
Efficient, organised, (and fun!)
WordPress theme development

2. What is a WordPress theme?
WordPress Themes are files that work together to
create the design and functionality of a WordPress
site. Each Theme may be different, offering many
choices for site owners to instantly change their
website look.
- https://codex.wordpress.org/Theme_Development

3. What is a WordPress theme?
WordPress Themes are files that work together to
create the design and functionality of a WordPress
site. Each Theme may be different, offering many
choices for site owners to instantly change their
website look.
- https://codex.wordpress.org/Theme_Development

4. What is a WordPress theme?
WordPress Themes are files that work together to
create the design and functionality of a WordPress
site. Each Theme may be different, offering many
choices for site owners to instantly change their
website look.
- https://codex.wordpress.org/Theme_Development

5. What we’ll cover
• Theme considerations
• What should go into a theme
• File and folder structure
• Assets
• Functions
• Page templates
• Template parts
• Theme wrappers

6. About me
• Keith Devon
• Freelance WordPress developer for 5 years
• Starting an agency
• Primarily build custom themes
• Focus on performance, SEO, business goals
keith@keithdevon.com | @keithdevon

7. Theme considerations
• development speed
• modular
• reusable
• DRY
• lightweight
• collaboration
• WP coding standards
• intuitively named
• high performance
• site speed
• SEO
• a11y
• growth/evolution

8. What to include
(and what to leave out)
Themes
• Front-end display
• Visual enhancements
• Navigation
Plugins
• Content structure
• Custom post types
• Custom taxonomies
• Custom fields
• Other functionality and logic
• API integrations

9. Theme structure
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php

10. assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
• CSS, JS, images, fonts, etc
• Preprocessors
• SASS, LESS, etc.
• Task runners
• Grunt, Gulp, Mixture, CodeKit
Assets

11. Assets
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
• SASS
• Bourbon and Neat
• CodeKit
• Speeds up development
• Performance wins
• Modular
• style.css used for theme info
CSS

12. Assets
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
SCSS structure
scss/
project.scss
base/
__variables.scss
__normalize.scss
_layout.scss
_type.scss
modules/
_site-header.scss
_site-footer.scss
_testimonial.scss
templates/
_front-page.scss
@import "bourbon", "neat";
@import "base/*";
@import "templates/*";
@import "modules/*";

13. Assets
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
• Similar to SASS structure
• Use CodeKit
• Concatenate and minify files
• Ideally 2 JS files
JS

14. Assets
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
JS structure
js/
min/
header.min.js
footer.min.js
modules/
_testimonial.js
source/
modernizer.js
header.js
footer.js
// @codekit-prepend "source/modernizer.js";

16. Functions
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
Functions
• Break up your functions into files
• as many as you need
• include them from functions.php
• easy!

17. functions.php
include 'functions/scripts.php';
include 'functions/images.php';
include 'functions/menu.php';
include 'functions/wrapper.php';

18. scripts.php
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
style.css
functions.php
Scripts (and styles)
• wp_enqueue_script()
• wp_enqueue_style()
• with wp_enqueue_scripts()
• cache busting

19.
function load_the_css(){
if(!is_admin()){
$css_link = get_stylesheet_directory_uri() . '/assets/css/project.css';
$css_file = get_stylesheet_directory() . '/assets/css/project.css';
wp_enqueue_style('theme-style', $css_link, array(), filemtime($css_file),
'all');
}
}
add_action('wp_enqueue_scripts', 'load_the_css');

20. Page templates
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
• Main templates have to live in root
• index.php
• single.php
• page.php
• archive.php
• etc.
• Custom page templates can live in sub-
directory

21. Template parts
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
Template parts
• keeps code tidy and modular
• part names same a .scss and .js files
• get_template_part(‘parts/part-name’)
• include(locate_template(‘parts/part-name.php’))

22. <?php
/*
Template Name: Contact Page
*/
?>
<?php get_header(); ?>
<?php get_template_part('parts/page', 'header'); ?>
<?php get_template_part(‘parts/content', 'contact'); ?>
<?php get_template_part('parts/page', 'footer'); ?>
<?php get_footer(); ?>

23. Theme Wrapper
assets/
scss/
css/
js/
img/
functions/
scripts.php
images.php
menus.php
wrapper.php
page-templates/
template-name.php
parts/
site-header.php
site-footer.php
head.php
testimonial.php
base.php
index.php
single.php
page.php
style.css
functions.php
• DRY
• Tags always open and close in the same file
• First found this in Roots theme
• https://roots.io/sage/docs/theme-wrapper/
Add code from github.com/roots/sage/blob/master/lib/wrapper.php
to your wrapper.php file

24. <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<?php get_template_part('parts/head'); ?>
<body <?php body_class(); ?>>
<?php get_template_part('parts/site-header'); ?>
<?php include sage_template_path(); ?>
<?php get_template_part('parts/site-footer'); ?>
</body>
</html>
base.php

25. <?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('parts/content'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php get_template_part('parts/none'); ?>
<?php endif; ?>
index.php

26. In conclusion
• No right way
• Find what works for you
• Keep it organised, modular and reusable
• Have fun!

27. Thanks
keith@keithdevon.com | @keithdevon