Last week, I added a JSON Feed to the TextExpander Blog. If you’re not familiar with JSON Feed, it’s an alternative to XML-based RSS created by Manton Reece and Brent Simmons. There’s plenty of background info on the JSON Feed site and their respective blogs. And, of course, it has its own cool vector icon:

Setting up the JSON Feed plugin

For sites running WordPress, just follow these steps:

1. Sign in as Admin (i.e. https://yoursite.com/admin)
2. Click on Plugins in the left column
3. Click Add New
4. Enter “JSONFeed” (no quotation marks, no spaces) in the Keyword search box (Search plugins…)
5. Click Install Now
6. Click Activate

Be careful to do Step 6, as it’s important and easy to forget.

That will get you set up with a JSON Feed for your WordPress posts at https://yoursite.com/feed/json. You can check our our TextExpander JSON Feed here.

Add Filters to Customize Your Feed

The default feed template lacks a few things I want in our feed, particularly images for posts and icons for the feed itself. These are easy to add using WordPress filters. We maintain a custom plugin for our site for little tidbits of code like this. You could also place such code in a child theme’s functions.php file.

The two filter functions provided by the JSON Feed Plugin are json_feed_item for feed items and json_feed_feed for feed metadata.

This code includes our OpenGraph image in each feed item. It works with the WP Meta SEO plugin.

function filter_json_feed_item($feedItem, $post) {
	$meta = get_post_meta($post->ID);
	if ($meta["_metaseo_metaopengraph-image"]) {
		$image = $meta["_metaseo_metaopengraph-image"][0];
		if (strlen($image) > 0) {
			$feedItem["image"] = $meta["_metaseo_metaopengraph-image"][0];
		}
	}
	return $feedItem;
}
add_filter('json_feed_item', 'filter_json_feed_item', 10, 2);

This code includes our icons and authorship info in the feed.

function filter_json_feed_feed($feed) {
	$addItems["author"] = array(
		"url" => "https://twitter.com/TextExpander",
		"avatar" => "https://textexpander.com/static/images/feed-icon.png",
		"name" => "TextExpander"
		);
	$addItems["icon"] = "https://textexpander.com/static/images/feed-icon.png";
	$addItems["favicon"] = "https://textexpander.com/static/images/feed-favicon.png";
	return $addItems + $feed;
}
add_filter('json_feed_feed', 'filter_json_feed_feed', 10, 1);

Hopefully, these code tidbits are of some help if you choose to customize your JSON Feed. Feel free to send me some feedback on Twitter or micro.blog.