Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Bournemouth 2014 - Designing with data in WordPress

2,803 views

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
  • Unlock Her Legs is your passage way to a life full of loving and sex... read more >> ▲▲▲ https://tinyurl.com/y52uv4vq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×