Jetpack for Theme Developers

Jetpack has a lot of features for users, but did you know that it can make your life as a developer easier, too? With infinite scroll, featured content, and various custom post types, Jetpack can save you time in creating commonly requested features. Use a CSS preprocessor for easy-to-use customization options. In this talk, I’ll explore all the secret developer features in Jetpack that can give you a head start on your next site.

Transcript

1. Kelly Dwan @ryelle #wcmpls for Developers
3. Kelly Dwan @ryelle #wcmpls
4. <
5. @ryelle #wcmpls Progressive Enhancement
6. JETPACK_DEV_DEBUG apply_filters( 'jetpack_development_mode', '__return_true' ); OR
8. @ryelle #wcmpls Infinite Scroll
9. Museum
10. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'infinite-scroll', array( 03 'type' => 'click', 04 'container' => 'main', 05 'footer' => 'page', 06 'posts_per_page' => 12, 07 'render' => 'prefix_is_render', 08 ) ); 09 } 10 11 function prefix_is_render() { 12 while( have_posts() ) : the_post(); 13 // content rendering code jetpack.php
11. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'infinite-scroll', array( 03 'type' => 'click', 04 'container' => 'main', 05 'footer' => 'page', 06 'posts_per_page' => 12, 07 'render' => 'prefix_is_render', 08 ) ); 09 } 10 11 function prefix_is_render() { 12 while( have_posts() ) : the_post(); 13 // content rendering code jetpack.php
12. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'infinite-scroll', array( 03 'type' => 'click', 04 'container' => 'main', 05 'footer' => 'page', 06 'posts_per_page' => 12, 07 'render' => 'prefix_is_render', 08 ) ); 09 } 10 11 function prefix_is_render() { 12 while( have_posts() ) : the_post(); 13 // content rendering code jetpack.php
13. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'infinite-scroll', array( 03 'type' => 'click', 04 'container' => 'main', 05 'footer' => 'page', 06 'posts_per_page' => 12, 07 'render' => 'prefix_is_render', 08 ) ); 09 } 10 11 function prefix_is_render() { 12 while( have_posts() ) : the_post(); 13 // content rendering code jetpack.php
14. • http://jetpack.me/support/infinite-scroll/
15. @ryelle #wcmpls Featured Content
16. Twenty Fourteen
17. jetpack.php 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'featured-content', array( 03 'filter' => 'prefix_get_featured_content', 04 'max_posts' => 6, 05 'post_types' => array( 'post' ), 06 ) ); 07 } 08 09 function prefix_get_featured_posts(){ 10 return apply_filters( 11 'prefix_get_featured_content', array() 12 ); 13 }
18. jetpack.php 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'featured-content', array( 03 'filter' => 'prefix_get_featured_content', 04 'max_posts' => 6, 05 'post_types' => array( 'post' ), 06 ) ); 07 } 08 09 function prefix_get_featured_posts(){ 10 return apply_filters( 11 'prefix_get_featured_content', array() 12 ); 13 }
19. 01 $featured_posts = prefix_get_featured_posts(); 02 foreach ( (array) $featured_posts as $post ): 03 setup_postdata( $post ); 04 05 // Include the featured content template. 06 get_template_part( 'content', 'featured' ); 07 08 endforeach; 09 wp_reset_postdata(); featured-content.php
20. 01 $featured_posts = prefix_get_featured_posts(); 02 foreach ( (array) $featured_posts as $post ): 03 setup_postdata( $post ); 04 05 // Include the featured content template. 06 get_template_part( 'content', 'featured' ); 07 08 endforeach; 09 wp_reset_postdata(); featured-content.php
21. • http://jetpack.me/support/featured-content/
22. @ryelle #wcmpls Custom Post Types
23. Portfolios
24. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'jetpack-portfolio' ); 03 } jetpack.php
26. 01 $posts_per_page = get_option( 'jetpack_portfolio_posts_per_page', '10' ); 02 $args = array( 03 'post_type' => 'jetpack-portfolio', 04 'posts_per_page' => $posts_per_page, 05 ); 06 $project_query = new WP_Query( $args ); 07 if ( post_type_exists( 'jetpack-portfolio' ) && $project_query -> have_posts() ) : // Portfolio markup, loop to display all projects portfolio-page.php Illustratr
27. 01 $posts_per_page = get_option( 'jetpack_portfolio_posts_per_page', '10' ); 02 $args = array( 03 'post_type' => 'jetpack-portfolio', 04 'posts_per_page' => $posts_per_page, 05 ); 06 $project_query = new WP_Query( $args ); 07 if ( post_type_exists( 'jetpack-portfolio' ) && $project_query->have_posts() ) : // Portfolio markup, loop to display all projects portfolio-page.php Illustratr
28. Illustratr
29. • http://jetpack.me/support/custom-content- types/ • https://en.support.wordpress.com/ portfolios/portfolio-shortcode/
30. Testimonials
31. Sela
32. @ryelle #wcmpls Restaurant Menus
33. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'nova_menu_item' ); 03 } jetpack.php
35. 01 $loop = new WP_Query( array( 'post_type' => 'nova_menu_item' ) ); 02 while ( $loop->have_posts() ) : $loop- >the_post(); 03 get_template_part( 'content', 'menu' ); 04 endwhile; // end of the Menu Item Loop 05 wp_reset_postdata(); page-menu.php Confit
36. 01 $loop = new WP_Query( array( 'post_type' => 'nova_menu_item' ) ); 02 while ( $loop->have_posts() ) : $loop- >the_post(); 03 get_template_part( 'content', 'menu' ); 04 endwhile; // end of the Menu Item Loop 05 wp_reset_postdata(); page-menu.php Confit
37. 01 $loop = new WP_Query( array( 'post_type' => 'nova_menu_item' ) ); 02 while ( $loop->have_posts() ) : $loop- >the_post(); 03 get_template_part( 'content', 'menu' ); 04 endwhile; // end of the Menu Item Loop 05 wp_reset_postdata(); page-menu.php Confit
38. Confit
39. Confit
40. 01 Nova_Restaurant::init( array( 02 'menu_tag' => 'section', 03 'menu_class' => 'menu-items', 04 'menu_header_tag' => 'header', 05 'menu_header_class' => 'menu-group-header', 06 'menu_title_tag' => 'h1', 07 'menu_title_class' => 'menu-group-title', 08 'menu_description_tag' => 'div', 09 'menu_description_class' => 'menu-group- description', 10 ) ); page-menu.php Confit
41. • /modules/custom-post-types/nova.php
42. @ryelle #wcmpls Hidden Treasures
43. @ryelle #wcmpls Site Logo
44. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'site-logo', array( 03 'size' => 'full', 04 )); 05 } jetpack.php
45. 01 if( function_exists('jetpack_the_site_logo') ){ 02 jetpack_the_site_logo(); 03 } header.php
47. 01 function prefix_site_logo( $html, $logo, $size ) { 02 // do something with $html 03 return $html; 04 } 05 add_filter( 'jetpack_the_site_logo', 'prefix_site_logo', 10, 3 ); jetpack.php
48. • http://jetpack.me/support/site-logo/
49. @ryelle #wcmpls Breadcrumbs
50. 01 <?php if( function_exists('jetpack_breadcrumbs') ) : ?> 02 <div class="navigation"> 03 <?php jetpack_breadcrumbs(); ?> 04 </div><!-- .navigation --> 05 <?php endif; ?> page.php
52. @ryelle #wcmpls CSS Processing
53. Umbra
54. 01 if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { 02 require Jetpack::get_module_path( 'custom-css' ); 03 } 04 05 $color = get_query_var( 'prefix_color' ); 06 $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); 07 if ( ! $valid_color ) { 08 die(); 09 } 10 $base_sass = file_get_contents('colors.scss'); 11 $sass = '$base-color: #' . $color . '; ' . $base_sass; 12 $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); 13 14 header( 'Content-type: text/css; charset: UTF-8' ); 15 echo $css; 16 die(); dynamic-colors.php Umbra
55. 01 if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { 02 require Jetpack::get_module_path( 'custom-css' ); 03 } 04 05 $color = get_query_var( 'prefix_color' ); 06 $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); 07 if ( ! $valid_color ) { 08 die(); 09 } 10 $base_sass = file_get_contents('colors.scss'); 11 $sass = '$base-color: #' . $color . '; ' . $base_sass; 12 $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); 13 14 header( 'Content-type: text/css; charset: UTF-8' ); 15 echo $css; 16 die(); dynamic-colors.php Umbra
56. 01 if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { 02 require Jetpack::get_module_path( 'custom-css' ); 03 } 04 05 $color = get_query_var( 'prefix_color' ); 06 $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); 07 if ( ! $valid_color ) { 08 die(); 09 } 10 $base_sass = file_get_contents('colors.scss'); 11 $sass = '$base-color: #' . $color . '; ' . $base_sass; 12 $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); 13 14 header( 'Content-type: text/css; charset: UTF-8' ); 15 echo $css; 16 die(); dynamic-colors.php Umbra
57. 01 $base-hue: hue($base-color); 02 03 $body-background: hsl( $base-hue, 0, 97% ); 04 $text-color: hsl( $base-hue, 4%, 26% ); 05 06 body { 07 background: $body-background; 08 } 09 10 body, button, input, select, textarea { 11 color: $text-color; 12 } colors.scss Umbra
58. 01 if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { 02 require Jetpack::get_module_path( 'custom-css' ); 03 } 04 05 $color = get_query_var( 'prefix_color' ); 06 $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); 07 if ( ! $valid_color ) { 08 die(); 09 } 10 $base_sass = file_get_contents('colors.scss'); 11 $sass = '$base-color: #' . $color . '; ' . $base_sass; 12 $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); 13 14 header( 'Content-type: text/css; charset: UTF-8' ); 15 echo $css; 16 die(); dynamic-colors.php Umbra
59. 01 if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { 02 require Jetpack::get_module_path( 'custom-css' ); 03 } 04 05 $color = get_query_var( 'prefix_color' ); 06 $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); 07 if ( ! $valid_color ) { 08 die(); 09 } 10 $base_sass = file_get_contents('colors.scss'); 11 $sass = '$base-color: #' . $color . '; ' . $base_sass; 12 $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); 13 14 header( 'Content-type: text/css; charset: UTF-8' ); 15 echo $css; 16 die(); dynamic-colors.php Umbra
60. @ryelle #wcmpls Tonesque
61. Umbra
62. 01 function prefix_jetpack_setup(){ 02 add_theme_support( 'tonesque' ); 03 } functions.php
63. 01 $image_src = prefix_get_post_image( $post_id ); 02 if ( ! $image_src ) { 03 return false; 04 } 05 06 $image = new Tonesque( $image_src ); 07 08 $color = $image->color(); dynamic-colors.php
64. 01 $image_src = prefix_get_post_image( $post_id ); 02 if ( ! $image_src ) { 03 return false; 04 } 05 06 $image = new Tonesque( $image_src ); 07 08 $color = $image->color(); dynamic-colors.php
65. 01 $image_src = prefix_get_post_image( $post_id ); 02 if ( ! $image_src ) { 03 return false; 04 } 05 06 $image = new Tonesque( $image_src ); 07 08 $color = $image->color(); dynamic-colors.php
66. Color Posts Plugin
67. 01 $image = new Tonesque( $image_src ); 02 $background_color = $image->color(); 03 04 $contrast = $image->contrast(); dynamic-colors.php
69. @ryelle #wcmpls Keep in Mind…
70. Lovecraft
71. Kelly Dwan @ryelle #wcmpls Questions? redradar.net/wcmpls-2015-jetpack