WordCamp Bournemouth 2014 - Designing with data in WordPress

1,738
-1

Published on

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.

Published in: Design, Technology

WordCamp Bournemouth 2014 - Designing with data in WordPress

  1. 1. 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
  2. 2. http://wonderflux.com@jonnyauk http://tancdesign.com 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
  3. 3. 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.
  4. 4. 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?
  5. 5. http://wonderflux.com@jonnyauk http://tancdesign.com STRUCTURE: DATA ATTRIBUTES • Page/post hierarchy • Post types/formats • Tags/categories • Custom taxonomies • Custom fields • Images/attachments
  6. 6. http://wonderflux.com@jonnyauk http://tancdesign.com STRUCTURE: DESIGN ATTRIBUTES • General static(ish) design/structure • Editable WordPress Menus • Editable Widget areas • Archive views
  7. 7. 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()
  8. 8. http://wonderflux.com@jonnyauk http://tancdesign.com CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy
  9. 9. http://wonderflux.com@jonnyauk http://tancdesign.com CREDIT: Michelle Schulp: http://marktimemedia.com/redesigning-the-template-hierarchy
  10. 10. 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
  11. 11. 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
  12. 12. 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;
 }
  13. 13. 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;
 }
  14. 14. http://wonderflux.com@jonnyauk http://tancdesign.com 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>';
 }
 }
  15. 15. 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
  16. 16. 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" />';
 }
  17. 17. 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
 }
  18. 18. 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;
  19. 19. http://wonderflux.com@jonnyauk http://tancdesign.com MORE ADVANCED USES OF DATA • Page/post hierarchy • Taxonomies • Custom fields • Altering queries
  20. 20. 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’ );
  21. 21. 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 );
  22. 22. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: FILTERING
  23. 23. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: CUSTOM FIELDS
  24. 24. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: TAXONOMIES
  25. 25. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: TAXONOMIES
  26. 26. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: FILTERING
  27. 27. http://wonderflux.com@jonnyauk http://tancdesign.com DATA USE EXAMPLE: FILTERING
  28. 28. 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-fields
 http://wordpress.org/plugins/pods • Learn to make your own… it’s worth it!
  29. 29. 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
  30. 30. 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
 }
  31. 31. http://wonderflux.com@jonnyauk http://tancdesign.com USER DATA: IS EMAIL? if ( is_email( ‘jonny@example.com’ ) ){
 //Data input acceptable
 } else {
 // Data input not acceptable
 }
  32. 32. http://wonderflux.com@jonnyauk http://tancdesign.com USER DATA: LIMITED HTML INPUT wp_kses_post( $user_data );
  33. 33. http://wonderflux.com@jonnyauk http://tancdesign.com USER DATA: JUST BASIC TEXT sanitize_text_field( $user_data );
  34. 34. 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
  35. 35. http://wonderflux.com@jonnyauk http://tancdesign.com USER INPUT: EXAMPLE
  36. 36. http://wonderflux.com@jonnyauk http://tancdesign.com USER INPUT: EXAMPLE
  37. 37. http://wonderflux.com@jonnyauk http://tancdesign.com USER INPUT: EXAMPLE
  38. 38. http://wonderflux.com@jonnyauk http://tancdesign.com USER INPUT: EXAMPLE
  39. 39. 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.
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×