Date post: | 19-Jul-2015 |
Category: |
Internet |
Upload: | keithdevon |
View: | 554 times |
Download: | 0 times |
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 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
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’))
<?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/
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
<!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!