Jetpack's Little Secrets

You probably already know the Jetpack plugin. But did you know it included developer features you can use when building sites for your clients?

In this presentation we’ll discover some of Jetpack’s little secrets, and learn how to use them in our projects.

https://jeremy.hu/wpbudapest-jetpack-secrets/

Transcript

1. Jetpack’s Little Secrets Save some time in your projects!
2. Jetpack’s Little Secrets — #WPBudapest — 2016 • jetpack.me • More than a million active sites • 36 modules • and a few secrets… 2
3. Jetpack’s Little Secrets — #WPBudapest — 2016 Jeremy Herve • Jetpack Mechanic at Automattic • jeremy.hu • @jeherve 3
4. Jetpack’s Little Secrets — #WPBudapest — 2016 Why Use Jetpack ? • Your client might be familiar with it • Maintained and updated • Email and Forums support • It’s free! 4
5. Jetpack’s Little Secrets — #WPBudapest — 2016 Before we start… • Nothing should break without Jetpack • Always check if function_exists() • Use add_theme_support() • Development mode : define( ‘JETPACK_DEV_DEBUG’, true ); • GitHub : Automattic/jetpack 5
6. Jetpack’s Little Secrets — #WPBudapest — 2016 Spring cleaning 6
7. 7 Secrets de Jetpack — #wcparis — 2015 function jeherve_only_seven_modules( $modules, $min_version, $max_version ) { $my_modules = array( 'stats', 'photon', 'related-posts', 'markdown', 'sso', 'custom-content-types', 'custom-css', ); return array_intersect_key( $modules, array_flip( $my_modules ) ); } add_filter( 'jetpack_get_available_modules', ‘jeherve_only_seven_modules', 20, 3 );
8. Jetpack’s Little Secrets — #WPBudapest — 2016 Site Logo 8
9. 9 Secrets de Jetpack — #wcparis — 2015 function jeherve_add_site_logo() { add_theme_support( 'site-logo', array( 'size' => 'full', ) ); }
10. 10 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_the_site_logo' ) ) { jetpack_the_site_logo(); }
11. Jetpack’s Little Secrets — #WPBudapest — 2016 Responsive Videos 11
12. 12 Secrets de Jetpack — #wcparis — 2015 function jeherve_add_responsive_videos() { add_theme_support( ‘jetpack-responsive-videos’ ); }
13. Jetpack’s Little Secrets — #WPBudapest — 2016 Breadcrumbs 13
14. 14 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class=“my-breadcrumbs"> <?php jetpack_breadcrumbs(); ?> </div><!-- .my-breadcrumbs --> <?php endif; ?>
15. Jetpack’s Little Secrets — #WPBudapest — 2016 Markdown 15
16. 16 Secrets de Jetpack — #wcparis — 2015 if ( class_exists( 'Jetpack' ) && Jetpack::is_module_active( 'markdown' ) ) { jetpack_require_lib( 'markdown' ); $text_md = WPCom_Markdown::get_instance()->transform( $original_text, array( 'id' => false, 'unslash' => false, ) ); }
17. Jetpack’s Little Secrets — #WPBudapest — 2016 Photon 17
18. Jetpack’s Little Secrets — #WPBudapest — 2016 Photon • Free Image CDN • Works out of the box • An API allows you to customize each image • https://developer.wordpress.com/docs/photon/ 18
19. 19 Secrets de Jetpack — #wcparis — 2015 function jeherve_custom_photon( $args ) { $args['quality'] = 80; $args['strip'] = 'all'; $args['filter'] = 'grayscale'; return $args; } add_filter( 'jetpack_photon_pre_args', 'jeherve_custom_photon' );
20. 20 Secrets de Jetpack — #wcparis — 2015 if ( function_exists( 'jetpack_photon_url' ) ) { $args = array( 'crop' => '45,45,250px,250px', ); echo jetpack_photon_url( esc_url( $image_url ), $args ); }
21. Jetpack’s Little Secrets — #WPBudapest — 2016 SSO 21
22. 22 Secrets de Jetpack — #wcparis — 2015 add_filter( 'jetpack_remove_login_form', '__return_true', 9999 ); add_filter( 'jetpack_sso_bypass_login_forward_wpcom', '__return_true', 9999 ); add_filter( 'jetpack_sso_display_disclaimer', '__return_false', 9999 ); add_filter( 'wp_authenticate_user', function() { return new WP_Error( 'wpcom-required', “Pas de connection ici.” ); }, 9999 ); add_filter( 'allow_password_reset', '__return_false' ); // Force 2 factor authentication add_filter( 'jetpack_sso_require_two_step', '__return_true' ); And more at wpne.ws/jp2fa
23. Jetpack’s Little Secrets — #WPBudapest — 2016 Tonesque 23
24. Jetpack’s Little Secrets — #WPBudapest — 2016 Tonesque • Grabs 5 points in an image, and generates an average color • Also creates a contrast color (black or white) • http://wpne.ws/tonesque 24
25. 25 Secrets de Jetpack — #wcparis — 2015 function jeherve_add_tonesque() { add_theme_support( ‘tonesque’ ); }
26. 26 Secrets de Jetpack — #wcparis — 2015 if ( class_exists( 'Jetpack_PostImages' ) ) { $image = Jetpack_PostImages::get_image( $post_id ); if ( ! empty( $image['src'] ) ) { $image = $image['src']; } else { $image = ‘defaut_image.jpg'; } $tonesque = new Tonesque( $image ); $tonesque = array( 'color' => $tonesque->color(), 'contrast' => $tonesque->contrast(), ); }
27. 27 Secrets de Jetpack — #wcparis — 2015
28. Jetpack’s Little Secrets — #WPBudapest — 2016 CSS Preprocessor 28
29. 29 Secrets de Jetpack — #wcparis — 2015
30. Jetpack’s Little Secrets — #WPBudapest — 2016 CSS Preprocessors • Sass and Less preprocessor, and minifying • https://wordpress.org/themes/umbra/ 30
31. 31 Secrets de Jetpack — #wcparis — 2015 /* Hue of our base color */ $base-hue: hue( $base-color ); /* Let's generate new colors using Sass's hsl */ $body-background: hsl( $base-hue, 0, 97% ); $text-color: hsl( $base-hue, 4%, 26% ); body { background: $body-background; color: $text-color; } /* * Generate a color scheme with Sass wpne.ws/colorsass */
32. 32 Secrets de Jetpack — #wcparis — 2015 if ( class_exists( 'Jetpack_Custom_CSS' ) ) { $base_sass = file_get_contents( 'colors.scss' ); $sass = '$base-color: #' . $color . '; ' . $base_sass; $css = Jetpack_Custom_CSS::minify( $sass, 'sass' ); }
33. 33 Secrets de Jetpack — #wcparis — 2015
34. Questions? jeremy.hu/wpbudapest-jetpack-secrets @jeherve jetpack.me/support