Add Attachment ID to the Class of WordPress Images

Sometimes we don’t have the luxury to know the attachment ID of the images we are working with. For example, we only have the HTML source of the page, but we can’t easily target the images. Why? We might want to manipulate them like further filtering with PHP or adding custom styles via CSS. In such cases, it could be convenient if our <img> tags had some identifier created from the attachment ID, e.g. a class. It’s much slower and more resource intensive to find the image ID based on its URL.

WordPress has built-in support for this, but it doesn’t work consistently. If we insert an image from the Media Library (using the editor on a page or post), the generated tag will have the wp-image-xx class. Here xx means the attachment ID of the image. However, when we use PHP code to create image tags programmatically, then the class is missing.

What is the reason behind this?

To understand what’s happening, let’s take a look under the hood. When inserting an image from the Media Library into the content, WordPress calls the get_image_send_to_editor() function to create the code. This function uses the get_image_tag() function to generate the image tag itself including this class.

When we generate image tags programmatically, we call the wp_get_attachment_image() function. Unfortunately, this doesn’t add the class to the images. Different functions produce different outputs. I don’t know the idea behind this, but we should live with it.

You would think that all images inserted into content via the Media Library are fine. Not exactly. Nowadays, many people use the drag and drop site builders, such as Elementor or Beaver Builder. These generate the entire page content programmatically; thus the attachment ID is often missing from the class.

Solution to the missing attachment ID

Fortunately, we can quickly solve this problem. Use the filter wp_get_attachment_image_attributes with the following code in your functions.php of the (child) theme:

/**
 * Add attachment ID class to images
 *
 * @param array $attr Array of attributes.
 * @param object $attachment Attachment Post object, instance of WP_Post class. 
 * @return array Image attributes array.
 */
function lwp_attachment_id_class( $attr, $attachment ) {

    $class_attr = isset( $attr['class'] ) ? $attr['class'] : '';
    $has_class = preg_match(
        '/wp\-image\-[0-9]+/',
        $class_attr,
        $matches
    );

    // Check if the image is missing the class
    if ( !$has_class ) {
        $class_attr .= sprintf( ' wp-image-%d', $attachment->ID );
        // Use ltrim to to remove leading space if necessary
        $attr['class'] = ltrim( $class_attr );

    }
    return $attr;
}

add_filter(
    'wp_get_attachment_image_attributes', 'lwp_attachment_id_class', 10, 2
);

This simple function ensures that the image has the wp-image-xx class.