Change the XML or Feed icons with theme_xml_icon & theme_feed_icon

Here in the first of our series on over riding theme function we attack theme_xml_icon.

As you will read on the Drupal API page the function has largely been superseded by theme_feed_icon. Therefore it makes sense to look at both and kill two birds with one stone. They're very similar with only minor differences in their respective output.

So to the code - first lest take a look at the default functions.

<?php
function theme_xml_icon($url) {
  if (
$image = theme('image', 'misc/xml.png', t('XML feed'), t('XML feed'))) {
    return
'<a href="'. check_url($url) .'" class="xml-icon">'. $image .'</a>';
  }
}
?>


<?php
function theme_feed_icon($url, $title) {
  if (
$image = theme('image', 'misc/feed.png', t('Syndicate content'), $title)) {
    return
'<a href="'. check_url($url) .'" class="feed-icon">'. $image .'</a>';
  }
}
?>

As we can see both theme functions are returning two things - an image with a link. Additionally theme_feed_icon returns the value of the $title.

Now, how to change the feed icon or the xml icon?

1) First you need to copy/paste the function into your themes template.php file.

2) Change the name of the function to match the name of your theme. Lets say your themes name is "mytheme", then your function should be named as such:

<?php
function mytheme_feed_icon($url, $title) {
 
// rest of code will be here...
}
?>

3) All we need to do is upload an icon of our choice to our themes images folder and tell the function to use our new image. We do that by modifying the path to the icon. For example:

<?php
function theme_feed_icon($url, $title) {
 
// alter the path to the feed icon
 
if ($image = theme('image', 'path-to-my-theme/my-bad-ass-feed-icon.png', t('Syndicate content'), $title)) {
    return
'<a href="'. check_url($url) .'" class="feed-icon">'. $image .'</a>';
  }
}
?>

Now, I wanted a really huge feed icon, so for me the above function returns...


Syndicate content

And for reference the output is...

<a class="feed-icon" href="http://adaptivethemes.com/rss.xml">
<img width="96" height="96" title="adaptivethemes RSS" alt="Syndicate content" src="/sites/all/themes/zen_naked/images/my-bad-ass-feed-icon.png"/>
</a>

Now you sharp cookies out there will notice the output includes the image dimensions and an alt attribute - where did that come from! The key to that is the "image" theme function:

if ($image = theme('image',...)

You can read more about over at the Drupal API site theme_image.

We'll also be covering theme_image later in the series.

The default icons won't always suit your custom design or palette so over riding this function is quite useful.

Last updated 12th August, 2008 - 3:58am

Authored by Jeff Burnz on