wordcamp bournemouth 2014 - designing with data in wordpress
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
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
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
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.
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?
http://wonderflux.com@jonnyauk http://tancdesign.com
STRUCTURE: DATA ATTRIBUTES
• Page/post hierarchy
• Post types/formats
• Tags/categories
• Custom taxonomies
• Custom fields
• Images/attachments
http://wonderflux.com@jonnyauk http://tancdesign.com
STRUCTURE: DESIGN ATTRIBUTES
• General static(ish) design/structure
• Editable WordPress Menus
• Editable Widget areas
• Archive views
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()
http://wonderflux.com@jonnyauk http://tancdesign.com
CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy
http://wonderflux.com@jonnyauk http://tancdesign.com
CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy
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
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
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;}
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;}
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>'; }}
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
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" />';}
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}
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;
http://wonderflux.com@jonnyauk http://tancdesign.com
MORE ADVANCED USES OF DATA
• Page/post hierarchy
• Taxonomies
• Custom fields
• Altering queries
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’ );
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 );
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: FILTERING
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: CUSTOM FIELDS
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: TAXONOMIES
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: TAXONOMIES
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: FILTERING
http://wonderflux.com@jonnyauk http://tancdesign.com
DATA USE EXAMPLE: FILTERING
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!
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
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 }
http://wonderflux.com@jonnyauk http://tancdesign.com
USER DATA: IS EMAIL?
if ( is_email( ‘[email protected]’ ) ){ //Data input acceptable } else { // Data input not acceptable }
http://wonderflux.com@jonnyauk http://tancdesign.com
USER DATA: LIMITED HTML INPUT
wp_kses_post( $user_data );
http://wonderflux.com@jonnyauk http://tancdesign.com
USER DATA: JUST BASIC TEXT
sanitize_text_field( $user_data );
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
http://wonderflux.com@jonnyauk http://tancdesign.com
USER INPUT: EXAMPLE
http://wonderflux.com@jonnyauk http://tancdesign.com
USER INPUT: EXAMPLE
http://wonderflux.com@jonnyauk http://tancdesign.com
USER INPUT: EXAMPLE
http://wonderflux.com@jonnyauk http://tancdesign.com
USER INPUT: EXAMPLE
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.
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