Today, we’ll focus on writing better styles for the WordPress RSS widget. In this tutorial, I’ll show you some base styles that you can add to your custom theme, child theme or custom CSS plugin that will display any RSS feed in your WordPress sidebar, beautifully.
I’ve seen some theme developers ignore the styling of their RSS widgets, and I’m not sure why. When used appropriately, it can be a powerful tool to syndicate relevant content on your website.
I’m not a huge fan of the RSS icon that WordPress shows next to the feed header. And then there’s the 3 options to display date, content & author. What if you choose to display only 1 or 2 of those? What happens to the layout? And have styles been applied to account for all three?
I’ve addressed all of these concerns with a base set of styles for the WordPress RSS feed widget, in both Sass and CSS.

Features of My RSS Widget Styles
- 100% Responsive
- Available in Sass (as well as CSS)
- Accounts for any combination of date, author & content being displayed
- Uses relative units (rem) instead of pixels
- Removes the RSS feed icon next to the widget title
RSS Feed Styles – Sass
NOTE: I’m using a variable for one of my colors. Be sure to define $text-color
in your own code, or replace with hex values.
.widget_rss {
.widget-title {
img {
display: none;
}
}
li {
margin-bottom: 0.625rem;
a {
display: block;
}
.rss-date {
display: inline-block;
margin-right: 0.5rem;
}
.rss-date, cite {
color: rgba( $text-color, 0.7 );
font-size: 0.875rem;
}
.rssSummary {
font-size: 0.875rem;
display: inline;
}
} // li
} // .widget_rss
RSS Feed Styles – CSS
Feel free to replace the hex color values with anything you’d like.
.widget_rss .widget-title img {
display: none;
}
.widget_rss li {
margin-bottom: 0.625rem;
}
.widget_rss li a {
display: block;
}
.widget_rss li .rss-date {
display: inline-block;
margin-right: 0.5rem;
}
.widget_rss li .rss-date, .widget_rss li cite {
color: rgba(153, 153, 153, 0.7);
font-size: 0.875rem;
}
.widget_rss li .rssSummary {
font-size: 0.875rem;
display: inline;
}
WordPress RSS Widget Styles Explained
Here’s a rundown of what’s happening with the code:
.widget_rss
is applied to the parent element that contains the RSS feed.widget-title
is the header tag that contains your feed’s title- This is what contains the RSS icon
<img>
element inside of it. We remove it withdisplay: none;
- This is what contains the RSS icon
- I like to make the entire area around the article title clickable. This enhances usability. We do that with
display: block;
on the<a>
element. .rss-date
is just that; the date. We lighten up its color a bit, and give it a right margin, in case the article’s summary is displayed next to it.- .
rssSummary
comes next in the markup. This is a summary of the article’s contents. We usedisplay: inline;
to move it up next to the date, saving vertical real estate. - The
<cite>
element is used to display the author. All we do is lighten up the color and shrink the font size a tad. Your browser will probably automatically italicize it, but you can easily override that withfont-style: normal;
if you’d like.
And that’s it. Try it out by checking & unchecking the 3 options in your admin panel for date, author & content. It’ll work beautifully under all circumstances.
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment