Another WordPress tutorial!!!
Andy from Tokyo, Japan writes in asking:
Could you please tell me how you added the text navigation links to your gallery? I would be grateful… …Thank you.
Sure Andy, No problem, but first a little bit of background for everyone else:
Gallery Shortcode
WordPress version 2.5 added an exciting and very awesome feature: The Gallery Shortcode. This feature allows blog authors to add a gallery of thumbnails to their blog posts. Each one of these thumbnails is linked to an individual page which displays a larger version of the image and any other information that has been associated with that image (title, description, comments, etc…). A new template file was added to the WordPress Default theme to display single images. This template file is called image.php.
Image.php?
If your current theme does not have an image.php file, I would suggest that you visit your theme’s homepage and see if a new version has been released for 2.5+. If no new version is available, you can save a copy of the WordPress default theme’s image.php file to your current theme’s directory and modify it match your current theme.
Changing to Text Based Navigation
Now that everyone has a working image.php file in their current theme’s directory, it’s time get rid of those clunky thumbnail links! Unfortunately, I was not able to find any template tags which offered text-based links, so I had to create my own:
function mf_previous_image_link( $link_text ) {
print mf_adjacent_image_link( $link_text, true );
}
function mf_next_image_link( $link_text ) {
print mf_adjacent_image_link( $link_text, false );
}
function mf_adjacent_image_link( $link_text, $prev = true ) {
global $post;
$post = get_post($post);
$attachments = array_values(get_children("post_parent=$post->post_parent&post_type=attachment&post_mime_type=image&orderby=\"menu_order ASC, ID ASC\""));
foreach ( $attachments as $k => $attachment )
if ( $attachment->ID == $post->ID )
break;
$k = $prev ? $k - 1 : $k + 1;
if ( isset($attachments[$k]) )
return '<a href="' . get_attachment_link( $attachments[$k]->ID ) . '">' . $link_text . '</a>';
else
return false;
}
You’ll want to paste the above code into your theme’s functions.php file. If your theme does not have a functions.php file, you can make one from scratch. Basically, I have copied a few functions from a core wordpress file, gave each one a unique name and modified them to suite my needs.
The next step is to locate the following code in your image.php file:
<div class="navigation"> <div class="alignleft"><?php previous_image_link() ?></div> <div class="alignright"><?php next_image_link() ?></div> </div>
Change the above code to:
<div class="navigation"> <div class="alignleft"><?php mf_previous_image_link( 'Previous Image' ) ?></div> <div class="alignright"><?php mf_next_image_link( 'Next Image' ) ?></div> </div>
Save both image.php and functions.php and upload them to your server. You should now have text-based navigation links for all of your WordPress Galleries.
Image Page Template Hierarchy
The list below illustrates the logic WordPress uses to determine which template file will display the the larger images in your theme. Basically, WordPress first looks for image.php if it is found, it is used, if not, attachment.php is used. Wordpress will try to locate each file in the list before it defaults to index.php.
- image.php
- attachment.php
- single.php
- index.php
In Conclusion
I hope this helps you out Andy (and whoever else might be reading). Feel free to leave questions in the comments section. Thanks for visiting!
Thank you!! I’ve been checking the Wordpress forum every day for an answer with no luck. It took a long time to find your website using Google (because you mentioned something about navigation), and now finally I’ve got my gallery working the way I wanted. You can see it by clicking the link in this comment.
Hey Andy,
No problem. Glad I could help out. Great Photography, by the way.
Thank you so much for this! I didn’t think the images along were self-explanatory enough for navigation, so this was exactly what I needed.
Thank you so much for this very clear explanation. I had been searching all over for a way to do this.
Thanks, Michael! This was what I needed.
[...] to Michael Fields, I was able to substitute the large thumbnails by text links. The text links [...]
[...] comes with the default theme in WordPress 2.5, but many other themes don’t include it. LINK: Adding Text Links to WordPress Gallery Michael Fields has done a wonderful job explaining all you need to do to set up your image.php [...]
[...] agradezco a la pagina de mfields.org por su post llamado Agregar Links de Texto a la Galería Wordpress. que muestra una introducción a todo esto. Tags: Codde, Codigo, Tecnicas, Tecnicas Blogger, [...]
Hi!
I’m using your code for my site. Great work!
Unfortunately, the text based navigation does not work with WordPress 2.6 (beta 1&2).
I’ve posted about the errors on the WordPress support forum: http://wordpress.org/support/topic/169841?replies=4
Any ideas? Thanks
Nick,
Hi. Please see this page: http://mfields.org/wordpress-plugins/text-based-image-links/
It’s amazing
Hello -Thanks so much for this -however I am getting a PHP error with your code at this line:
$attachments = array_values
The error I get is this:
————
Warning: array_values() [function.array-values]: The argument should be an array
Warning: Invalid argument supplied for foreach()
————
I am wondering if the code has been edited or I am using it incorrectly?
I have this in my functions.php in my theme.
[EDIT] This will happen when using the above solution with Wordpress v6+. Please see this plugin.
[...] Michael Fields， 我在functions.php文件这里加入如下代码 nb_previous_image_link( ‘« Vorheriges [...]
I didn’t think the images along were self-explanatory enough for navigation, so this was exactly what I needed.
Made some modifications to the code to circumvent ‘quotes’ issues in the function output. It seems to work for me. Been looking for this. Thanks! (please feel free to use code).
$attachments = array_values(get_children( array(‘post_parent’ => $en_post->post_parent, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => ‘ASC’, ‘orderby’ => ‘menu_order ID’, ‘menu_order’ => 1) ));
[...] php functions are loosely based on code I found in this article: Adding text links to WordPress Gallery by Michael Fields. In this article he provides code examples of how to show previous and next [...]