WordCamp Bournemouth 2014 - Designing with data in WordPress

of 40 /40
http://wonderflux.com @jonnyauk http://tancdesign.com DESIGNING WITH DATA Jonny Allbut Director & Head of Digital http://wonderflux.com @jonnyauk http://tancdesign.com WordCamp Bournemouth 2014

description

My Presentation from WordCamp Bournemouth 2014 on designing with data in WordPress. Covers structuring your data, the different data storage/attachment options available to you and some food for thought on how to use this data to deliver flexible WordPress websites.

Transcript of WordCamp Bournemouth 2014 - Designing with data in WordPress

Page 1: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DESIGNING WITH DATA

Jonny AllbutDirector & Head of Digital

http://wonderflux.com@jonnyauk http://tancdesign.com

WordCamp Bournemouth 2014

Page 2: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

HOWDY!

• Working with WordPress since 2004.

• Involved in WPUK group & co-organiserof Birmingham WordPress user group.

• Likes to share:

• Wonderflux - free GPL theme frameworkhttp://wonderflux.com

• WP-CMS Post Control - control post editing capabilities http://wordpress.org/plugins/wp-cms-post-control

Page 3: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

GET SMART(ER) WITH THEMES

• Content detection can be brittle.

• More creative flexibility.

• A bespoke editing experience.

• Accommodating future development.

Page 4: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

STRUCTURE YOUR DATA

• Identify ‘content’ and ‘design’ elements.

• What needs to be editable?

• What needs to be queried?

• How will you achieve the design requirements?

Page 5: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

STRUCTURE: DATA ATTRIBUTES

• Page/post hierarchy

• Post types/formats

• Tags/categories

• Custom taxonomies

• Custom fields

• Images/attachments

Page 6: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

STRUCTURE: DESIGN ATTRIBUTES

• General static(ish) design/structure

• Editable WordPress Menus

• Editable Widget areas

• Archive views

Page 7: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

THEME FILE ORGANISATION

• The theme file hierarchy/cascade:http://codex.wordpress.org/Template_Hierarchy

• Post types

• Archive/taxonomy/term

• get_template_part()

Page 8: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy

Page 9: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy

Page 10: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

TAXONOMY ARCHIVE EXAMPLE

• Taxonomy: colour

• Terms: red, green, blue

• File cascade:

1. taxonomy-colour-red.php

2. taxonomy-colour.php

3. taxonomy.php

Page 11: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

BASICS: CONTENT DETECTION

• CSS

• Body class

• Post class

• PHP

• Post ID/query vars

• is_page() is_archive() etc!

• Has post image

• Has widgets

Page 12: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: CSS

<body <?php body_class(); ?>>

<body class="browser-chrome home page page-id-10 page-template-default content-no-sidebar-1 width-950”>

!

add_filter('body_class','ja_filter_body_class');

function ja_filter_body_class($classes) { $classes[] = ‘custom-class-name'; return $classes;}

Page 13: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: CSS

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div id="post-310" class="post-310 post type-post status-publish format-

standard hentry category-branding-design category-events-and-conferences

category-work single-post">

!

add_filter('post_class','ja_filter_post_class');

function ja_filter_post_class($classes) { $classes[] = 'custom-class-name'; return $classes;}

Page 14: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: PHPfunction ja_add_help_links() { if (!is_page(‘help’)) return; global $post; $mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'title', 'sort_order' => 'desc' ) ); foreach( $mypages as $page ) { echo '<p><a href=“' . get_permalink( $page->ID ) . '”>’; echo esc_html( $page->post_title ) . '</a></p>'; }}

Page 15: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

OTHER PAGE STRUCTURE FUNCTIONS

• get_page_hierarchy()http://codex.wordpress.org/get_page_hierarchy

• get_page_children() http://codex.wordpress.org/get_page_children

• get_ancestors( $object_id, $object_type )http://codex.wordpress.org/get_ancestors

Page 16: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: PHP

has_post_thumbnail( $post_id );

// Must be inside a loop if no ID supplied.if ( has_post_thumbnail() ) { the_post_thumbnail();} else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';}

Page 17: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: PHP

get_the_post_thumbnail( $post_id )

// Must be inside a loop if no ID set.if ( empty(get_the_post_thumbnail()) ) { // Do some fallback}

Page 18: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

CONTENT DETECTION: PHP

is_active_sidebar( $name-or-id );

if ( is_active_sidebar( 'primary-sidebar' ) ) : echo ‘<div class=“primary-widget-content“>’; dynamic_sidebar( 'primary-sidebar' ); ?> echo ‘</div>’;endif;

Page 19: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

MORE ADVANCED USES OF DATA

• Page/post hierarchy

• Taxonomies

• Custom fields

• Altering queries

Page 20: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

INTERACTING WITH QUERIES

function ja_query_taxo_country_region( $query ) { if ( !is_admin() && $query->is_main_query() && is_tax( 'country_region' ) ) {

$query->set( 'posts_per_page', -1 ); $query->set( 'orderby', 'title' ); $query->set( 'order', 'ASC' ); return; }}add_action( 'pre_get_posts', ‘ja_query_taxo_country_region’ );

Page 21: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

INTERACTING WITH QUERIES

function ja_query_taxo_order_events($query) { if ( !is_admin() && $query->is_main_query() && $query->is_tax('genre') ) { //Get original meta query $meta_query = $query->get('meta_query'); ! $query->set( 'meta_key', 'event_date_start' ); $query->set( 'orderby', 'meta_value' ); $query->set( 'order', 'ASC' ); ! //Add our meta query to the original meta queries $meta_query[] = array( ‘key' => 'event_date_start', 'value' => date('Y-m-d' ), 'compare' => '>=' ); ! $query->set('meta_query',$meta_query); } } add_action('pre_get_posts','ja_query_taxo_order_events', 1 );

Page 22: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: FILTERING

Page 23: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: CUSTOM FIELDS

Page 24: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: TAXONOMIES

Page 25: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: TAXONOMIES

Page 26: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: FILTERING

Page 27: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DATA USE EXAMPLE: FILTERING

Page 28: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER INPUT OF DATA

• WordPress metaboxes:http://codex.wordpress.org/Function_Reference/add_meta_box

• ACF and Pods plugins… if you really have to: https://wordpress.org/plugins/advanced-custom-fieldshttp://wordpress.org/plugins/pods

• Learn to make your own… it’s worth it!

Page 29: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DON’T TRUST USER DATA!

• Validate user input - don’t let them break it!

• Always escape output to stop nasties!

• Escape late, so you know the data is safe on output.

• Use $wpdb class if you are interacting with database.

• Reference:http://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data

Page 30: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER DATA: STRICT WHITELIST

$accept_values = array( ‘fine’, ‘good’, ‘dandy’ );

if ( in_array( $user_data, $accept_values ) ){ //Data input acceptable } else { // Data input not acceptable }

Page 31: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER DATA: IS EMAIL?

if ( is_email( ‘[email protected]’ ) ){ //Data input acceptable } else { // Data input not acceptable }

Page 32: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER DATA: LIMITED HTML INPUT

wp_kses_post( $user_data );

Page 33: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER DATA: JUST BASIC TEXT

sanitize_text_field( $user_data );

Page 34: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER DATA OUTPUT: ESCAPING

• esc_html()

• esc_textarea()

• sanitize_html_class()

• esc_attr()

• esc_js()

• esc_url()

• esc_url_raw()

• _ _, _e and _x for esc_html() and esc_attr

Page 35: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER INPUT: EXAMPLE

Page 36: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER INPUT: EXAMPLE

Page 37: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER INPUT: EXAMPLE

Page 38: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

USER INPUT: EXAMPLE

Page 39: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

FOOD FOR THOUGHT…

• Extra CSS classes/colourways/layout configuration.

• Extra/manipulate template parts.

• Build associations between different types of content.

• Exclude/manipulate in queries.

• WP-API.

• WordPress metabox API.

Page 40: WordCamp Bournemouth 2014 - Designing with data in WordPress

http://wonderflux.com@jonnyauk http://tancdesign.com

DESIGNING WITH DATA

Jonny AllbutDirector & Head of Digital

http://wonderflux.com@jonnyauk http://tancdesign.com

WordCamp Bournemouth 2014