WordCamp Bournemouth 2014 - Designing with data in WordPress
Upcoming SlideShare
Loading in...5
×
 

WordCamp Bournemouth 2014 - Designing with data in WordPress

on

  • 1,165 views

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 ...

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.

Statistics

Views

Total Views
1,165
Views on SlideShare
997
Embed Views
168

Actions

Likes
11
Downloads
23
Comments
0

3 Embeds 168

https://twitter.com 164
http://lanyrd.com 3
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordCamp Bournemouth 2014 - Designing with data in WordPress WordCamp Bournemouth 2014 - Designing with data in WordPress Presentation Transcript

  • 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 <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: 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>';
 }
 }
  • 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-fields
 http://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( ‘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.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 Allbut
 Director & Head of Digital http://wonderflux.com@jonnyauk http://tancdesign.com WordCamp Bournemouth 2014