Select Page

If you’re a WordPress user, you may have noticed that the attachment link does not include a custom class when you add an attachment to a post or page. While this may not seem like a big deal, it can be very useful for customizing the look and feel of your website.

To add a custom CSS class to the attachment links, place the following code snippet in your theme’s function.php file or create a custom plugin with this code:

//Adding the custom class to the attachment link
add_filter('the_content', 'wpobsessed_add_attachment_class');

// this filter adds the custom class to the attachment link
function wpobsessed_add_attachment_class($content) {
    // Get all attachments
    $attachments = get_posts( array(
        'post_type' => 'attachment',
        'numberposts' => -1
    ));

    //Loop through each attachment
    foreach ($attachments as $attachment) {
        // Get the attachment link
    	$link = get_attachment_link($attachment->ID);

    	//Add the class to the attachment link
        $content = str_replace($link, '<a class="custom-class" href="'.$link.'">'.$link.'</a>', $content);
    }
    //return the content with the class added
    return $content;
}

This function adds a custom CSS class to all attachment links on your WordPress website. It does this by:

  1. Adding a filter to the the_content hook, which causes the wpobsessed_add_attachment_class() function to be called whenever post content is displayed.
  2. Retrieving a list of all attachments (attachment post type posts) on the site using the get_posts() function and storing them in the $attachments variable.
  3. Looping through each attachment in the list using a foreach loop.
  4. Getting the attachment link using the get_attachment_link() function and storing it in the $link variable.
  5. Adding the custom-class class to the attachment link by replacing the original link with an HTML anchor element that has the custom-class class applied to it.
  6. Returning the content with the modified attachment links.