Post on 15-Apr-2017
1. Introduction 2. Theme Anatomy 3. Starter Themes 4. Child Themes 5. Theme Frameworks 6. Summary
Agenda
Anatomy of a Theme
Functions •Optional - customize what the theme does •Need to understand WP coding standards
Theme Information/*
Theme Name: Where do I start?
Theme URI: Your theme's URL
Author: Your name or WordPress.org's username
Author URI: Your web address
Description: This is the minimum for creating a custom theme.
Version: 1.0
Tags: one-column, custom-colors, custom-header, blog, education
*/
Templates
• Control display logic • Generate the structure of your HTML • Can be created for pages, posts, CPTs, etc. • Can include partials
https://developer.wordpress.org/themes/basics/template-hierarchy/ https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/
functions.php
• Acts as a plugin • Load scripts and styles • Enable theme features
• sidebars, nav menus, post formats, etc • Define functions used across several templates • Customize your theme’s behavior
https://codex.wordpress.org/Functions_File_Explained
What is a Starter Theme?
• A foundation to start customizing
• Leverage existing code
• Incorporates best practices
• Created to be re-used and customized
When Should I Use a Starter Theme?
• Your first theme
• Functionality, layouts, patterns exist already
Starter Theme Best Practices
• Don’t update your theme
• New functionality or changes my break it
https://themeshaper.com/2013/10/11/dont-update-your-theme/
When to Use a Child Theme
• A theme exists and can be extended
• Speed up development time
Child Tmp
CSS
Func
Parent Tmp
CSS
Func
Benefits of a Child Theme
• Inherits parent functionality
• Extend styles, functions and templates
• Can be updated
• Don’t have to modify parent code Child Tmp
CSS
Func
Parent Tmp
CSS
Func
How to Create a Child Theme
• Create a new directory in wp-themes
• Create a style.css file
• Change the Template: directory
• Add templates, functions, styles Child Tmp
CSS
Func
Parent Tmp
CSS
Func
How to Create a Child Theme
/* Theme Name: Where Do I Start Child Theme Description: Description of your Child Theme Author: Your name here Template: folder */
Add Stylesheet
add_action( ‘wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_styles() {
wp_enqueue_style( ‘theme-css', get_template_directory_uri() . '/style.css' );
}
Things to Know about Child Templates
• Parent templates inherited
• Child templates override parent templates
• Can be specific to a page
• page-{slug}.php
Child Tmp
CSS
Func
Parent Tmp
CSS
Func
Things to Know about Child Functions
• Parent functions will run automatically
• Child functions load before parent functions
• Parent functions can be overridden Child Tmp
CSS
Func
Parent Tmp
CSS
Func
Pluggable Functions
if ( ! function_exists( ‘my_function' ) ): function my_function() {
// Your code goes here }
endif;
Function Priority
• Function priority defaults to ’10’
• Child functions run after parent functions via priority
Example: Overriding Functions with Function Priority
add_action( 'init', ‘my_function’ , 15 );
function my_function() { // Your code goes here. }
Removing Functions
• Completely removes the function
• remove_action()
• Called after the initial function
http://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme--cms-22623
function()
Example: Removing Functions with remove_action()
add_action( 'wp_loaded', 'remove_parent' );
function remove_parent() { remove_action( 'init', 'parent_function' ); }
What is a Theme Framework?
• Code library with tools for commonly used tasks
• Parent theme allows for updates
• Support different development approaches
• Many existing themes already built
Theme Framework Benefits
• Maintain features and optimizations across themes
• Many built by commercial theme developers
• Commonly used
• Support and updates
• Development ongoing
You can always build your own theme from scratch.
No harm in using an existing theme and customizing.