WordCamp Bournemouth 2014 - Designing with data in WordPress

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

HOWDY!
• Working with WordPress since 2004.
• Involved in WPUK group & co-organiser 
of Birmingham WordPress user group.
• Likes to share:
• Wonderflux - free GPL theme framework 
http://wonderflux.com
• WP-CMS Post Control - control post editing capabilities 
http://wordpress.org/plugins/wp-cms-post-control

GET SMART(ER) WITH THEMES
• Content detection can be brittle.
• More creative flexibility.
• A bespoke editing experience.
• Accommodating future development.

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?

STRUCTURE: DATA ATTRIBUTES
• Page/post hierarchy
• Post types/formats
• Tags/categories
• Custom taxonomies
• Custom fields
• Images/attachments

STRUCTURE: DESIGN ATTRIBUTES
• General static(ish) design/structure
• Editable WordPress Menus
• Editable Widget areas
• Archive views

THEME FILE ORGANISATION
• The theme file hierarchy/cascade: 
http://codex.wordpress.org/Template_Hierarchy
• Post types
• Archive/taxonomy/term
• get_template_part()

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

TAXONOMY ARCHIVE EXAMPLE
• Taxonomy: colour
• Terms: red, green, blue
• File cascade:
1. taxonomy-colour-red.php
2. taxonomy-colour.php
3. taxonomy.php

BASICS: CONTENT DETECTION
• CSS
• Body class
• Post class
• PHP
• Post ID/query vars
• is_page() is_archive() etc!
• Has post image
• Has widgets

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; 
}

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; 
}

CONTENT DETECTION: PHP
function 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>'; 
} 
}

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

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" />'; 
}

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

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;

MORE ADVANCED USES OF DATA
• Page/post hierarchy
• Taxonomies
• Custom fields
• Altering queries

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’ );

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 );

DATA USE EXAMPLE: FILTERING

DATA USE EXAMPLE: CUSTOM FIELDS

DATA USE EXAMPLE: TAXONOMIES

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-fields 
http://wordpress.org/plugins/pods
• Learn to make your own… it’s worth it!

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

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 
}

USER DATA: IS EMAIL?
if ( is_email( ‘jonny@example.com’ ) ){ 
//Data input acceptable 
} else { 
// Data input not acceptable 
}

USER DATA: LIMITED HTML INPUT
wp_kses_post( $user_data );

USER DATA: JUST BASIC TEXT
sanitize_text_field( $user_data );

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

USER INPUT: EXAMPLE

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.

WordCamp Bournemouth 2014 - Designing with data in WordPress

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordCamp Bournemouth 2014 - Designing with data in WordPress

Similar to WordCamp Bournemouth 2014 - Designing with data in WordPress (20)

More from Jonny Allbut

More from Jonny Allbut (10)

Recently uploaded

Recently uploaded (20)

WordCamp Bournemouth 2014 - Designing with data in WordPress