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!