Replace menu's ul li.first a text link with image  link Drupal 7.

For example no matter what menu block would be added to the header region, how can I make it replace first link (which has .first class) with image link?

So Drupal generates links as &lt;li class=first&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; and then apply some function from template.php which would replace it with something like &lt;li class=first&gt;&lt;a href="#"&gt;&lt;img src='../link.png'&gt;&lt;/img&gt;&lt;/a&gt;&lt;/li&gt;

I found some code which kind of does that, but it needs to enter path to image via Add link under Title field and I don't really need that, the users of the theme won't understand how that works. And it also applies to any links. While I need to switch the very first text link with image link whose path would be given inside template.php

&lt;?php
/**
* Allows for images as menu items.
* Just supply the an image path in the title. The image path will be replaced
* with an img tag. The description is used as alt text and title.
* Implements theme_menu_link().
* Reference: http://chrisshattuck.com/blog/how-use-images-menu-items-drupal-simple-preprocessing-function
*/
function YOUR_THEME_menu_link($variables) {
  $element = &amp;$variables['element'];

  $pattern = '/\S+\.(png|gif|jpg)\b/i';
  if (preg_match($pattern, $element['#title'], $matches) &gt; 0) {
    $element['#title'] = preg_replace($pattern,
      '&lt;img alt = "' . $element['#localized_options']['attributes']['title'] . '" src = "' . url($matches[0]) . '" /&gt;',
      $element['#title']);
    $element['#localized_options']['html'] = TRUE;
  }

  return theme_menu_link($variables);
}
?&gt;


I can do that with CSS, but I prefer not (client side reasons).
You can override theme_menu_tree.  All it does is output UL tags, so you could squeeze in an LI at the beginning, like this:

    function mycustomtheme_menu_tree($variables) {
      $path = drupal_get_path('theme', 'mycustomtheme') . '/images/home.png';
      $image = theme('image', array('path' =&gt; $path, 'alt' =&gt; t('Home'), 'title' =&gt; t('Home')));
      $home_link = l($image, '', array('html' =&gt; TRUE));
      $home_li = '&lt;li class="home"&gt;' . $home_link . '&lt;/li&gt;';
      return '&lt;ul class="menu"&gt;' . $home_li . $variables['tree'] . '&lt;/ul&gt;';
    }


I've done this exact thing on several sites (but I use nice_menus), here's the code I added to my template.php file in my custom theme:

    function mycustomtheme_nice_menus_tree($variables) {
      $menu_name = $variables['menu_name'];
      $mlid = $variables['mlid'];
      $depth = $variables['depth'];
      $menu = $variables['menu'];
      // Load the full menu array.
      $menu = isset($menu) ? $menu : menu_tree_all_data($menu_name);
      if (isset($menu)) {
        $page_menu = menu_tree_page_data($menu_name);
        $trail = nice_menus_build_page_trail($page_menu);
        unset($page_menu);
      }

      // Allow i18n module to translate strings where available.
      if (module_exists('i18n_menu')) {
        $menu = i18n_menu_localize_tree($menu);
      }

      // Assume depth == 0 by default, overriden if mlid is specified.
      $parent_depth = 0;

      // For custom $menus and menus built all the way from the top-level we
      // don't need to "create" the specific sub-menu and we need to get the title
      // from the $menu_name since there is no "parent item" array.

      // Create the specific menu if we have a mlid.
      if (!empty($mlid)) {
        // Load the parent menu item.
        $item = menu_link_load($mlid);
        // The depth for our parent item, if it exists.
        $parent_depth = ($item['depth']) ? $item['depth'] : 0;

        // Narrow down the full menu to the specific sub-tree we need.
        for ($p = 1; $p &lt; 10; $p++) {
          if ($sub_mlid = $item["p$p"]) {
            $subitem = menu_link_load($sub_mlid);
            // Menu sets these ghetto-ass keys in _menu_tree_check_access().
            $menu = $menu[(50000 + $subitem['weight']) . ' ' . $subitem['title'] . ' ' . $subitem['mlid']]['below'];
          }
        }
      }

      $output['content'] = '';

      if ($menu) {
        // Set the total menu depth counting from this parent if we need it.
        $depth =  ($depth &gt; 0) ? ($parent_depth + $depth) : $depth;
        $output['content'] .= theme('nice_menus_build', array('menu' =&gt; $menu, 'depth' =&gt; $depth, 'trail' =&gt; $trail));
      }

      /* my changes */
      $path = drupal_get_path('theme', 'mycustomtheme') . '/images/home.png';
      $image = theme('image', array('path' =&gt; $path, 'alt' =&gt; t('Home'), 'title' =&gt; t('Home')));
      $home_link = l($image, '', array('html' =&gt; TRUE));
      $home_li = '&lt;li class="home"&gt;' . $home_link . '&lt;/li&gt;';

      $output['content'] = $home_li . $output['content'];
      $output['subject'] = '';

      return $output;
    }