Styling an RSS Feed With XSLT

- 3 minutes read

Similarly to how we use CSS to style our HTML, we can use XSLT to style our XML.

If you’re looking to use XSLT to style your RSS feed(s), then you’ve come to the right place!

Bots, aggregators, and search engines view your feeds the same whether or not they are styled. However, styling your feeds can make them more human-readable.

And because RSS feeds are really just XML documents, all you need to do is include a link to an XSLT file at the top of your RSS feed, just as you would in any other XML document.

Consider the first few lines of an imaginary RSS file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!-- A link to our XSLT stylesheet will go here! -->
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    ...

Immediately after that initial tag, include a link to your stylesheet:

<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>

It should be on the second line, unless your XML is minified.

And in this example, the link references a stylesheet placed in /rss.xsl. You can name the file anything you want, so long as the .xsl extension is preserved.

Here’s what that rss.xsl file could look like:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title><xsl:value-of select="/rss/channel/title"/> RSS Feed</title>
                <meta charset="UTF-8" />
                <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
                <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no" />
                <style type="text/css">
                    /* Your custom styles can go here! */
                </style>
            </head>
            <body>
                <header>
                    <h1>RSS Feed</h1>
                    <h2>
                        <xsl:value-of select="/rss/channel/title"/>
                    </h2>
                    <p>
                        <xsl:value-of select="/rss/channel/description"/>
                    </p>
                    <a hreflang="en" target="_blank">
                        <xsl:attribute name="href">
                            <xsl:value-of select="/rss/channel/link"/>
                        </xsl:attribute>
                        Visit Website &#x2192;
                    </a>
                </header>
                <main>
                    <h2>Recent Posts</h2>
                    <xsl:for-each select="/rss/channel/item">
                        <article>
                            <h3>
                                <a hreflang="en" target="_blank">
                                    <xsl:attribute name="href">
                                        <xsl:value-of select="link"/>
                                    </xsl:attribute>
                                    <xsl:value-of select="title"/>
                                </a>
                            </h3>
                            <footer>
                                Published:
                                <time>
                                    <xsl:value-of select="pubDate" />
                                </time>
                            </footer>
                        </article>
                    </xsl:for-each>
                </main>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

There’s a few things that you’ll notice here if you have some familiarity with HTML and CSS.

This primarily resembles a standard semantic HTML document, with a few extra bells and whistles.

First of all, you can place your CSS in the <style> tag like normal.

There are also some special elements, such as <xsl:attribute> and <xsl:for-each>.

While this tutorial is just a quickstart to get you up and running with a template to start styling your RSS feeds, W3Schools maintains a great XSLT reference if you want to learn about all these special elements.

Link to this section A warning about closing tags

One important difference between XSLT and standard HTML is that tags that don’t otherwise require a closing tag must have a closing tag.

For example, this is perfectly valid HTML code:

<!-- Valid HTML, Invalid XSLT -->
<meta charset="UTF-8">

However, this will throw an error in XSLT.

Instead, you’ll need to include a closing slash like this:

<!-- Valid HTML, Valid XSLT -->
<meta charset="UTF-8" />

Link to this section Conclusion

Creatively styling your RSS feeds one of many great ways to make your site stand out, and you have the full power of CSS is at your disposal.

Anyway, I just wanted to share a quick boilerplate that you can start customizing right away. In fact, I made my own XSLT file for RSS feeds on top of this boilerplate. It’s used on this website!

Thanks for reading!