Share

The Problem

If you use the Recent Comments sidebar widget in your WordPress installation, it's possible that you want to customize this widget's style.

You will quickly find, however, that as soon as you add the widget to your sidebar, it injects the following inline, hardcoded CSS into the containing page (using !important to make things worse): 

<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

The code above comes from recent_comments_style() (found in wp-includes/default-widgets.php), which is in turn called by WP_Widget_Recent_Comments() in the same file (this is just an old-style PHP4 constructor – same as PHP5's __construct()), which is triggered when the Recent Comments widget is used:

add_action( 'wp_head', array(&$this, 'recent_comments_style') );

This leaves a bad taste in my mouth because:

  • the style is automatically forced into any page that embeds the widget
  • it uses !important to override any existing styles
  • it cannot be configured from the widget
  • this is a core WordPress widget and not some widget added by a random plugin. WordPress should not contain such bad practices.

After seeing this, I raised a new issue #11928 in the WordPress bug tracker but in the meantime, of course, I could go and hack the default-widgets.php core file to solve this problem. That, of course, would be a horrible thing to do – the next upgrade could wipe my changes or result in a conflict (if upgrading via svn). In general, one should never need to modify core files.

The Solution

Fortunately, there is a solution that doesn't involve modifying core files. Remember that we are talking about WordPress here, which gained its popularity due to the ease of customization.

Normally, we would just need to remove the recent_comments_style 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 but doesn't anymore:

1
2
3
4
5
6
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 );

This code doesn't work in the current version of WordPress because recent_comments_style() belongs to the WP_Widget_Recent_Comments class, and we need a tiny bit more effort to get through to the object of that class.

The following snippet, suggested by Andrew Nacin in a comment to the bug I opened up, does the job and works in WordPress 2.9.1:

1
2
3
4
5
add_action('widgets_init', 'my_remove_recent_comments_style');
function my_remove_recent_comments_style() {
	global $wp_widget_factory;
	remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));
}

This code first gets access to the right object and then passes it to the remove_action() function, along with the right function name recent_comments_style. Stick it intoyour functions.php and it should do the trick.

And there you have it.

● ● ●

Artem Russakovskii is a San Francisco programmer, blogger, and future millionaire (that last part is in the works). Follow Artem on Twitter (@ArtemR) or subscribe to the RSS feed.

In the meantime, if you found this article useful, feel free to buy me a cup of coffee below.



Share
  • http://pixel-ellipsis.net flyin

    Thanks for the article! I dropped the code into my theme's function file, but it doesn't seem to be working… I'm using WordPress 2.9.2. Any thoughts/suggestions would be appreciated! I'm getting so frustrated with this style insert that I'm really tempted to try hacking the core wordpress file gah!

    • http://pixel-ellipsis.net flyin

      Update – maybe not quite as elegant a solution, le with an !important class of my own in the theme's css file. I had no idea that !important existed before but I'm definitely not a fan… and I really hope WordPress can "enhance" the recent comments widget going forward because this was a big pain in the butt to fix!

    • http://beerpla.net Artem Russakovskii

      Hrm, I'm using 2.9.2 and it's definitely working for me, as you can see by viewing the source.

  • http://www.metacomdesign.com/blog Ryan Cowles

    Worked like a charm for me! Thanks for saving me some time!

  • Chris

    Works like a charm. Nice one.

    Just note: this fix goes in the THEMES functions.php not the wordpress core functions.php

  • Ronnie @ Webstractions

    You know Artem, I thought I had this removed in 3.0.1.

    It works on my local install, but not my live site. I even tried playing with the priority but to no avail.

    I am using your code to remove the action which is identical to the code in the TwentyTen theme. There is even a person who left a comment on my blog stating that the TwentyTen function does not work. Any ideas?

    • Emil

      Hi,

      This code works for me just fine, both local and live site:


      /**
      * Recent Comments Style Removal
      */

      function my_remove_recent_comments_style() {
      add_filter( 'show_recent_comments_widget_style', '__return_false' );
      }
      add_action( 'widgets_init', 'my_remove_recent_comments_style' );

      If the above code does not display properly take a look at http://pastebin.com/W1rdRxx1 same code as in TwentyTen functions.php

  • SAL

    how to remove the word "on" in recent comments. It always displays the word ON after the name. I want remove this . Please help me

  • kerala

    It’s nice to know there are still some good people out there like you that care and have a passion for what you are doing.Good luck and keep up the good work.

  • rankpub

    good job :-)