Blogrollin’

I made my blogroll look a tiny bit nicer. I’m planning to still add actual RSS or Atom links, and remove any duplicate entries. (They’re there because I occasionally follow multiple versions of the same feed, for troubleshooting purposes¹, or multiple feeds from a single site.)

Ages ago, I created a WordPress plugin called Sync OPML to Blogroll.

Prior to version 3.5, WordPress used to house this “Links Manager,” which allowed you to easily, well, manage a blogroll. In fact, the functionality is still there; it’s simply hidden.

Anyway, Sync OPML to Blogroll re-enables the Links Manager. It also, uh, attempts to keep your links in sync with an online OPML file or endpoint. (Miniflux and Inoreader support public OPML endpoints, and so does Feed Reader.) And it exposes a shortcode for easily displaying a blogroll anywhere on your site.

Fun fact: While I use a WordPress-based feed reader, which stores all of its feed URLs in a custom WordPress database table, I still have Sync OPML to Blogroll copy them from my OPML endpoint into WordPress links table. For now.

Anyhoo, I said I made things look a bit nicer, by which I mean that my blogroll now sports site icons.

The [bookmarks] shortcode, which is just a wrapper around WordPress’ built-in wp_list_bookmarks(), can be told to show or hide these images—in fact, they’re shown by default.

WordPress’ links have an “image address” field, and I created a quick ’n’dirty WP CLI command that copies over Feed Reader’s feed icon URLs into that field. (I don’t think OPML supports feed images, and since I had most icons stored locally already, this seemed like the easiest solution.)

There were a couple feeds that Feed Reader was unable to find an image for, but I was able to quickly download and resize icons for at least some of those feeds, thanks to another WP-CLI command I recently added to IndieBlocks, yet another of my plugins!

Because I didn’t quite like the underline in between the icon and link text—the icon is part of the link, too, but browsers don’t typically underline inline images—I added extra span tags around the link text. Or rather, I told the shortcode to add them inside each link, and then used a regular expression to flip the img element and opening span tag. This allows me to move the text-decoration: underline to the span instead.

All in all, my blogroll page contains a single Shortcode block with the exact following content:

<ul id="blogroll">[bookmarks title_li='' categorize=1 title_before='<h3>' title_after='</h3>' show_name=1 show_images=1 link_before='<span>' link_after='</span>']</ul>

And then I added the following filter to my site’s child theme:

add_filter( 'wp_list_bookmarks', function ( $output ) {
  if ( preg_match_all( '~<span>.+?</span>~', $output, $matches ) ) {
    $count = count( $matches[0] );

    for ( $i = 0; $i < $count; $i++ ) {
      if ( false === strpos( $matches[0][ $i ], '<img ' ) ) {
        // If a link doesn't have an image, add in a "mystery man" icon instead.
        $output = str_replace(
          $matches[0][ $i ],
          str_replace( '<span>', '<span><img src="' . home_url( 'wp-content/plugins/indieblocks/assets/mm.png' ) . '" width="32" height="32" alt="" />', $matches[0][ $i ] ),
          $output
        ); // Yep, using a PNG included with IndieBlocks.
      }
    }
  }

  // Flip the opening `span` and `img` tags.
  $output = preg_replace( '~<span>(<img[^>]+>)~', "$1 <span>", $output );

  return $output;
} );

1. I’ve been developing more than one feed reader for some years now.