Theming in WordPress - Where do I Start?
41
Theming in WordPress Where Do I Start? Edmund Turbin, Solutions Engineer @spicecadet
-
Upload
edmund-turbin -
Category
Internet
-
view
1.735 -
download
2
Transcript of Theming in WordPress - Where do I Start?
Theming in WordPressWhere Do I Start?
Edmund Turbin, Solutions Engineer @spicecadet
1. Introduction 2. Theme Anatomy 3. Starter Themes 4. Child Themes 5. Theme Frameworks 6. Summary
Agenda
THEME ANATOMY
Anatomy of a Theme
Stylesheet • controls visual design/layout • comments for theme meta info
Anatomy of a Theme
Templates •Control how content is displayed •HTML and PHP
Anatomy of a Theme
Functions •Optional - customize what the theme does •Need to understand WP coding standards
Anatomy of a Theme
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
*/
Theme Information
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
WORKING WITH STARTER THEMES
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/
CREATING A SITE WITH CHILD THEMES
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
OVERRIDING PARENT FUNCTIONS
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' ); }
Can it be Easier?
• There’s a plugin for that!
https://wordpress.org/plugins/one-click-child-theme/
UNDERSTANDING THEME FRAMEWORKS
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
Theme Framework Examples
http://athemes.com/collections/best-wordpress-theme-frameworks/
SUMMARY
Solid Foundation
Starter Themes, Child Themes and Theme Frameworks
Theme Frameworks
Well known, supported and reusable
You can always build your own theme from scratch.
No harm in using an existing theme and customizing.
Learn More
The Theme Handbook https://developer.wordpress.org/themes/
Starter Themes http://www.designbombs.com/8-best-wordpress-starter-themes-frameworks-new-wp-developers/
Theme Frameworks http://athemes.com/collections/best-wordpress-theme-frameworks/
