From Web Address to Web Page – the Humble URL in WordPress

From Web Address to Web Page – the Humble URL in WordPress

Once upon a time we passed parameters to create web pages, now we use pretty URLs and (hopefully) think through our URLs carefully. URLs are one of the fundamental commands a user can give WordPress, and they can be poetic, powerful and precise all at once.

This talk will cover how URLs are turned into WP_Query parameters, what URL endpoints are and when to use them, how URLs can be attractive and amusing, and how to use URLs across different post type structures.

Here's the code I use throughout the presentation, as a plugin to download and slice and dice: https://github.com/simonwheatley/wcldn-web-addresses

947ed080d54e9917ba4dac47fd9c50b2?s=128

Simon Wheatley

March 21, 2015
Tweet

Transcript

  1. What’s in a WordPress Web Address Simon Wheatley (@simonwheatley) https://www.flickr.com/photos/carolynwillitts/3156518827/in/set-72157611966344355

  2. We have a problem https://www.flickr.com/photos/adactio/5730227336

  3. Who are you?

  4. I work at WordPress.com VIP

  5. Cool URIs are important http://www.flickr.com/photos/knightfoundation/2858604501/sizes/o/

  6. Pretty URLs since 2003

  7. ouragency.com/2015/03/hello-world/

  8. ouragency.com/worked-for/dyson/

  9. ouragency.com/worked-for/dyson/json/

  10. ouragency.com/compare/dyson+hoover+vax/

  11. ouragency.com/2015/03/hello-world/

  12. Get the post Posted in March 2015
 With a slug

    of “hello-world”
  13. SELECT wp_posts.* FROM wp_posts WHERE 1=1 AND ( ( YEAR(

    wp_posts.post_date ) = 2015 AND MONTH( wp_posts.post_date ) = 3 ) ) AND wp_posts.post_name = 'hello-world' AND wp_posts.post_type = 'post' ORDER BY wp_posts.post_date DESC
  14. ouragency.com/?year=2015&monthnum=03&name=hello-world

  15. ouragency.com/2015/03/hello-world/

  16. None
  17. ouragency.com/2015/03/hello-world/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  18. ouragency.com/2015/03/hello-world/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  19. ouragency.com/2015/03/hello-world/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  20. ouragency.com/2015/03/hello-world/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  21. ouragency.com/2015/03/hello-world/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  22. ouragency.com/2015/03/hello-world/2/ ([0-9]{4})/([0-9]{1,2})/([^/]+)(/[0-9]+)?/?$
 
 index.php?
 year=$matches[1]&
 monthnum=$matches[2]&
 name=$matches[3]&
 page=$matches[4]

  23. ouragency.com/2015/03/hello-world/

  24. Custom Post Types and Taxonomies https://www.flickr.com/photos/beate_meier/8337014543

  25. ouragency.com/work-for/dyson/

  26. $rewrite = array( 'slug' => ‘worked-for‘, ); $args = array(

    'labels' => $labels, 'has_archive' => 'our-work', 'public' => true, 'menu_icon' => 'dashicons-blahs', 'rewrite' => $rewrite, ); register_post_type( 'sw_team', $args );
  27. ouragency.com/work-for/dyson/

  28. ouragency.com/work-for/dyson/

  29. None
  30. ouragency.com/work-for/([^/]+)(/[0-9]+)?/?$ 
 index.php?sw_client=$1&page=$2

  31. ouragency.com/work-for/([^/]+)(/[0-9]+)?/?$ 
 index.php?sw_client=$1&page=$2

  32. ouragency.com/work-for/([^/]+)(/[0-9]+)?/?$ 
 index.php?sw_client=$1&page=$2

  33. ouragency.com/work-for/([^/]+)(/[0-9]+)?/?$ 
 index.php?sw_client=$1&page=$2

  34. ouragency.com/work-for/([^/]+)(/[0-9]+)?/?$ 
 index.php?sw_client=$1&page=$2

  35. Get all the posts
 Where the post type is “sw_client”


    And the name of the posts are “dyson”

  36. SELECT wp_posts.* FROM wp_posts WHERE 1=1 AND wp_posts.post_name = '$1'

    AND wp_posts.post_type = 'sw_client' ORDER BY wp_posts.post_date DESC
  37. Endpoints https://www.flickr.com/photos/nhankamer/5525695925

  38. ouragency.com/work-for/dyson/feed/rdf/

  39. ouragency.com/work-for/dyson/feed/rss/

  40. ouragency.com/work-for/dyson/json/

  41. add_rewrite_endpoint( 'json', EP_PERMALINK, 'sw_json' );

  42. add_rewrite_endpoint( 'json', EP_PERMALINK, 'sw_json' );

  43. add_rewrite_endpoint( 'json', EP_PERMALINK, 'sw_json' );

  44. add_rewrite_endpoint( 'json', EP_PERMALINK, 'sw_json' );

  45. ouragency.com/work-for/dyson/format/json/

  46. ouragency.com/are/dyson/format/json/

  47. ouragency.com/work-for/dyson/format/json/

  48. // Called on request filter function sw_fix_endpoint_reqs( $vars ) {

    if ( isset( $vars['sw_json'] ) ) { $vars['sw_json'] = true; } return $vars; }
  49. if ( get_query_var( ‘sw_json’ ) ) { 
 // Done

    some stuff, switch content, etc }
  50. Custom Rewrite Rules https://www.flickr.com/photos/xiaming/314772076

  51. ouragency.com/compare/dyson+hoover+vax/

  52. add_rewrite_rule(
 'compare/([^/]+)/?$', 'index.php?sw_compare=$matches[1]' );

  53. add_rewrite_rule(
 'compare/([^/]+)/?$', 'index.php?sw_compare=$matches[1]' );

  54. add_rewrite_rule(
 'compare/([^/]+)/?$', 'index.php?sw_compare=$matches[1]' );

  55. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  56. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  57. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  58. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  59. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  60. // Called on request filter
 $names_to_compare = explode( '+', $vars['sw_compare']

    ); foreach ( $names_to_compare as $name ) { $args = array( 'post_type' => 'sw_client', 'name' => $name, 'fields' => 'ids', ); $query = new WP_Query( $args ); $post_ids = array_merge( $query->posts, $post_ids ); } $vars['post__in'] = $post_ids; $vars['post_type'] = 'sw_client';
  61. if ( get_query_var( ‘sw_compare’ ) ) { 
 // Switch

    template, show our 3 posts }
  62. So, to wrap up... http://www.flickr.com/photos/ejchang/3139547559/in/photostream/

  63. ouragency.com/2015/03/hello-world/

  64. ouragency.com/worked-for/dyson/

  65. ouragency.com/worked-for/dyson/json/

  66. ouragency.com/compare/dyson+hoover+vax/

  67. © Christian Senger - https://www.flickr.com/photos/30928442@N08/6343274075 A regular expressions explorer

  68. None
  69. Rewrite Rules Inspector https://www.flickr.com/photos/tlang/2703769775

  70. None
  71. None
  72. https://www.flickr.com/photos/liverpoolhls/10740309163 Query Monitor

  73. None
  74. None
  75. http://j.mp/sw-wcldn-15/

  76. Work at WordPress.com VIP
 http://j.mp/sw-vip-job

  77. Questions http://www.flickr.com/photos/38299630@N05/3635356091/sizes/o/

  78. Work at WordPress.com VIP
 http://j.mp/sw-vip-job (http://automattic.com/work-with-us/vip-wrangler/)