Adding class to WordPress linked images

An enduring issue with linked images (<a href=""><img src="" /></a>), is targeting the anchor link for theming—especially for disabling borders and highlighting that look great on text links but odd for images. CSS doesn’t have a parent selector ( a > img:parent), and javascript feels like overkill. The simple solution is to add a class to the parent anchor (<a href="" class="img">), but that can get repetitive, especially when WordPress is supposed to automate those sorts of things.

Adding the following code to your WordPress theme’s functions.php file will automatically add a class to the anchor link when you insert linked images through WordPress’s Media Library interface. It won’t fix posts you’ve already written, but should make things better moving forward.

 
/**
 * Attach a class to linked images' parent anchors
 * e.g. a img => a.img img
 */
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'img'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

The if/else could probably be done with a single regular expression, but I’m not that smart.

14 comments

Ben Lind #permalink

Wow, thank you SO much for this function! I’ve been pulling out my hair for hours over this problem, and now I can fix it. Thanks so much!

Jon Heslop #permalink

Awesome!

I’ve always wanted this! A 3 minute google found this.

Thank you so much!

matt #permalink

Thanks, this was exactly what I needed to ensure that my lightbox worked properly

Adam Housman #permalink

Way to go – this is really helpful, thanks.

Marc #permalink

I solved it this way.

Everything you need is jQuery.

$(“a”).has(“img”).addClass(“%yourclass%”);

And it works over all images. Also over already uploaded. ;)

Marc #permalink

This solution is better.

$(“.content a”).has(“img”).addClass(“%yourclass%”);

Ben #permalink

A solution in jQuery does add the functionality in the client (assuming they aren’t blocking JavaScript), but the goal of my script above is to generate the intended markup on the server in the first place. A jQuery solution generates the unintended markup then asks the client to fix it. Which, IMO, is wrong (or at the very least, unoptimal).

Marc #permalink

Than you’re right. But I needed it for the fancybox jquery plugin. so my solution worked better for me. ;)

Ben #permalink

Yeah, if you’re already doing heavy jQuery-based presentation, then there is no harm in adding a class with jQuery for use in binding another jQuery event. My use case is more for CSS finagling.

Mark #permalink

Can this be modified to give the tag a class instead of the tag? Thanks.

Mark #permalink

Can this be modified to give the “img” tag a class instead of the “a” tag? Thanks.

Zoe #permalink

This is awesome, thanks so much for posting it!

Lenny #permalink

+style.css:

#comments dialog{ position: relative; }

Mridul #permalink

Sir, i added the code to my themes functions.php file but not working. Can anyone tell me after adding the code to the functions.php if anything else to do.

Leave your comment