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…

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!

If you create a hyperlink to a media file that can be opened within the browser such as an mp3, mpg, jpg, pdf, etc. a single left click will open the file in the web browser instead of triggering a download. To download the file you need to right click (CTRL + click for mac) and choose 'Save File As...' from the dropdown.

If your intention is to create a link for the user to download the file rather than viewing it in their browser you can do so using a simple php script. Create a file called 'download.php' and copy in the following php:

<?php
$download_file = $_GET['file'];
$download_file_name = $_GET['name'];
$handle = fopen($download_file, "r");
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$download_file_name);
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($download_file));
ob_clean();
flush();
readfile($download_file);
fclose($handle);
exit;
?>

You can then create your download links like so:

www.example.com/download.php?file=images/example.jpg&name=hello.jpg

The URL should include the path to the file to be downloaded, and the name you want to give the file. In the above example the file is 'images/example.jpg' but the name of the file downloaded by the user would be 'hello.jpg'

When using PHP headers it is important to note that the headers will only be executed if they are called before any text is output to the page. Any html, or php echo tags, before the headers will cause the headers to be ignored. A line break or space before the opening php tag will also prevent headers from working.

Using keypresses as an alternate way to to navigate through websites  is a great way to make sites more accessible. For instance pressing 'p' takes the user to the previous page, while pressing 'n' takes them to the next. The benefits of using jQuery to achieve this are:

1. Concise code
2. Easy to implement various functions on keypress
3. Works on IE, Firefox & Safari

DETECTING THE KEY CODE

To detect which key a user has pressed you need to set up a function that returns an ascii code each time a key is pressed. A full table of ascii codes is available here. The tricky part to this is that Mozilla and Safari define the value as charCode, while IE defines  it as keyCode. The following script is based on the 'n' key and 'p' key, it takes the links from the 'Previous' and 'Next' buttons on your site and changes page when the key is pressed. Also note that it is important to detect for both the lower-case and upper-case letter as the ascii codes will be different for each.

SOURCE

//process this function whenever a key is pressed
$(document).keypress(function (e) {
//Next
//if the keyCode or charCode is 110 (lower case n) or 78 (upper case N)
if (e.keyCode == 110 || e.charCode == 110 || e.keyCode == 78 || e.charCode == 78){
//grab the href attribute from the link with the id "next_link"
var next_link = $("a#next_link").attr("href");
//if the next link exists (i.e if it's not the last page)
if(next_link){
//go to the next page
window.location = next_link;
}
}
//Previous
//works exactly as the above example but for the 'p' and 'P' keys
if (e.keyCode == 112 || e.charCode == 112 || e.keyCode == 80 || e.charCode == 80){
var prev_link = $("a#prev_link").attr("href");
if(prev_link){
window.location = prev_link;
}
}

});

You must have the jQuery library installed on your site to run this script. For more info about jquery visit the site: http://jquery.com/

I was recently confronted with the problem of having a single html form with three different submit buttons, each button submitting the form data to a different php script. This is obviously impossible with html alone, as a form can only have one 'action' attribute, which dictates the URL of the file that the form's data is submitted to.

I searched around on the web for an easy way to implement this and found various examples. One of the best examples I found was on CoderLab's blog: Multiple submit buttons on a multiple blog which uses javascript to apply a different action attribute to the form depending on which button is pressed. Each button in the form has it's own onClick function like so:

<form name="myForm" id="myForm">
Search: <input type="text" id="wrdSearch"/>
<input type="button" name="google" id="google" value="Google" onClick="SendTo(this.id)"/>
<input type="button" name="msn" id="msn" value="MSN" onClick="SendTo(this.id)"/>
<input type="button" name="yahoo" id="yahoo" value="Yahoo" onClick="SendTo(this.id)"/>
</form>

(Visit the page to see the javascript that goes with it: http://blog.coderlab.us/2005/10/04/multiple-submit-buttons-in-a-form/)

As I already had jQuery installed on the site, and the CoderLab script would still need some modification to serve my specific purpose, I decided to see if I could find a simpler way to achieve a similar result using jQuery. The form on my site was a lot more complex, with many fields etc. So what I really needed was a script that would submit all the form data to each of the 3 php scripts depending on which submit button was clicked.

Firstly, I stripped the onClick functions out of the form and removed the name attributes from the buttons too, like so:

<form id="myForm" method="post">
Search: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
<input type="button" id="button3" value="Submit to script 3" />
</form>

I then wrote the following jQuery script to change the form's action attribute accordingly and submit it when each button is pressed:

$(document).ready(function(){

$("#button1").click(function(){
$('form#myForm').attr({action: "script_1.php"});
$('form#myForm').submit();
});

$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});

$("#button3").click(function(){
$('form#myForm').attr({action: "script_3.php"});
$('form#myForm').submit();
});

});

The script should work on any browser that is compatible with jQuery (see here: http://docs.jquery.com/Browser_Compatibility)

For more information on installing and using jQuery visit the website: http://jquery.com/