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

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/
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/
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
69. Rewrite Rules Inspector https://www.flickr.com/photos/tlang/2703769775
72. https://www.flickr.com/photos/liverpoolhls/10740309163 Query Monitor
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/)