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…

5 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.

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!

6 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

Leave a Comment

The Transfer Tavern

Date: 9th June 2009 at 2:37 pm | Filed under: portfolio | Author: Sam Burdge

untitled-1untitled-2untitled-3untitled-4

The Transfer Tavern is a pub themed blog / site about football transfer rumours. It features two different voting systems by which readers can vote on the pluasability of each rumour, deciding whether the rumour should 'Fly or Die' and also a beer rating to decide how drunk you would have to be to believe the more outlandish rumours.

The most interesting and challenging aspect of building the site was designing and implimenting the custom voting systems. I also designed the pub style logo for the site which I am quite pleased with! If you like to keep up to date with all the latest footy rumours, or want to find out what purchases your team might be making over the summer transfer window then be sure to check it out: www.footballtransfertavern.com

Leave a Comment

The Football Journalist - Blog Customisations

Date: 4th May 2009 at 1:00 pm | Filed under: portfolio | Author: Sam Burdge | Tags: , , ,

tfj-screen

The Football Journalist is a blog site aimed at people who want to become professional sports and football journalists. It features listings of sports journalism courses and jobs within the football industry.

I applied a few basic customisations to the theme, changing the background image and adding in the adsense blocks and job listings widgets. I also used a few of my favourite plugins to apply SEO to the site.

As the site is linked with FootballFanCast (one of the leading football blog and podcasting sites in the UK) I would highly recommend it for anyone who is working towards a carreer in football journalism.

Check it out: www.thefootballjournalist.com

Leave a Comment

Bespoke theming for WordPress Arcade sites

Date: 12th March 2009 at 7:00 pm | Filed under: blog, portfolio, themes | Author: Sam Burdge | Tags: , , , , , , , , ,

loopy1loopy2loopy4loopy3

Screenshots from the new Loopy Pursuits Arcade Site.

I have recently entered the world of Arade Website webmastering and, being the WordPress geek I clearly am, have chosen WP as the management sytem to drive my arcade sites. I have developed two new plugins WP Games Embed (released) and WP Mochi (so far unreleased) and launched my first arcade site Zap Gamez.

In the past I have had a fair few jobs designing custom / bespoke themes for WordPress blogs and for sites that use WP more as a CMS. These jobs are where most of my plugins originate from, adding custom features to sites when no existing plugin is available to achieve the same functionality.

My most recent custom theme is for the arcade site Loopy Pursuits, for which the games content is also driven by my two plugins WP Games Embed & WP Mochi. The theme is incredibly simple - no sidebar or nav bar as such, 3 basic layouts - Home page, Category/Tag/Search results page & single page view where the game itself is displayed. Apart from the formatting of the comments there is nothing about the theme which suggests it is wordpress. No 'recent posts','blogroll' or 'tag cloud' or any other content that could be associated with standard WP blog design.

The theme incorporates google advertising interspersed with the content. My approach to google advertising with arcade sites is to use predominantly image ads as gaming is very visual, and image ads seem to sit better within a very image based site layout. I also use the standard approach of identifying key placements for ads, sometimes referred to as 'Hot Spots', which are normally adjacent to key areas of the page, such as navigation, main content (i.e. the game), etc.

During the development of Loopy Pursuits the WP Mochi Plugin has come a lot closer to releaseability. It still lacks an options page which it would definitely need, but it now incorporates the Mochi Leaderboard (score board) using the Mochi Publisher Bridge, it also now has the ability to add entire directories of games automatically too!

If you are interested in getting a custom design for your WordPress blog, or if you want an arcade website set up, or if you are trying to do something different / unusual with WordPress please feel free to get in touch. I would be happy to provide a quote for any such jobs. I have been working with WordPress since version 1.2 and have set up many WP blogs in that time, I have never used a theme by someone else, custom built is the only way for me!

6 Responses to “Bespoke theming for WordPress Arcade sites”

  • Comment by العاب
    Date: April 4th, 2009 at 11:16 am

    look at my site
    its an arcade power by wordpress

  • Comment by GameGag
    Date: June 8th, 2009 at 11:18 pm

    Wow what a great looking theams, please keep up your innovative touch.

  • Comment by EnjoySilk
    Date: September 18th, 2009 at 1:22 pm

    It’s so beautiful theme!

  • Comment by Frank
    Date: January 9th, 2010 at 2:13 am

    Great theme. My site looks great with this. Thanks

  • Comment by web rs
    Date: February 1st, 2010 at 8:38 am

    How can I download this theme .. ?

  • Comment by WpArcades
    Date: July 4th, 2010 at 4:45 pm

    That looks sweet. Nice job. Wordpress is the best to make arcades on.

Leave a Comment