Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Theme Structure

3,485 views

Published on

Efficient, organised and reusable WordPress theme development.

Published in: Internet
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WordPress Theme Structure

  1. 1. WordPress theme structure Efficient, organised, (and fun!) 
 WordPress theme development
  2. 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. 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. 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. 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. 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. 7. Theme considerations • development speed • modular • reusable • DRY • lightweight • collaboration • WP coding standards • intuitively named • high performance • site speed • SEO • a11y • growth/evolution
  8. 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. 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. 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. 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. 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. 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. 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";
  15. 15. 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!
  16. 16. functions.php include 'functions/scripts.php';
 include 'functions/images.php';
 include 'functions/menu.php'; include 'functions/wrapper.php';

  17. 17. 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
  18. 18. 
 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');
  19. 19. 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
  20. 20. 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’))
  21. 21. <?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(); ?>
  22. 22. 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
  23. 23. <!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
  24. 24. <?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
  25. 25. In conclusion • No right way • Find what works for you • Keep it organised, modular and reusable • Have fun!
  26. 26. Thanks keith@keithdevon.com | @keithdevon

×