WordPress themes are files that work together to create the design and functionality of a WordPress site. An efficient theme structure includes separate files for assets, functions, templates and parts to keep the code modular and reusable. Key aspects of the structure include folders for CSS, JS and images; functions split across multiple files; main templates in the root directory with custom templates in a sub-folder; and reusable parts included using get_template_part(). This summary outlines best practices for organizing WordPress theme code and structure.

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