Slide 1
Slide 1 text
Jetpack’s Little Secrets
Save some time in your projects!
Slide 2
Slide 2 text
Jetpack’s Little Secrets — #WPBudapest — 2016
• jetpack.me
• More than a million active sites
• 36 modules
• and a few secrets…
2
Slide 3
Slide 3 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Jeremy Herve
• Jetpack Mechanic at Automattic
• jeremy.hu
• @jeherve
3
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Spring cleaning
6
Slide 7
Slide 7 text
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 );
Slide 8
Slide 8 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Site Logo
8
Slide 9
Slide 9 text
9
Secrets de Jetpack — #wcparis — 2015
function jeherve_add_site_logo() {
add_theme_support( 'site-logo', array(
'size' => 'full',
) );
}
Slide 10
Slide 10 text
10
Secrets de Jetpack — #wcparis — 2015
if ( function_exists( 'jetpack_the_site_logo' ) ) {
jetpack_the_site_logo();
}
Slide 11
Slide 11 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Responsive Videos
11
Slide 12
Slide 12 text
12
Secrets de Jetpack — #wcparis — 2015
function jeherve_add_responsive_videos() {
add_theme_support( ‘jetpack-responsive-videos’ );
}
Slide 13
Slide 13 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Breadcrumbs
13
Slide 14
Slide 14 text
14
Secrets de Jetpack — #wcparis — 2015
if ( function_exists( 'jetpack_breadcrumbs' ) ) : ?>
Slide 15
Slide 15 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Markdown
15
Slide 16
Slide 16 text
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,
)
);
}
Slide 17
Slide 17 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Photon
17
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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' );
Slide 20
Slide 20 text
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
);
}
Slide 21
Slide 21 text
Jetpack’s Little Secrets — #WPBudapest — 2016
SSO
21
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Jetpack’s Little Secrets — #WPBudapest — 2016
Tonesque
23
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
25
Secrets de Jetpack — #wcparis — 2015
function jeherve_add_tonesque() {
add_theme_support( ‘tonesque’ );
}
Slide 26
Slide 26 text
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(),
);
}
Slide 27
Slide 27 text
27
Secrets de Jetpack — #wcparis — 2015
Slide 28
Slide 28 text
Jetpack’s Little Secrets — #WPBudapest — 2016
CSS
Preprocessor
28
Slide 29
Slide 29 text
29
Secrets de Jetpack — #wcparis — 2015
Slide 30
Slide 30 text
Jetpack’s Little Secrets — #WPBudapest — 2016
CSS Preprocessors
• Sass and Less preprocessor, and minifying
• https://wordpress.org/themes/umbra/
30
Slide 31
Slide 31 text
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
*/
Slide 32
Slide 32 text
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' );
}
Slide 33
Slide 33 text
33
Secrets de Jetpack — #wcparis — 2015
Slide 34
Slide 34 text
Questions?
jeremy.hu/wpbudapest-jetpack-secrets
@jeherve
jetpack.me/support