Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack's Little Secrets

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/

Jeremy Herve

February 24, 2016
Tweet

More Decks by Jeremy Herve

Other Decks in Technology

Transcript

  1. Jetpack’s Little Secrets — #WPBudapest — 2016 • jetpack.me •

    More than a million active sites • 36 modules • and a few secrets… 2
  2. Jetpack’s Little Secrets — #WPBudapest — 2016 Jeremy Herve •

    Jetpack Mechanic at Automattic • jeremy.hu • @jeherve 3
  3. 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
  4. 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
  5. 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 );
  6. 9 Secrets de Jetpack — #wcparis — 2015 function jeherve_add_site_logo()

    { add_theme_support( 'site-logo', array( 'size' => 'full', ) ); }
  7. 10 Secrets de Jetpack — #wcparis — 2015 if (

    function_exists( 'jetpack_the_site_logo' ) ) { jetpack_the_site_logo(); }
  8. 12 Secrets de Jetpack — #wcparis — 2015 function jeherve_add_responsive_videos()

    { add_theme_support( ‘jetpack-responsive-videos’ ); }
  9. 14 Secrets de Jetpack — #wcparis — 2015 if (

    function_exists( 'jetpack_breadcrumbs' ) ) : ?> <div class=“my-breadcrumbs"> <?php jetpack_breadcrumbs(); ?> </div><!-- .my-breadcrumbs --> <?php endif; ?>
  10. 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, ) ); }
  11. 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
  12. 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' );
  13. 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 ); }
  14. 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
  15. 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
  16. 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(), ); }
  17. Jetpack’s Little Secrets — #WPBudapest — 2016 CSS Preprocessors •

    Sass and Less preprocessor, and minifying • https://wordpress.org/themes/umbra/ 30
  18. 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 */
  19. 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' ); }