WordPress Attachment Page Template Code Snippets

Date: 15th November 2009 at 4:25 am | Filed under: scripts, wordpress | Author: Sam Burdge | Tags: , , , , ,

I haven't written as many WordPress tutorials as usual lately, as I have been so busy building websites and blogs, so I thought I would take the time out to share a few WordPress codes I have developed recently for attachment page templates and specifically the image attachment page template. The attachment page template is the page that displays a single image when the images link URL is set to 'Post URL'. You can set the image's link URL when inserting a single image into a post, and also when using the gallery shortcode.

The codes in this article are mostly applicable to images inserted using the gallery shortcode as they are most useful for posts or pages that have multiple image attachments. Read more about using image and file attachments.

These template codes can be added to your WordPress theme using the attachment.php and image.php files. If these template files do not exist in your theme you can create them, or WordPress will default to using single.php or index.php to show attachments by default. (See more about template hierarchy).

If you don't want to create a seperate image.php or attachment.php template you can always edit the index.php or single.php files and wrap the attachment specific codes in the is_attachment clause like so:

if(is_attachment()){
//attachment page specific code goes here
}

These 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 thumbnail links in a WP attachment page. I also made use of this previous-next keys in array function which is infinitely useful!

My first set of functions will return text links for previous image, next image and back to gallery. The functions themselves will need to be added to your theme's functions.php file before calling them in your image.php or attachment.php files. So here we go:
Read on…

15 Responses to “WordPress Attachment Page Template Code Snippets”

  • Comment by doriggidy
    Date: April 25th, 2010 at 8:08 pm

    Hi this is a great tutorial. I’m currently using nextgen gallery but want to try your gallery on my sister’s blog…so using the built in image features of WP seem to be the best solution. What you have here should be perfect for her. Great job. One question, If I wanted to have the images themselves link to the next image…how wold i do that?

  • Comment by muscle car
    Date: May 24th, 2010 at 4:29 pm

    hay that’s the cool one,but how to create thumbnail picture in random,place in sidebar or in home page header,thaks b4

  • Comment by Ted
    Date: May 27th, 2010 at 11:47 pm

    This worked perfectly for me … except, for some reason I can’t get the image captions to display. Any thoughts why they might not be coming in?

  • Comment by Shariff
    Date: July 7th, 2010 at 4:13 pm

    Wonderful Tutorial, at last I found it, I am going to try this in my blog.

    Great Going

  • Comment by Jason
    Date: July 9th, 2010 at 4:16 pm

    Thank you for this tutorial, it helped me immensely.

  • Comment by David Hobson
    Date: August 5th, 2010 at 3:59 pm

    First let me say, I am an experienced computer/internet user, however my developer side is still just an apprentice. But as a user, the second I saw white and other colored text on black background, I closed it and went on. I decided to come back and let you know because I’m sure I’m no the only one who’s done so. You might want to see what other developers think and if this technique is advisable. At least my eyes are hurting right now. Peace.

  • Comment by 2k
    Date: October 4th, 2010 at 12:27 pm

    Hi, excellent function to output the all thumbnails to attachments.php Would be amazely cool to adapting it to single.php. Is there any way to output all thumbnails the same way for single.php?

  • Comment by michelle
    Date: October 26th, 2010 at 12:56 am

    Very helpful. Thank you!

  • Comment by Clark
    Date: January 16th, 2011 at 7:38 pm

    Helpful stuff, exactly what I needed!

  • Comment by David
    Date: January 23rd, 2011 at 11:20 am

    Hi, nice tuto ! I just want to say I think the function array_navigate / prev_att_link / next_att_link could be done with one line of code ! See the wordpress function : wp_link_pages(); (http://codex.wordpress.org/Function_Reference/wp_link_pages) and to see an exemple you can look the code of the attachment.php twentyten wordpress theme.

  • Comment by David
    Date: January 23rd, 2011 at 2:15 pm

    Sorry, it’s not wp_link_pages () but previous_image_link(false) and next_image_link () with false option to insert the title : http://codex.wordpress.org/Function_Reference/previous_image_link

  • Comment by onetrek
    Date: February 27th, 2011 at 5:21 am

    This tutorial is good. But it difficult to read because of the page color. Font size if too small. As a web developer I Suggest you to make your template white color. and big font size.

  • Comment by Marirano MARINI
    Date: March 31st, 2011 at 7:44 am

    When I split an article into 2 column the first row of the second column start one line bottom.
    How can I prevent this?

    Thank you. I appreciate your job and I’ll use it when this “bug” will be take off.
    Great work!

  • Comment by surface encounters
    Date: April 7th, 2011 at 5:17 pm

    Thanks manos! Taking the two leading spaced off the end of the functions.php file worked great. Thanks!

  • Comment by Kevin
    Date: June 21st, 2011 at 8:02 pm

    Thanks for the thumbnail function! Works great!!!
    The selecting of text with your particular color scheme is hard to see though!
    Excellent work =)

Leave a Comment

Street Fighter Widget

Date: 26th October 2009 at 1:05 am | Filed under: blog | Author: Sam Burdge | Tags: , , ,

Get your hands on the new Street Fighter 2 widget. You can grab the widget code and embed it on your website, or even your myspace or facebook profile. This flash remake of the game is a very accurate copy of the arcade original featuring all the characters and bonus levels. If you just want to play the game on a website please follow this link:

Play Street Fighter online

2 Responses to “Street Fighter Widget”

  • Comment by Nail Yener
    Date: October 3rd, 2010 at 9:52 am

    I am glad that I came across this. I used to play Street Fighter 2 about 15 years ago :)

  • Comment by Bob
    Date: May 1st, 2011 at 3:54 am

    hey great sf2 widget mang ill put it onto my blog :)

Leave a Comment

New Wiki site for Football FanCast

Date: 20th July 2009 at 5:30 pm | Filed under: development, portfolio | Author: Sam Burdge | Tags: , , ,

fanswiki-screen

I have recently been working on my first project on the MediaWiki platform, a football wiki site for FootballFanCast.com. The Football Fans Wiki is a wiki written from the fans perspective, with information about each team's stadium, transport info, where to eat & drink locally, songs, programmes, merchandise store, links,video clips & more.

Key features that I added as MediaWiki extensions:

  • Register and login from the FFC site instead of through MediaWiki itself
  • News & blog feeds on the wiki homepage

Check it out now: Fans Wiki

2 Responses to “New Wiki site for Football FanCast”

  • Comment by Andy
    Date: September 15th, 2009 at 1:09 pm

    Brilliant work mate. Was looking into doing something like this for my Scottish Football site but don’t know where to start etc.

  • Comment by fashion storm
    Date: October 23rd, 2009 at 6:33 am

    i am using your amazing wordpress layout and i love it but i was wondering how i can change the header to a custom one that i have. it doesn’t blink or anything it is just a png. file. help! please. you can mail me back at the email i gave you. thanks!

Leave a Comment

WordPress attachments hack

Date: 9th June 2009 at 3:19 pm | Filed under: blog, development, scripts, wordpress | Author: Sam Burdge | Tags: , , , , , ,

While working on a WordPress site recently I came up against a problem that had never occurred to me before. The client wanted each post excerpt on the homepage to include an image which when clicked would link to the main post (permalink) itself. The built in functions of wordpress when inserting an image allow you to link to either the 'File URL' (i.e. the full size version of the image) or to the 'Post URL' which is actually an attachment page in wordpress which displays the image, but does not include the text of the actual post itself. However, without either editing the html of each post (not an option for this client) or inserting the image without a link, and then adding the permalink to the image (too long winded) there was no simple way to create the image links in the way they wanted them.

My solution to this was to create a very basic hack which would allow them to use the 'Post URL' link when inserting images, but instead of linking to the attachment page, the link would automatically be updated to link to the post's permalink itself.

Here is the basic php function that you would need to insert into your theme's functions.php file:

function lose_attachment($content){
return preg_replace('/<a(.*?)href="(.*?)\/attachment\/(.*?)"/i', '<a$1href="$2"', $content);
}

add_filter('the_excerpt', 'lose_attachment',2);

This will remove the 'attachment/name-of-image-file' part from the URL making it link to the post's permalink itself.  I hope someone out there finds this useful!

7 Responses to “WordPress attachments hack”

  • Comment by akshay
    Date: June 14th, 2009 at 3:27 pm

    really good post….tutorial is very helpful for me …thanks a lot for giving out such good tutorials

  • Comment by Alex Holsgrove
    Date: June 29th, 2009 at 8:54 am

    This was a great help. Thanks for sharing the code

  • Comment by Abeon
    Date: July 13th, 2009 at 10:26 pm

    This is a great little hack :)
    Simple but effective!

  • Comment by Nate
    Date: August 12th, 2009 at 1:21 pm

    I can’t wait to try this out.

  • Comment by Betaclick SEO Company
    Date: September 17th, 2009 at 7:32 pm

    Thanks for the code dude, i need to try this out on my wordpress blog! As im learning advanced use of it.

  • Comment by Webbando
    Date: April 12th, 2010 at 10:51 am

    Hi Sam. Thanks for your post, really useful. But I would have another thing:
    I want change permalink of attachment file from

    http://site.ext/postname/postname-post_id.html/attachment-name

    to

    http://site.ext/photos/attachment-name

    Is it possible?

    Thanks a lot for your support

  • Comment by William Lindley
    Date: March 2nd, 2011 at 1:43 am

    You might also try the AutoNav plugin, which will automatically generate thumbnails and links to child pages, to posts in a category or by slug or author, or by page/post ID:

    http://wordpress.org/extend/plugins/autonav/

Leave a Comment

Branded Quiz Games

Date: 9th June 2009 at 12:23 pm | Filed under: flash, portfolio | Author: Sam Burdge | Tags: , , , ,

I have developed a quiz game engine based on this original multi choice quiz by animike. The improvements I made to the original flash file are:

  1. Removed the need for an external XML file, which makes it easier to distribute virally as a stand-alone file.
  2. Added the ability to add infinite arrays of questions, so the quiz will have a different set of questions each time you play.
  3. Added the potential to build arrays of questions based on statistical data, perfect for sports quizes.
  4. Added the potential to plug the game into various scoreboard and in-game advertising APIs such as MochiAds.
  5. Added brandable features such as a 'More Games' link and a preloader screen.

To test the quiz engine I released the first version of my football quiz, with 12 questions drawing from an array of 120 possible questions. It got mixed reviews on newgrounds.com, but seemed to do reasonably well on football / sports specific games sites thereafter. You can try out the first version of the quiz game here: Football Quiz

More recently I have released the first sponsored / branded version of the quiz called Premiership Football Quiz, which is sponsored by one of the UK's leading football websites - FootballFanCast.com. I have plans to work with the FootballFanCast team to develop other football quiz games, relating to specific teams, competitions, etc.

I am also hoping to branch out now into quizes relating to other sports, and to other subjects entirely, such as Pop Music, Movies, TV, Celebrities, Arcade games, World Geography, etc.

If you need a quiz game for your site, or wish to distribute a branded quiz game across a range of games sites please feel free to get in touch. I can quote on a per quiz basis, prices will depend on the level of branding, the number of questions, whether the questions are provided, whether you want me to distribute, etc. So there is no fixed price as such.

1 Response to “Branded Quiz Games”

  • Comment by Jimmy
    Date: September 19th, 2009 at 8:06 pm

    I use latest wordpress what do I do wrong? I get each column one row lower, whatever I do it still does this. Is it a bug with newest Wordpress? Ive followed everything step by step.

Leave a Comment