Better WordPress RSS Widget Sass/CSS Styles

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

↓ Jump to code explanation

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 with display: none;
• 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 use display: 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 with font-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.