Use Unison on Webfaction

Unison is a great little tool to synchronize files between your local machine and a remote server. It’s free, open-source, and cross-platform. I use it every day to develop Jetpack. However, until very recently I couldn’t use it to work with files on this very site. I’m hosted with Webfaction, a great hosting provider for developers who want flexibility without having to deal with server administration. A lot of packages are already installed and configured on my server for me. Unison is not available by default, so I had to install it myself. Luckily, Webfaction lets you do that!

Here is how I did it.

Post Views for Jetpack

New week, new plugin! ?

This is once again a Jetpack add-on, and it’s also another good example of the things you can accomplish with the WordPress.com REST API: Post Views for Jetpack pulls data about your site’s stats, as well as stats for each one of your posts.

This is still a work in progress; I would love to know what you’d like in this plugin, and where you would like to display those post views. Open a new thread in the support forums to let me know!

SSH Agent in macOS Sierra

I upgraded to macOS Sierra this weekend. The upgrade was mostly painless; I only had to switch from Karabiner to Karabiner Elements to customize my keyboard.

But when trying to update my remote development environment this morning, I ran into the first issue: ssh-agent didn’t seem to work anymore. My keys were not added to my keychain when accessing my remote sandbox with ssh -A mysandbox.

After a bit of googling, I found my answer. To fix the issue, and make sure I could use my keys even when connected to a remote sandbox, I added the following to my .ssh/config file:

Host *
        IdentityFile ~/.ssh/name_of_my_private_key_file
        AddKeysToAgent yes

Now on to the next problem!

Manage your Custom Post Types on WordPress.com

Custom Post Types on WordPress.com

I’ve talked about the WordPress.com REST API on this blog before. I even created a plugin allowing you to make use of it on your own site. This API powers WordPress.com, the desktop WordPress.com apps, and is used in more and more areas of the Jetpack plugin.

Did you know that API also allows you to manage your Custom Post Types via the WordPress.com interface?

Discover how to manage Custom Post Types via WordPress.com

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

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

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!