Have you seen the following code inside the HEAD section of your WordPress blog source code?

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 (Pre 2.8)

The wp_head filter for wp_widget_recent_comments_style was dropped in WordPress 2.8, and was renamed to recent_comments_style. Why it was not removed altogether is a mystery.

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()

Add an action to remove an action (2.9.1 and on)

After reading later comments that were recently posted, it became clear that later versions of WordPress caused the original filter fix above not to work. Investigation reveals that the original filter was dropped in 2.8, renamed and is now an action that fires during widgets_init.

Why they did not just drop this altogether is a mystery. It is something that should be handled via a stylesheet. In fact, if you look at the TwentyTen theme that comes with the later versions of WordPress 3.0 and on, you will find that theme addresses this issue with the following snippet of code in their functions.php file:

function twentyten_remove_recent_comments_style() {
	global $wp_widget_factory;
	remove_action( 'wp_head', array( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style' ) );
}
add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' );

Drop this code into your functions.php file and the styling will be removed from your Head section.

The history of this snippet was originally suggested by Andrew Nacin in a comment to a bug that Artem Russakovskii opened up in the WordPress tracker. Artem’s solution for removing the inline style for the Recent Comments is exactly the same as what the TwentyTen theme uses.

What is odd with this whole thing is that the styling disappeared for a short while during 2.8 and magically showed up in 2.9.1.

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.

Since you can define a function that can be used in several template files of your theme, a useful function to have around would be breadcrumbs. Breadcrumbs are a user-friendly navigation tool to complement your blog with. They are also good for internal linking structure, which is a sound SEO practice.

Organization First

We can write new functions and place them inside functions.php without any problems. However, as we will be writing more functions in the future, this file will start to grow. The file will become bloated, unorganized, and harder to manage.

We will use functions.php to include another function file. This external file will contain our breadcrumbs function, and other functions that are related to it. One related function for breadcrumbs will be a helper function that will generate the Html for anchor links (more on this later).

Also, instead of cluttering the main theme directory with all of our new function files, we will create a subdirectory to store them all in. This will have the added benefit of moving the entire directory into other theme designs without having to dig around looking for them in the main theme directory.

Structuring Directories and Files

Create a subdirectory inside of your main theme directory named /functions/.

Inside the new subdirectory, create a blank file named template-functions.php. We could have named this new file breadcrumbs.php, but I am planning on adding more template functions in the future.

Insert the following code into the newly created template-functions.php file and save it:

<?php

/***********************************************************
* wsf_breadcrumbs() - Shows breadcrumbs in template
***********************************************************/
function wsf_breadcrumbs() {
}

/***********************************************************
* Helper Functions for template coding
***********************************************************/
function wsf_make_link () {
}

 ?>

Right now, the functions in this file do not do anything. Don’t worry, we will be fleshing that all out below.

Also note that I prefixed my function names with wsf_. All of my functions will be prefixed this way. The reason is to avoid any conflict with pre-existing functions or plugins.

Hopefully this prefix is an unique one, and makes sense where it is coming from — in this case, wsf_ stands for WebStractions Function. Feel free to use your own prefix in place of this one.

Open up the functions.php file inside your theme directory. Most themes should have this file. If yours does not, create it.

From this point on, I am assuming that you have a basic grasp of coding Wordperfect templates and some knowledge of how Php works. Remember that Php statements must reside between the <?php and ?>

Near the top of the functions.php file, and after the opening <?php tag, add the following line of code:

   require_once('functions/template-functions.php');

The canvas is now set, let’s get on with a little coding.

Template Helper Functions

Breadcrumbs contain at least one link, or they can contain many links. Each step in building the breadcrumbs involves repetitive Html coding for anchor links.

Lets create a helper function to dynamically create the Html for the anchor link and add in some optional goodies along with it.

Edit your functions/template-functions.php file for the wsf_make_link function:

/***********************************************************
* Helper Functions for template coding
***********************************************************/
function wsf_make_link ( $url, $anchortext, $title=null, $nofollow=false ) {
   if ( $title == null ) $title=$anchortext;
   $nofollow==true ? $rel=' rel="nofollow"' : $rel = ''; 

   $link = sprintf( '%s', $url, $title, $rel, $anchortext );
   return $link;
}

This helper function takes two required parameters and two optional parameters. They are pretty much self-explanatory and you will notice that extra goody for setting the relationship of the link to Nofollow.

The helper function formats the parameters into a string variable and returns that variable for you to process further. Let’s put this function to work in our breadcrumbs function now.

The breadcrumbs() Template Function

Edit your functions/template-functions.php file for the wsf_breadcrumbs function:

/***********************************************************
* wsf_breadcrumbs() - Shows breadcrumbs in template
***********************************************************/
function wsf_breadcrumbs( $sep = '/', $label = 'Browsing' ) {

	global $post;

   // Do not show breadcrumbs on home or front pages.
   // So we will just return quickly
   if((is_home() || is_front_page()) && (!$front_page))
      return;

	// Create a constant for the separator, with space padding.
	$SEP = ' ' . $sep . ' ';

  echo '
';
	echo $label . ': ';
  echo wsf_make_link( get_bloginfo('url'), 'Home', get_bloginfo('name'), true ) . $SEP;

  if(is_single()) {
  	the_category(', '); echo $SEP;
	}
	elseif(is_page()) {
			$parent_id = $post->post_parent;
			$parents = array();
			while($parent_id) {
				$page = get_page($parent_id);
  			$parents[]  = wsf_make_link( get_permalink($page->ID), get_the_title($page->ID) ) . $SEP;
				$parent_id  = $page->post_parent;
			}
			$parents = array_reverse($parents);
			foreach($parents as $parent) {
				echo $parent;
			}
   }
   // Wordpess function that echoes your post title.
   the_title();
	 echo '

';
}

The breadcrumbs function takes two optional parameters for the crumb separator and the label which gets pre-pended. Hopefully this is all pretty much explanatory.

Currently this function will only work on single post pages and pages that you create by hand.

For single posts, this function will look like the breadcrumb at the top of this page. If I have a post that contains more than one category, then they all will be listed and separated by a comma. (Ugly, I know. Will work on a better method in the future).

For your hand generated pages, there is a loop that will recursively step through the hierarchy of parent categories. You can have a page nested three, four, or more levels deep and this loop will follow it all the way back to the top.

In the future I plan on adding loops for tags, categories, archives, etc. But for now, the two biggies are here.

Using Your breadcrumbs() Function in a Theme

This is easy to plug into any theme. Since breadcrumbs will only show up for single posts and custom pages, you will only need to add the function to your single.php and page.php files.

Add this line in your theme file where you want the breadcrumbs to appear:

   <?php wsf_breadcrumbs('»','You are here') ?>

That will generate a breadcrumb like this:

Kewl, eh?

That is about all there is to it. You just wrote some functions that you can re-use in all of your WordPress themes. Congratulations!

If you have any problems with this, let me know with a comment below.