Terence Eden’s Blog<p><strong>Style your WordPress Atom feed</strong></p><p><a href="https://shkspr.mobi/blog/2023/06/style-your-wordpress-atom-feed/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2023/06/style</span><span class="invisible">-your-wordpress-atom-feed/</span></a></p><p></p><p>I recently read Darek Kay's excellent post about <a href="https://darekkay.com/blog/rss-styling/" rel="nofollow noopener noreferrer" target="_blank">styling RSS feeds</a> and wanted to do something similar.</p><p>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:</p><p><a href="https://shkspr.mobi/blog/feed/atom/" rel="nofollow noopener noreferrer" target="_blank"></a></p><p><strong>Prerequisites</strong></p><p>This involves editing your WordPress blog's theme. If you don't know what you're doing, you can mess up your blog0. Make sure you take some backups before experimenting on your live site.</p><p><strong>Download an XSLT</strong></p><p>You can <a href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" rel="nofollow noopener noreferrer" target="_blank">download my Style Sheet</a> which I stole from <a href="https://darekkay.com/assets/xsl/rss-style.xsl" rel="nofollow noopener noreferrer" target="_blank">Darek's website</a> and then enhanced. Save it as <code>rss-style.xsl</code> in your theme's root directory.</p><p>Edit it in a regular text editor to have the name of your blog.</p><p><strong>Create a new Atom Feed Template</strong></p><p>WordPress has a <a href="https://codex.wordpress.org/Customizing_Feeds#How_WordPress_Produces_Feeds" rel="nofollow noopener noreferrer" target="_blank">bunch of built in feed templates</a>.</p><p>Copy the file <code>/wp-includes/feed-atom.php</code> and paste it into your theme's root directory. Rename it <code>custom-feed-atom.php</code></p><p>There are three lines which need editing.</p><p>Near the top you should see</p><pre><code>header( 'Content-Type: ' . feed_content_type( 'atom' ) . '; charset=' . get_option( 'blog_charset' ), true );</code></pre><p>The <code>feed_content_type</code> needs to be set to <code>rss-http</code> - otherwise most modern browsers will try to download the Atom feed rather than display it. The new line should be:</p><pre><code>header( 'Content-Type: ' . feed_content_type( 'rss-http' ) . '; charset=' . get_option( 'blog_charset' ), true );</code></pre><p>After that, add the line:</p><pre><code>$theme = $args["theme"];</code></pre><p>That will allow us to get the theme directory.</p><p>Finally, find the line:</p><pre><code>echo '<?xml version="1.0" encoding="' . get_option( 'blog_charset' ) . '"?' . '>';</code></pre><p>Immediately after that, add the line:</p><pre><code>echo '<?xml-stylesheet href="' . $theme . '/rss-style.xsl" type="text/xsl"?>';</code></pre><p>That allows the browser to see the stylesheet you saved earlier.</p><p><strong>Functions</strong></p><p>Finally, it is time to edit your theme's <code>functions.php</code> file. This will remove the old Atom feed and add your new one.</p><p>I don't know how your <code>functions.php</code> file is set up. But, generally speaking, you can safely add these lines to the very end of it:</p><pre><code>function 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 );</code></pre><p>That removes your old Atom feed, and calls the new template that you saved earlier, and passes it the URl for your CSS.</p><p><strong>Done!</strong></p><p>You can see what it looks like at <a href="https://shkspr.mobi/blog/feed/atom/" rel="nofollow noopener noreferrer" target="_blank"></a><a href="https://shkspr.mobi/blog/feed/atom/" rel="nofollow noopener noreferrer" target="_blank">https://shkspr.mobi/blog/feed/atom/</a></p><p><a href="https://shkspr.mobi/blog/feed/atom/" rel="nofollow noopener noreferrer" target="_blank"></a></p><p>Nice!</p> <ol start="0"><li><p>TBF, you can mess up even if you <em>do</em> know what you are doing. ↩︎</p></li></ol> <p></p><p><a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/atom/" target="_blank">#atom</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/howto/" target="_blank">#HowTo</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/rss/" target="_blank">#rss</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/wordpress/" target="_blank">#WordPress</a></p>