WordCamp Birmingham 2015 - Theme building workshop
Post on 16-Jul-2015
224 Views
Preview:
Transcript
http://jonnya.net@jonnyauk http://wider.co.uk
Theme builders workshop
Jonny Allbut - Creative Director
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
http://jonnya.net@jonnyauk http://wider.co.uk
Local development
TEAM
Commit to GitHub/repo
TEAM
Deployto server LIMITED
Development workflow
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?
http://jonnya.net@jonnyauk http://wider.co.uk
OSX Tools
‣ Local dev server (MAMP)
‣Code editor (Sublime)
‣CSS editor (Espresso)
‣Version control (Github/Tower)
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.
http://jonnya.net@jonnyauk http://wider.co.uk
Test data
‣http://codex.wordpress.org/Theme_Unit_Test
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!
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
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
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!
top related