Show tags in attachment page

There are two approaches that come immediately to mind; both of them involve a bit of PHP coding.

First, you can create a custom WordPress template for your attachment page. You can find some information about this in the WordPress Codex:

Template Hierarchy

In the chart, follow the What Page?/Singular Page/Single Post Page/Attachment Post” path to find the file name, and look for the “Attachment display” section to find the specific name of the template file you need. For example, you can create an attachment.php page that will be used for all attachments, or a more specific image.php page just for images.

You can probably find an existing template file in your theme. In the WordPress “Twenty Twelve” theme the image.php file is the one you want. Your theme may be different. Once you find the right file, you need to add PHP code to get the tags associated with the image and then compose the HTML required to “show a list of clickable tags“.

The second approach might be simpler. Instead of using the “attachment page” you could compose a normal page with an [mla_gallery] shortcode that displays the image. You can use the filters provided by the shortcode to add your clickable list to the top or bottom of the gallery. It still requires some PHP, and a custom plugin to hold it (like the example plugin that comes with MLA) but it would be theme-independent.

Let me know which of those two alternatives you think is best, and I can be more specific about the solution. Also, let me know exactly what you want the “clickable tag” to link to.

I want to implement the code in attachment.php. What is the php code for it? What I mean for clickable tags is that if I click a tag called yellow it should go to the page listing all images that are tagged yellow

Thank you for clarifying the details of the approach you want to take. I have implemented an example of the PHP code you will need, using the WordPress Twenty Twelve theme. Your theme may require the code to be placed in different files. In the Twenty Twelve theme there is no “attachment.php” file; the equivalent file is “image.php”.

Here is the modified version of the “image.php” file:

<?php
/**
 * The template for displaying image attachments
 *
 * @link https://codex.www.ads-software.com/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>
<?php
function custom_terms_list( $ID ) {
	/*
	 * You can change the default taxonomy slug by adding a query variable, e.g., "?taxonomy=attachment_category"
	 * and/or you can edit the code to change the default.
	 */
	if ( ! empty( $_REQUEST['taxonomy'] ) )
		$taxonomy = $_REQUEST['taxonomy'];
	else
		$taxonomy = 'attachment_tag';

	/*
	 * You can change the default destination page by adding a query variable, e.g., "?page_path=some-other-page"
	 * and/or you can edit the code to change the default.
	 */
	if ( ! empty( $_REQUEST['page_path'] ) )
		$page_path = $_REQUEST['page_path'];
	else
		$page_path = '/tag-gallery/';

	$site_url = site_url();

	/*
	 * Get the terms associated with the current attachment.
	 * Return nothing if there are no terms associated with the attachment.
	 */
	$terms = get_the_terms( $ID, $taxonomy );
	if ( empty( $terms ) ) {
		return '';
	}

	$output = "<h3>Terms list for taxonomy: {$taxonomy}</h3>";
	foreach ( $terms as $term ) {
		$output .= '<p>' . sprintf( '<a href=%1$s%2$s?my_taxonomy=%3$s&my_term=%4$s title="Gallery for %5$s">%6$s</a>', $site_url, $page_path, $taxonomy, $term->slug, $term->name, $term->name ) . "</p>\n";
	}// foreach term

	echo $output;
}
?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

		<?php while ( have_posts() ) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class( 'image-attachment' ); ?>>
					<header class="entry-header">
						<h1 class="entry-title"><?php the_title(); ?></h1>

						<footer class="entry-meta">
							<?php
								$metadata = wp_get_attachment_metadata();
								printf( __( '<span class="meta-prep meta-prep-entry-date">Published </span> <span class="entry-date"><time class="entry-date" datetime="%1$s">%2$s</time></span> at <a href="%3$s" title="Link to full-size image">%4$s &times; %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%8$s</a>.', 'twentytwelve' ),
									esc_attr( get_the_date( 'c' ) ),
									esc_html( get_the_date() ),
									esc_url( wp_get_attachment_url() ),
									$metadata['width'],
									$metadata['height'],
									esc_url( get_permalink( $post->post_parent ) ),
									esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
									get_the_title( $post->post_parent )
								);
							?>
							<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
						</footer><!-- .entry-meta -->

						<nav id="image-navigation" class="navigation" role="navigation">
							<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
							<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
						</nav><!-- #image-navigation -->
					</header><!-- .entry-header -->

					<div class="entry-content">

						<div class="entry-attachment">
							<div class="attachment">
<?php
/*
 * Grab the IDs of all the image attachments in a gallery so we can get the URL of the next adjacent image in a gallery,
 * or the first image (if we're looking at the last image in a gallery), or, in a gallery of one, just the link to that image file
 */
$attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
foreach ( $attachments as $k => $attachment ) :
	if ( $attachment->ID == $post->ID )
		break;
endforeach;

$k++;
// If there is more than 1 attachment in a gallery
if ( count( $attachments ) > 1 ) :
	if ( isset( $attachments[ $k ] ) ) :
		// get the URL of the next image attachment
		$next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
	else :
		// or get the URL of the first image attachment
		$next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
	endif;
else :
	// or, if there's only 1 image, get the URL of the image
	$next_attachment_url = wp_get_attachment_url();
endif;
?>
								<a href="<?php echo esc_url( $next_attachment_url ); ?>" title="<?php the_title_attribute(); ?>" rel="attachment"><?php
								/**
 								 * Filter the image attachment size to use.
								 *
								 * @since Twenty Twelve 1.0
								 *
								 * @param array $size {
								 *     @type int The attachment height in pixels.
								 *     @type int The attachment width in pixels.
								 * }
								 */
								$attachment_size = apply_filters( 'twentytwelve_attachment_size', array( 960, 960 ) );
								echo wp_get_attachment_image( $post->ID, $attachment_size );
								?></a>

								<?php if ( ! empty( $post->post_excerpt ) ) : ?>
								<div class="entry-caption">
									<?php the_excerpt(); ?>
								</div>
								<?php endif; ?>
							</div><!-- .attachment -->

						</div><!-- .entry-attachment -->

						<div class="entry-description">
							<?php the_content(); ?>
							<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
						</div><!-- .entry-description -->

					</div><!-- .entry-content -->

					<div class="entry-terms">
					<?php custom_terms_list( get_the_ID() ); ?>
					</div><!-- .entry-terms -->

				</article><!-- #post -->

				<?php comments_template(); ?>

			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

There are two modifications to the WordPress default version. First, I added a new function just after the call to get_header(); on line 13. This function contains all the logic required to generate the list of clickable terms. Second, I added a call to this function, surrounded by < div > tags, towards the bottom of the code a few lines above the call to comments_template();. Those are the only two modifications.

The most interesting line in the function I added is the line that generates the clickable link for each term:

$output .= '<p>' . sprintf( '<a href=%1$s%2$s?my_taxonomy=%3$s&my_term=%4$s title="Gallery for %5$s">%6$s</a>', $site_url, $page_path, $taxonomy, $term->slug, $term->name, $term->name ) . "</p>\n";

This is the line you would change to display the links in a different format, such as an unordered list. Also, the $page_path value must be the page on your site that displays a gallery of all the images with the selected tag. The $taxonomy and $term->slug values are assigned to the my_taxonomy and my_term parameters that are passed to the gallery display page.

The “gallery display page” has two parts. First, you use the Pages/Add New admin screen to create the content you want before the gallery. In my example, the page title is “Tag Gallery”, which makes the corresponding $page_path value “tag-gallery”. Here is the content for my example page:

This page is displayed when the user clicks on a taxonomy term at the bottom of the "image.php" page, i.e., the "Singular Page/Single Post Page/Attachment Post" page for the "image" MIME type.

The terms list at the bottom of the Attachment Post page is generated by a custom function added to the "image.php" template.

As you can see, there is no [mla_gallery] in the page content. That is added by the final piece of PHP code. For the Twenty Twelve theme you need two additional PHP files: page-tag-gallery.php and content-tag-gallery.php. The tag-gallery part of the name must match the $page_path value.

The page-tag-gallery.php file is called when WordPress generates the “Tag Gallery” page. For the Twenty Twelve theme it contains the outer shell for the page; the specific content for the page is in the content-tag-gallery.php file. Your theme may need only one file. Look for page.php in your theme and see what it does.

My example page-tag-gallery.php file is:

<?php
/**
 * The template for displaying the "Tag Gallery" page
 *
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'tag-gallery' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The only modification to this file is the call to get_template_part( 'content', 'tag-gallery' ); that pulls in the content-tag-gallery.php file. My example content-tag-gallery.php file is:

<?php
/**
 * The template used for displaying "Tag Gallery" content in page-tag-gallery.php
 *
 * The default taxonomy slug is "attachment_tag". You can select the taxonomy you want by adding
 * a query parameter to the URL, e.g., "?my_taxonomy=attachment_category".
 *
 * The default taxonomy term is empty. You must select the term you want by adding
 * a query parameter to the URL, e.g., "?my_term=yellow".
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
<?php
function the_tag_gallery() {
	if ( ! empty( $_REQUEST['my_taxonomy'] ) )
		$my_taxonomy = $_REQUEST['my_taxonomy'];
	else
		$my_taxonomy = 'attachment_tag';

	if ( ! empty( $_REQUEST['my_term'] ) )
		$my_term = $_REQUEST['my_term'];
	else
		$my_term = '';

	$taxonomy = get_taxonomy( $my_taxonomy );
	$term = get_term_by( 'slug', $my_term, $my_taxonomy );

	if ( empty( $taxonomy ) ) {
		$output = 'Taxonomy does not exist.';
	}
	elseif ( empty( $term ) ) {
		$output = 'Term does not exist.';
	}
	else {
		$output = sprintf( '<h3>Tag Gallery for %1$s in %2$s</h3>', $term->name, $taxonomy->labels->name );
		$output .= '<p>' . do_shortcode( sprintf( '[mla_gallery %1$s="%2$s" post_mime_type=all mla_nolink_text="No items found" ]', $taxonomy->name, $my_term ) . "</p>\r\n" );
	} // ! empty

	echo $output;
}
?>
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<header class="entry-header">
			<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
			<?php the_post_thumbnail(); ?>
			<?php endif; ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
		</header>

		<div class="entry-content">
			<?php the_content(); ?>
			<?php the_tag_gallery(); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
		<footer class="entry-meta">
			<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
		</footer><!-- .entry-meta -->
	</article><!-- #post -->

There are two modifications in this file. First, I added a function, the_tag_gallery() at the top of the file. Second, I called the function just after the call to the_content() towards the bottom of the file.

You will have to adapt the example to match your theme, but all of the pieces you need are there. I am going to mark this topic resolved, but please update it if you have any problems or further questions. Good luck with your site, and thanks for your interest in the plugin.