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

https://codex.wordpress.org/Theme_Development









What we’ll 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

[email protected] | @keithdevon

mailto:[email protected]

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/





• CSS, JS, images, fonts, etc

• Preprocessors

• SASS, LESS, etc.

• Task runners

• Grunt, Gulp, Mixture, CodeKit

Assets

Assetsassets/

scss/ css/ js/ img/





• SASS

• Bourbon and Neat

• CodeKit

• Speeds up development

• Performance wins

• Modular

• style.css used for theme info

CSS

Assetsassets/

scss/ css/ js/ img/





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/





• Similar to SASS structure

• Use CodeKit

• Concatenate and minify files

• Ideally 2 JS files

JS

Assetsassets/

scss/ css/ js/ img/





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• 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/




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/





• 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/





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

<?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(); ?>

Theme Wrapperassets/

scss/ css/ js/ img/





• 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

https://roots.io/sage/docs/theme-wrapper/

http://github.com/roots/sage/blob/master/lib/wrapper.php

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

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

In conclusion

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

[email protected] | @keithdevon

mailto:[email protected]

Internet

WordPress Theme Structure