Feed Styler
Feed Styler logo courtesy of Brett Terpstra from Circle Six Design.
Download Feed Styler
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.
Screenshots
Here are several screenshots that show what Feed Styler can accomplish in feeds. Screenshots are courtesy of Brett Terpstra from Circle Six Design.
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:
- 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.
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.
Interface
The admin interface for Feed Styler is a giant textarea that allows for the inputting of styles. People comfortable with CSS will feel right at home when entering CSS.
There are a few of things to remember when entering CSS:
- Styles must be enclosed in curly braces.
- Pseudo-classes are not supported. For example:
a:hover { code }will not work. - Make sure all CSS code ends with a semi-colon. For example: img { border: 1px solid #000; float: left; padding: 5px; padding-left: 0; }
- The plugin does not correct invalid CSS code. Make sure you test the CSS just like you would on a normal web site.
Plugin Limitations
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.
Testing Feed Styler
I would recommend not testing with a feed at first. Feeds take a while to propagate and you can only ping FeedBurner once every thirty minutes.
To test your styles on the content and not the feed, select “Apply styles to post content.” The reason this is ideal is that you can tell right away whether a particular style is working for you or not.
When you are done testing and ready to apply the styles to a feed, select “Apply styles to feed.”
You may need to go back to an already-published blog post and save it again in order to update your feed. WordPress caches your feed everytime you publish. You need to re-cache the feed so that the feed will show up styled. If you do nothing, the feed will be styled after your next post.
Please keep in mind that online readers can be a lot slower to show updated feeds than desktop readers. A desktop aggregator (such as RSS Bandit) will typically show changes right away. Please note that the popular FeedDemon strips out inline styles.
If you still have IE6 and are using FeedBurner, you can just paste your FeedBurner URL into the address bar to see the changes.
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.
Bugs/Feature Requests/Feedback
Right now there is a consistent bug that creeps up when a tag isn’t closed properly. Sometimes WordPress inserts paragraphs and doesn’t close them. Other times WordPress inserts a closing paragraph tag when there is no open one. This causes the content to show up in the feed unstyled. At this time there is no fix.
If you have styled your feed with Feed Styler and like the results, please leave a comment with a link to your feed so we can check it out.
Version History
- v1.07 Released on 14/11/2007
- Small feature inclusion where styles and the various image attributes (width, align, etc) are included in the IMG tag.
- v1.02 Released on 02/09/2007
- Images now show up correctly in feed readers that strip styles.
- v1.0 Released on 02/03/2007
Ronald is frequently found laying his thoughts out in strong, straight-forward articles on various web related topics. He is the author of the popular WordPress plugin 
First time here, or frequent flyer. Whatever the case may be, we highly recommend 
Been looking for this for awhile! I just wanted it to float images, but I’ll have to experiment more with it. I think feedburner’s styling overrides a lot of stuff other than image floating, although I’m not sure.
Hmm, margins on floated images seem to be working all right until they get to google reader, it floats them but does not seem to apply the margins. I’ve seen this work on other images though so I’m not sure what’s happening
I’ve seen the same thing. My images are floated in Google Reader, but have no margins. It’s better than not having the float, but looks a bit cramped.
I use this plugin.
Thank u!
I may have found a bug, or I hope you can help me. When I add FeedStyler to classes, it works very well. But when I add it to a class that’s used with images (such as padding or margin), I get a blank style, and an added hspace and vspace. For example, say I want to add a class “something” to an image with 4px padding. The resulting code that shows up:
Do you know if this is a bug or I’m doing something wrong? I’ve tried it with text and other stuff, and it works beautifully. (I’m pretty knowledgeable in CSS.)
Michel,
Sorry for the late reply as I don’t get e-mails for this post for some reason.
The styles for images are stripped out and converted to hspace, align, vspace, border, etc, because feed readers that strip out styles still read these attributes. This is somewhat of a trade off.
If you want to include both styles and the other attributes, please add this code in until I get around to upgrading the official release:
On line 295, add this in: $matchingStyles .= $sm;
Hope that helped.
Michel et al,
I’ve added in the code that allows images to be styled correctly with feeds that do support inline styles. The version number is 1.07, so please download it here.
Hi, Ronald. Thanks for the update. I downloaded it right away but only just now published a post where I can see the improvement in Google Reader. (Left floating images benefit from this enhancement the most, IMO.) Good job — thanks again for a great plugin.