I love the WordPress plugin Audio Player by 1pixelout, and highly recommend it to folk who want to present audio on their site.  I’d like to be able to offer the file for download too, though, so I’ve created a little download icon that sits beside the player.

Here’s a demo:

luscious-woman-afoot

To set the effect up:

• upload the icon to your theme’s images/ folder
• add the following code to your theme’s stylesheet
• insert the link in to your post with the audio
  • Upload
  • Edit the Link
  • Insert the audio quicktag

Upload the audio:

• Open up your post
• Click Add Audio
• Browse to the track on your hard drive, and select Insert into Post

You should now have a text link in your post which points to the audio file.

Edit the Link:

• click the link that you’ve inserted, then the Insert/Edit Link button (which looks like a chain)
• type a title like “Right Click and ‘Save As’ to download this file”
• switch to HTML mode, and add the class “audio-download” to the link:

<a class="audio-download" title="Right Click and 'Save As' to download" href="http://mysite.com.au/wp-content/uploads/my-audio-filename-goes-here.mp3">

Tip: I use the really handy TinyMCE Advanced plugin, so I replace that last step with:

• Click on the Advanced tab in the link dialog
• enter audio-download into the classes field

Insert the audio player quicktag:

• position the cursor after the link you’ve inserted
• type: [ audio:my-audio-filename-goes-here.mp3]
  • I’ve added a space after the first square bracket: be sure to remove it, and be careful not to leave any spaces after the colon!

The stylesheet code:

.audio-download {
	background: url("images/audio-download.png") no-repeat scroll 0 0 transparent;
    float: left;
    width: 29px; height: 24px;
	margin-right: 5px;

    text-decoration: none;
    text-indent: -999in;
}
.audio-download:hover {
	background-position: 0 -24px;
}

The download icon used in this tutorial:

Enjoy!

Wordpress Training Melbourne

A client wanted to be able to set a different header image for each page or post on his WordPress site, so I’ve written this function for him.

He can now set a custom image for each page header in a few steps:

• upload the cropped custom images via FTP
• set the custom field “header” in the relevant posts

Set up..

You’ll need to create the folder /wp-content/uploads/header/ and upload your default image into it.

The following function belongs in your theme’s functions.php file (you can create it if it doens’t already exist).  You’ll also need to check that your theme includes the wordpress function wp_head() in your header.php file.

Change the value my_default_image.jpg to the name of the file you uploaded.  Tip: for simplicity’s sake, don’t use spaces in the filename.

function get_custom_header() {

	global $post;

	$error_level	 = error_reporting();
	$default_folder	 = "/wp-content/uploads/header/";
	$default_image	 = "my_default_image.jpg";
	$header		 = get_post_meta($post->ID, 'header', true);
	$file		 = ABSPATH.$default_folder.$header;

	// if nothing is defined, use the default
	$header_image	 = $default_image;

	// is the field defined?
	if($header != '')

		// does the file exist?
		if(file_exists($file)) {

			// getimagesize() returns an error if the file is not an image.. keep it quiet
			error_reporting(0);

			// is it really an image?
			if(getimagesize($file))
				$header_image = $header;

			error_reporting($error_level);
		}

	print "\n\n<!-- Custom Header Image by http://memeLab.com.au -->\n";
	print "<style><!-- #logo {background: url(" . $default_folder . $header_image . ") no-repeat left top;} --></style>\n\n";
}
add_action('wp_head', 'get_custom_header');

What it does:

The function:

• checks whether a custom image was set
• ensures that the file exists, and is actually an image
• only sets the custom header if both of these conditions is true

The challenge here was in testing to see if the file was an image: the best php functions for the job are probably finfo() or exif_imagetype(), but they weren’t available on my client’s server, so I used getimagesize() instead.  Unfortunately, getimagesize() prints a warning rather than returning an errorcode if the file is not an imageimage, so I silenced the possible warning by setting then restoring error_reporting().

Of course, it can be said that a production server shouldn’t print errors, but that wasn’t my call here.

This function was developed for WordPress 2.6.3, but should run fine on anything after 2.5.1.

Wordpress Training Melbourne