Click here to load reader

WordPress Theme Structure

  • View
    544

  • Download
    0

Embed Size (px)

Text of 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

Search related