Jetpack for Theme Developers (wcmtl)

Transcript

1. @ryelle #wcmtl JETPACK FOR DEVELOPERS
2. @ryelle #wcmtl WANT TO FOLLOW ALONG? http://redradar.net/wcmtl-2015
3. http://redradar.net/wcmtl-2015
4. @ryelle #wcmtl http://redradar.net/wcmtl-2015
6. @ryelle #wcmtl DEVELOPMENT ENVIRONMENT
7. </> JETPACK_DEV_DEBUG jetpack_development_mode wp-config.php or functions.php
8. @ryelle #wcmtl PROGRESSIVE ENHANCEMENT
9. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> add_theme_support( 'title-tag' ); $background = array( 'default-color' => '71af3a', ); add_theme_support( 'custom-background', $background ); add_theme_support
10. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $args = array( 'function' => 'prefix_my_function', ); add_theme_support( 'custom-feature', $args ); function prefix_my_function( $maybe_args ) { // Do some code here. // echo or return as needed. } callbacks
12. @ryelle #wcmtl INFINITE SCROLL
13. Museum
15. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'infinite-scroll', array( 'type' => 'click', 'container' => 'main', 'posts_per_page' => 12, 'footer' => 'page', 'render' => 'prefix_is_render', ) ); } function prefix_is_render() { // Only needed if your loop is different than while( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; } jetpack.php
16. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'infinite-scroll', array( 'type' => 'click', 'container' => 'main', 'posts_per_page' => 12, 'footer' => 'page', 'render' => 'prefix_is_render', ) ); } function prefix_is_render() { // Only needed if your loop is different than while( have_posts() ) : the_post(); get_template_part( 'content', get_post_format() ); endwhile; } jetpack.php
17. http://jetpack.me/support/infinite-scroll/
18. @ryelle #wcmtl FEATURED CONTENT
19. Twenty Fourteen
20. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'featured-content', array( 'filter' => 'prefix_get_featured_content', 'max_posts' => 6, 'post_types' => array( 'post' ), ) ); } function prefix_get_featured_posts(){ return apply_filters( 'prefix_get_featured_content', array() ); } jetpack.php
21. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'featured-content', array( 'filter' => 'prefix_get_featured_content', 'max_posts' => 6, 'post_types' => array( 'post' ), ) ); } function prefix_get_featured_posts(){ return apply_filters( 'prefix_get_featured_content', array() ); } jetpack.php
22. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $featured_posts = prefix_get_featured_posts(); foreach ( $featured_posts as $post ): setup_postdata( $post ); // Include the featured content template. get_template_part( 'content', 'featured' ); endforeach; wp_reset_postdata(); featured-content.php
23. http://jetpack.me/support/featured-content/
24. @ryelle #wcmtl PORTFOLIOS
27. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'jetpack-portfolio' ); } jetpack.php
29. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> <?php /** * Template Name: Portfolio Page Template * * @package illustratr */ …template code… portfolio-page.php Illustratr
30. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $posts_per_page = get_option( 'jetpack_portfolio_posts_per_page', '10' ); $args = array( 'post_type' => 'jetpack-portfolio', 'posts_per_page' => $posts_per_page, ); $project_query = new WP_Query( $args ); if ( post_type_exists( 'jetpack-portfolio' ) && $project_query->have_posts() ) : portfolio-page.php Illustratr
31. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $posts_per_page = get_option( 'jetpack_portfolio_posts_per_page', '10' ); $args = array( 'post_type' => 'jetpack-portfolio', 'posts_per_page' => $posts_per_page, ); $project_query = new WP_Query( $args ); if ( post_type_exists( 'jetpack-portfolio' ) && $project_query->have_posts() ) : portfolio-page.php Illustratr
32. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $posts_per_page = get_option( 'jetpack_portfolio_posts_per_page', '10' ); $args = array( 'post_type' => 'jetpack-portfolio', 'posts_per_page' => $posts_per_page, ); $project_query = new WP_Query( $args ); if ( post_type_exists( 'jetpack-portfolio' ) && $project_query->have_posts() ) : portfolio-page.php Illustratr
33. Illustratr
34. http://jetpack.me/support/custom-content-types/ https://en.support.wordpress.com/portfolios/ portfolio-shortcode/
35. @ryelle #wcmtl TESTIMONIALS
37. Sela
38. @ryelle #wcmtl RESTAURANT MENUS
39. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'nova_menu_item' ); } jetpack.php
41. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $loop = new WP_Query( [ 'post_type' => 'nova_menu_item' ] ); while ( $loop->have_posts() ) : $loop->the_post(); get_template_part( 'content', 'menu' ); endwhile; // end of the Menu Item Loop wp_reset_postdata(); page-menu.php Confit
42. Confit
43. Confit
44. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> Nova_Restaurant::init( array( 'menu_tag' => 'section', 'menu_class' => 'menu-items', 'menu_header_tag' => 'header', 'menu_header_class' => 'menu-group-header', 'menu_title_tag' => 'h1', 'menu_title_class' => 'menu-group-title', 'menu_description_tag' => 'div', 'menu_description_class' => 'menu-group-description', ) ); page-menu.php Confit
45. /modules/custom-post-types/nova.php
46. @ryelle #wcmtl HIDDEN TREASURES
47. @ryelle #wcmtl SITE LOGO
48. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'site-logo', array( 'size' => 'full', )); } jetpack.php
49. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( function_exists('jetpack_the_site_logo') ) { jetpack_the_site_logo(); } header.php
50. Cucina
51. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_site_logo( $html, $logo, $size ) { // do something with $html return $html; } add_filter( 'jetpack_the_site_logo', 'prefix_site_logo', 10, 3 ); jetpack.php
52. http://jetpack.me/support/site-logo/
53. @ryelle #wcmtl BREADCRUMBS
54. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> <?php if ( function_exists('jetpack_breadcrumbs') ) : ?> <div class="navigation"> <?php jetpack_breadcrumbs(); ?> </div><!-- .navigation --> <?php endif; ?> page.php
56. @ryelle #wcmtl CSS PROCESSING
57. Umbra
58. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { require Jetpack::get_module_path( 'custom-css' ); } $color = get_query_var( 'prefix_color' ); $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); if ( ! $valid_color ) { die(); } $base_sass = file_get_contents('colors.scss'); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); header( 'Content-type: text/css; charset: UTF-8' ); echo $css; die(); dynamic-colors.php Umbra
59. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { require Jetpack::get_module_path( 'custom-css' ); } $color = get_query_var( 'prefix_color' ); $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); if ( ! $valid_color ) { die(); } $base_sass = file_get_contents('colors.scss'); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); header( 'Content-type: text/css; charset: UTF-8' ); echo $css; die(); dynamic-colors.php Umbra
60. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { require Jetpack::get_module_path( 'custom-css' ); } $color = get_query_var( 'prefix_color' ); $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); if ( ! $valid_color ) { die(); } $base_sass = file_get_contents('colors.scss'); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); header( 'Content-type: text/css; charset: UTF-8' ); echo $css; die(); dynamic-colors.php Umbra
61. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $base-hue: hue($base-color); $body-background: hsl( $base-hue, 0, 97% ); $text-color: hsl( $base-hue, 4%, 26% ); body { background: $body-background; } body, button, input, select, textarea { color: $text-color; } colors.scss Umbra
62. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { require Jetpack::get_module_path( 'custom-css' ); } $color = get_query_var( 'prefix_color' ); $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); if ( ! $valid_color ) { die(); } $base_sass = file_get_contents('colors.scss'); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); header( 'Content-type: text/css; charset: UTF-8' ); echo $css; die(); dynamic-colors.php Umbra
63. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> if ( ! class_exists( 'Jetpack_Custom_CSS' ) ) { require Jetpack::get_module_path( 'custom-css' ); } $color = get_query_var( 'prefix_color' ); $valid_color = preg_match( '/^[0-9a-f]{6}$/i', $color ); if ( ! $valid_color ) { die(); } $base_sass = file_get_contents('colors.scss'); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); header( 'Content-type: text/css; charset: UTF-8' ); echo $css; die(); dynamic-colors.php Umbra
64. @ryelle #wcmtl TONESQUE
65. Umbra
66. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> function prefix_jetpack_setup(){ add_theme_support( 'tonesque' ); } functions.php
67. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $image_src = prefix_get_post_image( $post_id ); if ( ! $image_src ) { return false; } $image = new Tonesque( $image_src ); $color = $image->color(); dynamic-colors.php
68. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $image_src = prefix_get_post_image( $post_id ); if ( ! $image_src ) { return false; } $image = new Tonesque( $image_src ); $color = $image->color(); dynamic-colors.php
69. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $image_src = prefix_get_post_image( $post_id ); if ( ! $image_src ) { return false; } $image = new Tonesque( $image_src ); $color = $image->color(); dynamic-colors.php
70. Color Posts Plugin
71. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 </> $image = new Tonesque( $image_src ); $background_color = $image->color(); $contrast = $image->contrast(); dynamic-colors.php
73. @ryelle #wcmtl KEEP IN MIND…
74. Contact forms Infinite Scroll button Sharing links Lovecraft
75. @ryelle #wcmtl QUESTIONS?
76. @ryelle #wcmtl THANKS! http://redradar.net/wcmtl-2015