This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Feed Styler

Description

What is Feed Styler?

Feed Styler is a WordPress plugin for WordPress users who are comfortable with CSS and would like to be able to style their feeds. Feed Styler enables you to keep your existing class and ID style declarations in your content, but allows a different style to be applied to the feed of that same content. No longer do feeds have to be stripped of style and color.

Who is Feed Styler For?

Feed Styler is for those that use WordPress, are comfortable with CSS, and would like to be able to use their existing markup to style their feeds. Feed Styler is very effective at styling images, blockquotes, and much more. If you are a hand coder and familiar with CSS, Feed Styler will be very intuitive.

This plugin is not for CSS beginners, and not for those that rely on WordPress’s WYSIWYG for content appearance. This plugin is also not for those who have the opinion that feeds should be void of style.

Features

Feed Styler has the following features:

  • Images show up styled in feed readers that strip inline styles.
  • Accepts nested CSS declarations. For example: `#ul li ul li .classname { css code } `
  • Accepts multiple classnames per tag. For example: <p class=”alert right”>
  • Cascades your styles.
  • Works on all feed readers that do not strip inline styles.
  • Allows you to keep inline styles out of your post content.
  • Allows you to keep your site appearance and feed appearance separate.
  • Allows you to test your styles on your post content for immediate feedback.

Plugin Tips

The plugin will accept most CSS. There are several things it can’t do, however.

  • The plugin cannot correct invalid CSS code.
  • The plugin will not work if the content HTML is invalid (such as a hanging open or closed tag).
  • The plugin cannot accept multiple CSS declarations per line. For example, the plugin cannot accept: ` p, h1, h3, #id, .classname { style code} `. Each declaration must be entered in separately.
  • CSS code must be on one line. I do have error checking to strip multi-line CSS to one line though.
  • Invalid CSS code will be stripped out. Make sure you have a backup somewhere.
  • Certain style attributes may cause your feed to invalidate. Here’s a list of acceptable attributes.

How the Plugin Works

Feed Styler uses HTML Parser to parse the content HTML. The parsed HTML is then styled.

For those curious what the plugin does in the back-end of things, here are three files that will give you a good idea of what the plugin does to your content. Please note that Feed Styler does not permanently modify your content.

  • Sample HTML Code : This is sample HTML code with classes and IDs specified.
  • Sample Styles : This is sample Feed Styler CSS code that will style the sample HTML code.
  • Resulting Code : This shows what the Sample Code will look like after being run through Feed Styler.

The Sample Code is the type of code you might find in a regular blog post: headings, paragraphs, blockquotes, lists, etc… The plugin determines if the content being served to the user is a feed. If the content is a feed, the content is run through the Feed Styler filter. All IDs, Classes, and Tags that have styles specified in Feed Styler will have the appropriate inline style added. Any feed reader that doesn’t strip out inline styles (shame on you FeedDemon) will now show a styled feed.

Some Tips When Styling Your Feed

Not all feed readers support inline styles. For example, FeedDemon doesn’t support inline styles. So don’t fully rely on Feed Styler for the appearance of your feed.

Here are some more tips:

  • Remember to keep feeds readable. Most feeds have a light background and dark text.
  • Avoid pixels if possible. Use percentages or ems.
  • Be wary of floats, especially towards the end of your content.
  • Remember that people subscribed to your feed to read your content.

Screenshots

  • First screenshot for a styled feed.
  • Second example of a styled feed.
  • The admin panel interface.

Installation

Installation is simple. Just follow these steps:

  • Copy the “Feed Styler” folder into your /wp_content/plugins/ directory.
  • Activate the plugin in the Plugins administration panel.

Contributors & Developers

“Feed Styler” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Feed Styler” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.