Slides from my presentation at WordCampEU 2016 in Vienna, Austria on getting started with theming in WordPress.

1. Theming in WordPress
Where Do I Start?
Edmund Turbin, Solutions Engineer @spicecadet

2. 1. Introduction
2. Theme Anatomy
3. Starter Themes
4. Child Themes
5. Theme Frameworks
6. Summary
Agenda

3. THEME ANATOMY

4. Anatomy of a Theme
Stylesheet
• controls visual design/layout
• comments for theme meta info

5. Anatomy of a Theme
Templates
•Control how content is displayed
•HTML and PHP

6. Anatomy of a Theme
Functions
•Optional - customize what the theme does
•Need to understand WP coding standards

7. Anatomy of a Theme

8. 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
*/

9. Theme Information

10. 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/

11. 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

12. WORKING WITH
STARTER THEMES

13. What is a Starter Theme?
• A foundation to start
customizing
• Leverage existing code
• Incorporates best practices
• Created to be re-used and
customized

14. When Should I Use a Starter Theme?
• Your first theme
• Functionality, layouts,
patterns exist already

15. 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/

16. CREATING A SITE WITH
CHILD THEMES

17. 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

18. 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

19. 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

20. 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
*/

21. Add Stylesheet
add_action( ‘wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_styles() {
wp_enqueue_style( ‘theme-css',
get_template_directory_uri() . '/style.css' );
}

22. 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

23. 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

24. OVERRIDING PARENT
FUNCTIONS

25. Pluggable Functions
if ( ! function_exists( ‘my_function' ) ):
function my_function() {
// Your code goes here
}
endif;

26. Function Priority
• Function priority defaults to ’10’
• Child functions run after parent
functions via priority

27. Example: Overriding Functions with Function Priority
add_action( 'init', ‘my_function’ , 15 );
function my_function() {
// Your code goes here.
}

28. 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()

29. Example: Removing Functions with remove_action()
add_action( 'wp_loaded', 'remove_parent' );
function remove_parent() {
remove_action( 'init', 'parent_function' );
}

30. Can it be Easier?
• There’s a plugin for that!
https://wordpress.org/plugins/one-click-child-theme/

31. UNDERSTANDING
THEME FRAMEWORKS

32. 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

33. Theme Framework Benefits
• Maintain features and optimizations across themes
• Many built by commercial theme developers
• Commonly used
• Support and updates
• Development ongoing

34. Theme Framework Examples
http://athemes.com/collections/best-wordpress-theme-frameworks/

35. SUMMARY

36. Solid Foundation
Starter Themes, Child Themes
and Theme Frameworks

37. Theme Frameworks
Well known, supported
and reusable

38. You can always build your own theme
from scratch.
No harm in using an existing theme and
customizing.

39. Let’s chat @ the
Happiness Bar :)
Halle G Foyer
@spicecadet
edmund.turbin@wpengine.com

40. Thank you!
@spicecadet
edmund.turbin@wpengine.com

41. 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/