Style your WordPress Atom feed

I recently read Darek Kay's excellent post about styling RSS feeds and wanted to do something similar.

So, here's my simple guide to styling your WordPress blog's RSS / Atom theme. The end result is that if someone clicks on a link to your feed, they see something nicely formatted, like this:

Prerequisites

This involves editing your WordPress blog's theme. If you don't know what you're doing, you can mess up your blog⁰. Make sure you take some backups before experimenting on your live site.

Download an XSLT

You can download my Style Sheet which I stole from Darek's website and then enhanced. Save it as rss-style.xsl in your theme's root directory.

Edit it in a regular text editor to have the name of your blog.

Create a new Atom Feed Template

WordPress has a bunch of built in feed templates.

Copy the file /wp-includes/feed-atom.php and paste it into your theme's root directory. Rename it custom-feed-atom.php

There are three lines which need editing.

Near the top you should see

 PHPheader( 'Content-Type: ' . feed_content_type( 'atom' ) . '; charset=' . get_option( 'blog_charset' ), true );

The feed_content_type needs to be set to rss-http - otherwise most modern browsers will try to download the Atom feed rather than display it. The new line should be:

 PHPheader( 'Content-Type: ' . feed_content_type( 'rss-http' ) . '; charset=' . get_option( 'blog_charset' ), true );

After that, add the line:

 PHP$theme = $args["theme"];

That will allow us to get the theme directory.

Finally, find the line:

 PHPecho '<?xml version="1.0" encoding="' . get_option( 'blog_charset' ) . '"?' . '>';

Immediately after that, add the line:

 PHPecho '<?xml-stylesheet href="' . $theme . '/rss-style.xsl" type="text/xsl"?>';

That allows the browser to see the stylesheet you saved earlier.

Functions

Finally, it is time to edit your theme's functions.php file. This will remove the old Atom feed and add your new one.

I don't know how your functions.php file is set up. But, generally speaking, you can safely add these lines to the very end of it:

 PHPfunction my_custom_atom() {

    get_template_part( 'custom-feed', 'atom', array( "theme" => get_stylesheet_directory_uri() ) );

}

remove_all_actions( 'do_feed_atom' );

add_action( 'do_feed_atom', 'my_custom_atom', 10, 1 );

That removes your old Atom feed, and calls the new template that you saved earlier, and passes it the URl for your CSS.

Done!

You can see what it looks like at https://shkspr.mobi/blog/feed/atom/

Nice!