WordCamp Bournemouth 2014 - Designing with data in WordPress

download WordCamp Bournemouth 2014 - Designing with data in WordPress

of 40

  • date post

    11-Aug-2014
  • Category

    Design

  • view

    950
  • download

    4

Embed Size (px)

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

  • 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
  • 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
  • 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 > http://wonderflux.com@jonnyauk http://tancdesign.com CONTENT DETECTION: CSS
    >
    ! 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: 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 '

    ID ) . '>; echo esc_html( $page->post_title ) . '

    '; } }
  • 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 ''; }
  • 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
    ; dynamic_sidebar( 'primary-sidebar' ); ?> echo
    ; 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-fields http://wordpress.org/plugins/pods Learn to make your own its worth it!
  • http://wonderflux.com@jonnyauk http://tancdesign.com DONT TRUST USER DATA! Validate user input - dont 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( jonny@example.com ) ){ //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