These are the supporting slides for my 2 hour theme building workshop at WordCamp Birmingham 2015.

1. http://jonnya.net@jonnyauk http://wider.co.uk
Theme builders
workshop
Jonny Allbut - Creative Director

2. http://jonnya.net@jonnyauk http://wider.co.uk
Aim of today
‣Learn to build smarter, easier to modify themes
‣Stop hacking existing themes and use
them as parent themes instead
‣Dealing with CSS and other parent theme files
‣Moving/migrating sites around servers

3. http://jonnya.net@jonnyauk http://wider.co.uk
Local
development
TEAM
Commit to
GitHub/repo
TEAM
Deploy
to server
LIMITED
Development workflow

4. http://jonnya.net@jonnyauk http://wider.co.uk
Purpose and plan
‣Build bespoke to purpose?
‣Theme to release - needs more flexibility!
‣What needs to be editable/static/dynamic?
‣What needs to be queried?

5. http://jonnya.net@jonnyauk http://wider.co.uk
OSX Tools
‣Local dev server (MAMP)
‣Code editor (Sublime)
‣CSS editor (Espresso)
‣Version control (Github/Tower)

6. http://jonnya.net@jonnyauk http://wider.co.uk
Theme building techniques
‣3 fundamental techniques:
‣Stand-alone bespoke/hack existing
‣Parent + child theme
‣Framework + child theme
‣Child theme allows for edits/overrides of any element
and easy updates to parent theme.

7. http://jonnya.net@jonnyauk http://wider.co.uk
Test data
‣http://codex.wordpress.org/Theme_Unit_Test

8. http://jonnya.net@jonnyauk http://wider.co.uk
Child theme creation
‣Create new directory in wp-content/themes
‣No spaces in name!
‣Create file with standard WordPress
theme comments at top
‣Add to style.css code comment:
Template: twentyfourteen
‣Use directory name of parent theme, NOT theme
name!

9. http://jonnya.net@jonnyauk http://wider.co.uk
Dealing with CSS
‣Load parent theme style.css file (or other) by creating
a function in your child theme functions.php file:
<?php
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
‣Could also add other parent theme CSS
by adding them to function

10. http://jonnya.net@jonnyauk http://wider.co.uk
Theme file structure
‣WordPress loads for specific files if available when
displaying content of different types
‣Understand cascade of files used:
http://codex.wordpress.org/Template_Hierarchy

11. http://jonnya.net@jonnyauk http://wider.co.uk
Migrating/moving sites is easy!
‣Export database from source server.
‣Download entire home directory (or just /wp-content)
‣Re-configure wp-config.php as required.
‣Import database to target server.
‣Run InterconnectIT migration script:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
‣Refresh permalinks!