Jetpack for Theme Developers

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.

A441be8d44b16f7c5047d3d019d3ac39?s=128

Kelly Dwan

April 25, 2015
Tweet

Transcript

  1. 2.
  2. 4.

    <

  3. 7.
  4. 9.
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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 }
  10. 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 }
  11. 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
  12. 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
  13. 25.
  14. 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
  15. 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
  16. 31.
  17. 34.
  18. 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
  19. 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
  20. 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
  21. 38.
  22. 39.
  23. 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
  24. 46.
  25. 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
  26. 50.

    01 <?php if( function_exists('jetpack_breadcrumbs') ) : ?> 02 <div class="navigation">

    03 <?php jetpack_breadcrumbs(); ?> 04 </div><!-- .navigation --> 05 <?php endif; ?> page.php
  27. 51.
  28. 53.
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 61.
  36. 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
  37. 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
  38. 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
  39. 67.

    01 $image = new Tonesque( $image_src ); 02 $background_color =

    $image->color(); 03 04 $contrast = $image->contrast(); dynamic-colors.php
  40. 68.
  41. 70.