NB: Make sure you do a back up of your theme, files and database before attempting the tutorials
Last modified : Sep 03 2022
Estimated reading time : 4 minutes, 39 seconds - 251 words
Share the post "Display Images linked to WordPress Post ID"
With this tutorial, we will create a function that will display images linked to Post IDs.
Let’s say you have a form, you add a post and upload multiple images. These images are now known as get_attachment_image.
With this function we will use a query that will fetch the Post IDs’ get_attachment_image. We also want to display the image with the $size = medium;.
As reference, here are the image sizes that WordPress uses: thumbnail, medium, large, and full.
We also need to specify in our function that if there aren’t any images linked to the a post ID, to display noting. We configure our arguments and display nothing if empty.
Now we will loop our results with a foreach with custom HTML.
function via_get_images_attachees() {
global $post;
$thumb_id = get_post_thumbnail_id($post->ID);
$id = intval( $post->ID );
$size = 'medium';
$attachments = get_children( array(
'post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
'post__not_in' => array( $thumb_id )
) );
if ( empty( $attachments ) )
return '';
$output = "\n";
$output .= '<div id="grid">';
/*** Loop through each attachment ***/
foreach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt;
// New line to get the caption
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
//alt
if ($img_alt == '') :
$img_alt = $attachment->post_title; endif; $title = esc_html( $attachment->post_title, 1 );
$img = wp_get_attachment_image_src( $id, $size );
$output .= '<div class="box">';
$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div class="thumbnail-caption">';
$output .= '<h3>'. $img_alt .'</h3>';
$output .= '</div>';
$output .= '<div class="lightbox-text">';
$output .= '" '. $img_alt .' " ';
$output .= '</div>';
$output .= '</div>';
endforeach;
$output .= '</div>';
return $output;
}Please note that in the loop, we also want to store the image’s lat text in the $img_alt variable. Whether it’s a good or bad idea is up to you.
Now let’s display the results within a template::
<?php echo via_get_images_attachees(); ?>
We know that the Post Thumbnail is considered like an attached image. So the Post Thumbnail will be in the list of images. You can add an exclusion in your arguments with the $thumb_id variable.
Here’s an example of how to exclude the Post Thumbnail: Use the following argument after the $post;
$thumb_id = get_post_thumbnail_id($post->ID);
And then we add the excluded argument in the $attachments variable by using post__not_in inside the $thumb_id variable.
$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order', 'post__not_in' => array( $thumb_id ) ) );
Final code snippet to display images attached to WordPress Post IDs by excluding Post Thumbnail
function via_get_images_attachees() {
global $post;
$thumb_id = get_post_thumbnail_id($post->ID);
$id = intval( $post->ID );
$size = 'medium';
$attachments = get_children( array(
'post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
'post__not_in' => array( $thumb_id )
) );
if ( empty( $attachments ) )
return '';
$output = "\n";
$output .= '<div id="grid">';
/*** Loop through each attachment ***/
foreach ( $attachments as $id => $attachment ) : $img_cap = $attachment->post_excerpt;
// New line to get the caption
$img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
//alt
if ($img_alt == '') :
$img_alt = $attachment->post_title; endif; $title = esc_html( $attachment->post_title, 1 );
$img = wp_get_attachment_image_src( $id, $size );
$output .= '<div class="box">';
$output .= '<div data-thumbnail="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div data-image="' . esc_url( wp_get_attachment_url( $id ) ) . '"></div>';
$output .= '<div class="thumbnail-caption">';
$output .= '<h3>'. $img_alt .'</h3>';
$output .= '</div>';
$output .= '<div class="lightbox-text">';
$output .= '" '. $img_alt .' " ';
$output .= '</div>';
$output .= '</div>';
endforeach;
$output .= '</div>';
return $output;
}