Have you seen the following code inside the HEAD section of your WordPress blog source code?
<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>
Ever wonder how it got there, and how to get rid of it?
The inline style gets injected into the head section when you use the Recent Comments widget. The widget applies a filter to wp_head() when it is activated.
In order to get rid of the inline style, short of modifying the core file (not advised), is to apply a filter of our own. Let’s get to work on that.
Move the styling to your theme style.css file
Copy the following code to your theme css file:
.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}
Once you have the code inside your style.css file, you can edit it to your hearts content.
Add a filter to remove a filter
Yep, seems a little crazy, but we are going to add a filter to remove the stock WordPress filter.
Add the following to your theme functions.php file:
function remove_wp_widget_recent_comments_style() {
if ( has_filter('wp_head', 'wp_widget_recent_comments_style') ) {
remove_filter('wp_head', 'wp_widget_recent_comments_style' );
}
}
add_filter( 'wp_head', 'remove_wp_widget_recent_comments_style', 1 );
Here we are adding a filter via the WordPress add_filter() method. The first argument, wp_head, which is the hook where the style filter gets applied in the first place.
The second argument is the callback to our custom filter, remove_wp_widget_recent_comments_style().
The third parameter is the priority of when our filter will get processed. We are setting this to 1 to insure that it takes priority over the WordPress core function. If this argument is too higher of a number, then we run the risk of our filter not taking precedence.
Our custom filter is simple, it first checks to see if the WordPress filter is present. If it is present, then we simply remove the filter. The remove_filter() function takes the same arguments as add_filter()
Some thoughts
While the inline style does not hurt anything, some purists just hate seeing it there in the first place. It is one of those quirky things that WordPress code does to you.
The remove_filter() WordPress function can come in handy for other things that bug the heck out of you. One example would be the curly quotes that replace normal quotes inside of your posts and pages.
You can remove the wptexturize filter from any of the following hooks for example:
remove_filter('category_description', 'wptexturize');
remove_filter('list_cats', 'wptexturize');
remove_filter('comment_author', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('single_post_title', 'wptexturize');
remove_filter('the_title', 'wptexturize');
remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
You can think of remove_filter is to WordPress, as reset.css is to style sheets. Wonderful world it is.
Nice article, sometimes I get confused on how to remove part of my wordpress theme, thanks for the tutorial!
Hi Ronnie,
Your instructions seem clear — but it didn’t work at all for me! I’d rather delete the Comments widget and delete the line of code. But, I can’t find it in the theme code anywhere!
Any ideas how I can just delete it?
Thanks,
Laurie
Laurie, we are using the same versions of WordPress and it works for me.
You will not see the code inside of your theme files at all. That snippet of code gets injected into the Head section by WP when it creates your page.
The only way to get rid of it, outside of the fix above, is to remove the Recent Comment widget via your control panel.
The code does not hurt anything by being there, except that it makes it difficult to style the display, margin, and padding for the div.
I got that working on my blog, thanks for a great tip.
Thanks for your post, i really needed this tutorial
Nice post, i needed this tutorial
Nice and simple tutorial to style the comments
Very useful. I did just notice this style and couldn’t figure out where it’s coming from. This is a really bad design practice, IMO. WP should have just added a widget setting with the style in it rather than hardcoding it like that.
BTW, your solution didn’t work for me either.
After debugging the core code, I found that I need to replace the filter name with “WP_Widget_Recent_Commentsrecent_comments_style25″ in both remove_filter() and has_filter() calls.
This is most likely because I’m using WP 2.8 which came out after your initial post.
The nasty file adding the CSS is in wp-includes/ and is called default-widgets.php.
Thanks for the tutorial.. i was looking for that for my wordpress
Thanks for the info. that helps me.
FYI, I hope to get it fixed in WP core using this ticket: http://core.trac.wordpress.org/ticket/11891#comment:2 as my own solution above doesn’t really work – the filter name changes.
[...] hook, which would prevent it from ever firing and injecting the CSS. In fact, somebody over at webstractions.com already took a crack at this approach with the following code, which may have worked for a while [...]
A working solution for Wordpress 2.9 has been posted at http://beerpla.net/2010/01/31/how-to-remove-inline-hardcoded-recent-comments-sidebar-widget-style-from-your-wordpress-theme/
@Artem – Thanks the for the work you put into this.
nice article. thanks!