5

I'm trying to add <i class="icon-ok"></i> before the content inside the <li> of the blogroll widget. I'm assuming that's done through the link_title filter, but I can't find a suitable explanation as to how.

Any thoughts?

  • Just wondering any particular reason you're using <i> and not <em>? It won't make a difference in the answer though. – Brooke. Dec 18 '12 at 18:48
  • 2
    I think it's because i is a presentation element while em is meant to denote emphasis. – Christopher Dec 18 '12 at 19:00
7

Filter the arguments for the blogroll:

add_filter( 'widget_links_args', 'wpse_76521_filter_blogroll' );

function wpse_76521_filter_blogroll( $args )
{
    $li_start = isset ( $args['before'] ) ? $args['before'] : '<li>';
    $args['before'] = $li_start . '<i class="icon-ok"></i>';
    return $args;
}

Explanation

  1. The blogroll is created by the widget class WP_Widget_Links.
  2. This class calls wp_list_bookmarks() with some prepared widget arguments which we can filter with widget_links_args.
  3. wp_list_bookmarks() calls _walk_bookmarks() and passes the original arguments through.
  4. _walk_bookmarks() accepts an argument 'before' that defaults to <li>.
  5. So we add that argument to widget_links_args in (2.) and let it fall through until it arrives in _walk_bookmarks() (4.).

Alternative

You could use CSS instead:

.widget_links li
{
    padding-left: 20px;
    background:   url(path/to/icon.png) 0% 50% no-repeat transparent;
}
  • Thanks very much. Completely missed the widget_links_args. – Christopher Dec 18 '12 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.