Jetpack's Little Secrets

080b72863363c81d51727237b29439eb?s=47 Jeremy Herve
February 24, 2016

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/

080b72863363c81d51727237b29439eb?s=128

Jeremy Herve

February 24, 2016
Tweet

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