Automating my local dev environment with Laravel Valet and WP-CLI

laravel-valet

When I set up my new machine, I decided to get rid of MAMP and Vagrant, my previous local development tools of choice. While they worked well for me, I needed something a bit different. I need to be able to spin up a fresh installation of WordPress, run a few tests, and burn it all down a few minutes later.

A few months ago, I discovered Laravel Valet. Valet is a tool relying on Caddy and Dnsmasq, allowing you to spin up PHP projects in a few seconds. You can learn more about it here. It seemed like the perfect tool for me, so I decided to combine it with WP-CLI to quickly launch WordPress sites on my laptop.

Let’s dive into the different steps I follow to get this to work.

Jetpack: Add Related Posts to your RSS feed

dupondt-related

I got an interesting question in the Jetpack support forums today. Levy wanted to display Related Posts in their RSS feed.

Jetpack displays Related Posts at the bottom of single posts by default, but like with other modules, you can customize Related Posts. In this post, we’ll use the the_content filter and the raw Jetpack Related Posts class to build our own unordered list of Related Posts, and add it to the bottom of the post content in RSS feeds.

Quick note before we start:

  • You’ll want to add that code to a functionality plugin like this one.
  • Nothing will happen if you’re not using Jetpack and its Related Posts module.
/**
 * Add Jetpack Related Posts to RSS feed.
 *
 * @see https://wordpress.org/support/topic/2927523
 */
function jeherve_related_posts_feed( $content ) {
	// Return early if we're not in the RSS feed.
	if ( ! is_feed() ) {
		return $content;
	}

	// If Jetpack and Related Posts are active, let's get started.
	if ( class_exists( 'Jetpack_RelatedPosts' ) && method_exists( 'Jetpack_RelatedPosts', 'init_raw' ) ) {
		$related = Jetpack_RelatedPosts::init_raw()
			->set_query_name( 'jetpackme-shortcode' ) // Optional, name can be anything
			->get_for_post_id(
				get_the_ID(),
				array( 'size' => 3 )
			);

		if ( $related ) {
			$related_list = '';

			foreach ( $related as $result ) {
				// Get the related post IDs
				$related_post_id = get_post( $result[ 'id' ] );

				/**
				 * From there you can do just about anything, using the post IDs.
				 *
				 * In this example, we'll build an unordered list.
				 */
				$related_list .= sprintf(
					'<li><a title="%1$s" href="%2$s">%3$s</a></li>',
					esc_attr( get_the_title( $related_post_id ) ),
					get_permalink( $related_post_id ),
					get_the_title( $related_post_id )
				);
			}

			/**
			 * Let's wrap all those related posts in ul tags, and add that list to the end of our post content.
			 *
			 * We will also add a headline, but only if it was set to be displayed in your Jetpack Related Posts settings.
			 */
			$related_options = Jetpack_Options::get_option( 'relatedposts' );
			if ( $related_options['show_headline'] ) {
				$headline = sprintf(
					'<h3 class="jp-relatedposts-headline"><em>%s</em></h3>',
					esc_html__( 'Related', 'jetpack' )
				);
			} else {
				$headline = '';
			}

			return sprintf(
				'%1$s%2$s<ul class="jp-relatedposts">%3$s</ul>',
				$content,
				apply_filters( 'jetpack_relatedposts_filter_headline', $headline ),
				$related_list
			);
		}

		return $content;
	}

	// Last fallback, just in case Jetpack and Related Posts aren't there anymore.
	return $content;
}
add_filter( 'the_content', 'jeherve_related_posts_feed' );

Color Posts update for AMP

AMP Screenshots

If you follow the news, you most likely heard about the Accelerated Mobile Pages Project in the past few weeks. This open source initiative, lead by Google and a few big publishing and technology companies, allows you to serve super fast pages to mobile readers, when they come from a Google Search result or from an app using AMP:

How AMP looks like when launching a Google search

Automattic joined the project and released the AMP plugin, so you can enable AMP on your own site with a few clicks.

It’s not super pretty, though. By default, AMP pages sport a standard blue title bar. That’s where Color Posts comes in! 😊  I just updated the plugin, and it will now change the look of the title bar to match the post’s main color.

All you have to do is install the AMP plugin, and update Color Posts!

Les secrets de Jetpack — WordCamp Paris

Les secrets de Jetpack

Pour ma première participation à WordCamp Paris, j’ai décidé de parler d’un sujet qui me tient à coeur : Jetpack !

Voici donc ma présentation : en attendant que la vidéo soit mise en ligne, vous pouvez parcourir mes notes ci-dessous, jeter un coup d’oeil à mon diaporama, tout en écoutant mes commentaires dans la vidéo au bas de cet article.

Découvrez les secrets de Jetpack pour gagner du temps dans vos projets

Jetpack: add UTM tracking to sharing buttons

Tracks in the sand

After figuring out a nice little challenge in the Jetpack support forums last week, I wanted to share the results with you.

First of all, I need to thank Aquif Shaikh for his question in the original thread. This thread required a bit more digging than usual, and I love a good challenge.

The question was actually quite simple: how to add UTM tracking to the Jetpack sharing buttons. If you’re not familiar with UTM tracking, you’ll want to check this generator. UTM tracking allows you to track specific URLs in Google Analytics.

Let’s get started.

Continue reading

Color Posts: an update for your Android readers

color-posts-background

About a year ago I released a small plugin named Color Posts. It’s a fairly simple plugin, and it can be extended with filters. I use it on this site, and I’ve made extensive use of the filters to add some color to the sidebar as well as in other areas of the site.

Among all these customizations, there is one that I really like: if you use Chrome in Android, the browser’s background color matches the color picked by my plugin:

2015-11-23 11.14.33

Color Posts changes Chrome’s background color to match the post’s color.

I thought this little detail could be useful for everyone, so added it to the plugin itself! If you use Color Posts, go update now! 😊

Jetpack: redirect your subscribers to a Thank You page

jetpack-subscriptions

Jetpack includes a Subscriptions module that makes it easy for your readers to subscribe to your site, and then receive email or Reader notifications for each one of the posts you publish on your site.

Your readers can use a Subscription widget to subscribe to your site. You can see how it looks on this very site (oh, and subscribe if you haven’t already 😊 ).

By default, when submitting your email address into the form, the page reloads and success message appears instead of the email form. However, starting with Jetpack 3.8, you can now redirect your subscribers to a specific page on your site instead. It could be a “Thank You” page, it could be a little explanation of what they need to do to confirm their subscription, … That’s up to you.

To create that redirection, you can use the new jetpack_subscriptions_form_submission action, like so:

/**
 * Redirect all successful subscription submissions to a 'thank-you' page
 */
function jeherve_custom_sub_redirect_page( $result ) {
	if ( 'success' === $result ) {
		$thanks_page = 'thank-you';
		wp_safe_redirect( $thanks_page );
		exit;
	}
}
add_action( 'jetpack_subscriptions_form_submission', 'jeherve_custom_sub_redirect_page' );

Place that code in a functionality plugin, and you’re all set!