ActivityPub Viewer

A small tool to view real-world ActivityPub objects as JSON! Enter a URL or username from Mastodon or a similar service below, and we'll send a request with the right Accept header to the server to view the underlying object.

Open in browser →
{ "@context": [ "https://www.w3.org/ns/activitystreams", { "Hashtag": "as:Hashtag", "sensitive": "as:sensitive" } ], "id": "https://shkspr.mobi/blog/2023/06/style-your-wordpress-atom-feed/", "type": "Note", "attachment": [], "attributedTo": "https://shkspr.mobi/blog/@blog", "content": "<h2>Style your WordPress Atom feed</h2><p><a href=\"https://shkspr.mobi/blog/2023/06/style-your-wordpress-atom-feed/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><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><html><head></head><body></p><p>I recently read Darek Kay's excellent post about <a href=\"https://darekkay.com/blog/rss-styling/\">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/\"><img src=\"https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png\" alt=\"A nicely formatted RSS feed.\" width=\"773\" height=\"530\" class=\"aligncenter size-full wp-image-46146\"></a></p><h2 id=\"prerequisites\"><a href=\"#prerequisites\" class=\"heading-link\">Prerequisites</a></h2><p>This involves editing your WordPress blog's theme. If you don't know what you're doing, you can mess up your blog<sup id=\"fnref:mess\"><a href=\"#fn:mess\" class=\"footnote-ref\" title=\"TBF, you can mess up even if you do know what you are doing.\" role=\"doc-noteref\">0</a></sup>. Make sure you take some backups before experimenting on your live site.</p><h2 id=\"download-an-xslt\"><a href=\"#download-an-xslt\" class=\"heading-link\">Download an XSLT</a></h2><p>You can <a href=\"https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl\">download my Style Sheet</a> which I stole from <a href=\"https://darekkay.com/assets/xsl/rss-style.xsl\">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><h2 id=\"create-a-new-atom-feed-template\"><a href=\"#create-a-new-atom-feed-template\" class=\"heading-link\">Create a new Atom Feed Template</a></h2><p>WordPress has a <a href=\"https://codex.wordpress.org/Customizing_Feeds#How_WordPress_Produces_Feeds\">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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #795E26;\">header</span>( <span style=\"color: #a31515;\">'Content-Type: '</span> . <span style=\"color: #795E26;\">feed_content_type</span>( <span style=\"color: #a31515;\">'atom'</span> ) . <span style=\"color: #a31515;\">'; charset='</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ), <span style=\"color: #0000ff;\">true</span> );</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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #795E26;\">header</span>( <span style=\"color: #a31515;\">'Content-Type: '</span> . <span style=\"color: #795E26;\">feed_content_type</span>( <span style=\"color: #a31515;\">'rss-http'</span> ) . <span style=\"color: #a31515;\">'; charset='</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ), <span style=\"color: #0000ff;\">true</span> );</code></pre><p>After that, add the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #001080;\">$theme</span> = <span style=\"color: #001080;\">$args</span>[<span style=\"color: #a31515;\">\"theme\"</span>];</code></pre><p>That will allow us to get the theme directory.</p><p>Finally, find the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">echo</span> <span style=\"color: #a31515;\">'&lt;?xml version=\"1.0\" encoding=\"'</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ) . <span style=\"color: #a31515;\">'\"?'</span> . <span style=\"color: #a31515;\">'&gt;'</span>;</code></pre><p>Immediately after that, add the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">echo</span> <span style=\"color: #a31515;\">'&lt;?xml-stylesheet href=\"'</span> . <span style=\"color: #001080;\">$theme</span> . <span style=\"color: #a31515;\">'/rss-style.xsl\" type=\"text/xsl\"?&gt;'</span>;</code></pre><p>That allows the browser to see the stylesheet you saved earlier.</p><h2 id=\"functions\"><a href=\"#functions\" class=\"heading-link\">Functions</a></h2><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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">function</span> <span style=\"color: #795E26;\">my_custom_atom</span>() { <span style=\"color: #795E26;\">get_template_part</span>( <span style=\"color: #a31515;\">'custom-feed'</span>, <span style=\"color: #a31515;\">'atom'</span>, <span style=\"color: #795E26;\">array</span>( <span style=\"color: #a31515;\">\"theme\"</span> =&gt; <span style=\"color: #795E26;\">get_stylesheet_directory_uri</span>() ) );}<span style=\"color: #795E26;\">remove_all_actions</span>( <span style=\"color: #a31515;\">'do_feed_atom'</span> );<span style=\"color: #795E26;\">add_action</span>( <span style=\"color: #a31515;\">'do_feed_atom'</span>, <span style=\"color: #a31515;\">'my_custom_atom'</span>, 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><h2 id=\"done\"><a href=\"#done\" class=\"heading-link\">Done!</a></h2><p>You can see what it looks like at <a href=\"https://shkspr.mobi/blog/feed/atom/\"></a><a href=\"https://shkspr.mobi/blog/feed/atom/\">https://shkspr.mobi/blog/feed/atom/</a></p><p><a href=\"https://shkspr.mobi/blog/feed/atom/\"><img src=\"https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png\" alt=\"A nicely formatted RSS feed.\" width=\"773\" height=\"530\" class=\"aligncenter size-full wp-image-46146\"></a></p><p>Nice!</p><div class=\"footnotes\" role=\"doc-endnotes\"><hr><ol start=\"0\"><li id=\"fn:mess\" role=\"doc-endnote\"><p>TBF, you can mess up even if you <em>do</em> know what you are doing.&nbsp;<a href=\"#fnref:mess\" class=\"footnote-backref\" role=\"doc-backlink\">↩︎</a></p></li></ol></div><p></body></html></p><p><a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/atom/\">#atom</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/howto/\">#HowTo</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/rss/\">#rss</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/wordpress/\">#WordPress</a></p>", "context": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/context", "contentMap": { "en": "<h2>Style your WordPress Atom feed</h2><p>https://shkspr.mobi/blog/2023/06/style-your-wordpress-atom-feed/</p><p><html><head></head><body></p><p>I recently read Darek Kay's excellent post about <a href=\"https://darekkay.com/blog/rss-styling/\">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/\"><img src=\"https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png\" alt=\"A nicely formatted RSS feed.\" width=\"773\" height=\"530\" class=\"aligncenter size-full wp-image-46146\"></a></p><h2 id=\"prerequisites\"><a href=\"#prerequisites\" class=\"heading-link\">Prerequisites</a></h2><p>This involves editing your WordPress blog's theme. If you don't know what you're doing, you can mess up your blog<sup id=\"fnref:mess\"><a href=\"#fn:mess\" class=\"footnote-ref\" title=\"TBF, you can mess up even if you do know what you are doing.\" role=\"doc-noteref\">0</a></sup>. Make sure you take some backups before experimenting on your live site.</p><h2 id=\"download-an-xslt\"><a href=\"#download-an-xslt\" class=\"heading-link\">Download an XSLT</a></h2><p>You can <a href=\"https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl\">download my Style Sheet</a> which I stole from <a href=\"https://darekkay.com/assets/xsl/rss-style.xsl\">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><h2 id=\"create-a-new-atom-feed-template\"><a href=\"#create-a-new-atom-feed-template\" class=\"heading-link\">Create a new Atom Feed Template</a></h2><p>WordPress has a <a href=\"https://codex.wordpress.org/Customizing_Feeds#How_WordPress_Produces_Feeds\">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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #795E26;\">header</span>( <span style=\"color: #a31515;\">'Content-Type: '</span> . <span style=\"color: #795E26;\">feed_content_type</span>( <span style=\"color: #a31515;\">'atom'</span> ) . <span style=\"color: #a31515;\">'; charset='</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ), <span style=\"color: #0000ff;\">true</span> );</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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #795E26;\">header</span>( <span style=\"color: #a31515;\">'Content-Type: '</span> . <span style=\"color: #795E26;\">feed_content_type</span>( <span style=\"color: #a31515;\">'rss-http'</span> ) . <span style=\"color: #a31515;\">'; charset='</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ), <span style=\"color: #0000ff;\">true</span> );</code></pre><p>After that, add the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #001080;\">$theme</span> = <span style=\"color: #001080;\">$args</span>[<span style=\"color: #a31515;\">\"theme\"</span>];</code></pre><p>That will allow us to get the theme directory.</p><p>Finally, find the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">echo</span> <span style=\"color: #a31515;\">'&lt;?xml version=\"1.0\" encoding=\"'</span> . <span style=\"color: #795E26;\">get_option</span>( <span style=\"color: #a31515;\">'blog_charset'</span> ) . <span style=\"color: #a31515;\">'\"?'</span> . <span style=\"color: #a31515;\">'&gt;'</span>;</code></pre><p>Immediately after that, add the line:</p><pre class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">echo</span> <span style=\"color: #a31515;\">'&lt;?xml-stylesheet href=\"'</span> . <span style=\"color: #001080;\">$theme</span> . <span style=\"color: #a31515;\">'/rss-style.xsl\" type=\"text/xsl\"?&gt;'</span>;</code></pre><p>That allows the browser to see the stylesheet you saved earlier.</p><h2 id=\"functions\"><a href=\"#functions\" class=\"heading-link\">Functions</a></h2><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 class=\"tempest-highlight\" itemscope=\"\" itemtype=\"https://schema.org/SoftwareSourceCode\"><span class=\"tempest-highlight-language\"><img src=\"https://shkspr.mobi/blog/wp-content/plugins/tempest-highlight//svg/php.svg\" width=\"32\" height=\"32\" alt=\"\" class=\"tempest-highlight-language-icon\"><span itemprop=\"programmingLanguage\"> PHP</span></span><code class=\"php\" itemprop=\"text\"><span style=\"color: #0000ff;\">function</span> <span style=\"color: #795E26;\">my_custom_atom</span>() { <span style=\"color: #795E26;\">get_template_part</span>( <span style=\"color: #a31515;\">'custom-feed'</span>, <span style=\"color: #a31515;\">'atom'</span>, <span style=\"color: #795E26;\">array</span>( <span style=\"color: #a31515;\">\"theme\"</span> =&gt; <span style=\"color: #795E26;\">get_stylesheet_directory_uri</span>() ) );}<span style=\"color: #795E26;\">remove_all_actions</span>( <span style=\"color: #a31515;\">'do_feed_atom'</span> );<span style=\"color: #795E26;\">add_action</span>( <span style=\"color: #a31515;\">'do_feed_atom'</span>, <span style=\"color: #a31515;\">'my_custom_atom'</span>, 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><h2 id=\"done\"><a href=\"#done\" class=\"heading-link\">Done!</a></h2><p>You can see what it looks like at <a href=\"https://shkspr.mobi/blog/feed/atom/\"></a><a href=\"https://shkspr.mobi/blog/feed/atom/\">https://shkspr.mobi/blog/feed/atom/</a></p><p><a href=\"https://shkspr.mobi/blog/feed/atom/\"><img src=\"https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png\" alt=\"A nicely formatted RSS feed.\" width=\"773\" height=\"530\" class=\"aligncenter size-full wp-image-46146\"></a></p><p>Nice!</p><div class=\"footnotes\" role=\"doc-endnotes\"><hr><ol start=\"0\"><li id=\"fn:mess\" role=\"doc-endnote\"><p>TBF, you can mess up even if you <em>do</em> know what you are doing.&nbsp;<a href=\"#fnref:mess\" class=\"footnote-backref\" role=\"doc-backlink\">↩︎</a></p></li></ol></div><p></body></html></p><p><a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/atom/\">#atom</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/howto/\">#HowTo</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/rss/\">#rss</a> <a rel=\"tag\" class=\"hashtag u-tag u-category\" href=\"https://shkspr.mobi/blog/tag/wordpress/\">#WordPress</a></p>" }, "icon": { "type": "Image", "url": "https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png", "mediaType": "image/png", "name": "A nicely formatted RSS feed." }, "image": { "type": "Image", "url": "https://shkspr.mobi/blog/wp-content/uploads/2023/06/RSS-XSLT-fs8.png", "mediaType": "image/png", "name": "A nicely formatted RSS feed." }, "published": "2023-06-24T11:34:33Z", "tag": [ { "type": "Hashtag", "href": "https://shkspr.mobi/blog/tag/atom/", "name": "#atom" }, { "type": "Hashtag", "href": "https://shkspr.mobi/blog/tag/howto/", "name": "#HowTo" }, { "type": "Hashtag", "href": "https://shkspr.mobi/blog/tag/rss/", "name": "#rss" }, { "type": "Hashtag", "href": "https://shkspr.mobi/blog/tag/wordpress/", "name": "#WordPress" } ], "updated": "2025-06-24T12:32:31Z", "url": "https://shkspr.mobi/blog/2023/06/style-your-wordpress-atom-feed/", "to": [ "https://www.w3.org/ns/activitystreams#Public" ], "cc": [ "https://shkspr.mobi/blog/wp-json/activitypub/1.0/actors/0/followers" ], "mediaType": "text/html", "replies": { "id": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/replies", "type": "Collection", "first": { "id": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/replies?page=1", "type": "CollectionPage", "partOf": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/replies", "items": [] } }, "likes": { "id": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/likes", "type": "Collection", "totalItems": 0 }, "shares": { "id": "https://shkspr.mobi/blog/wp-json/activitypub/1.0/posts/46145/shares", "type": "Collection", "totalItems": 0 } }