WordPress Theme Structure

WordPress theme structure

Efficient, organised, (and fun!) WordPress theme development

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

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

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

What well cover

Theme considerations What should go into a theme File and folder structure

Assets Functions Page templates Template parts Theme wrappers

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

Theme considerations development speed

modular reusable DRY lightweight

collaboration WP coding standards intuitively named

high performance site speed SEO a11y

growth/evolution

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

Theme structureassets/

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

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

Assetsassets/

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

Assetsassets/

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/*";

Assetsassets/

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

Assetsassets/

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";

Functionsassets/

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!

functions.php

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

scripts.phpassets/

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

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');

Page templatesassets/

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

Template partsassets/

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))

Theme Wrapperassets/

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

base.php

index.php

In conclusion

No right way Find what works for you Keep it organised, modular and reusable Have fun!

Thankskeith@keithdevon.com | @keithdevon