Sometimes people need to insert download file (or more than just one) either to Post or Page. In that case you will use Add Media button on the top text editor (the very last, fourth icon of an Upload/Insert set). Normally, after you publish Post or Page, file download will become nothing but a standard link within the rest of the text. And this is definitely not what you want, especially when you have something really important to be downloaded. What you want is to be able to position attached file within the content and possibly use appropriate file type icon.
So here is our task:

• Seek Post or Page content for specific file type(s)
• If any found, save to variable for later use
• Eliminate download link from original content because we don’t need duplicates

For a case you want to use this method I strongly advise you to either insert files for download on the very top or bottom of Post/Page content. For example, after you are finished with text writing, Add Media below everything. This is how you can keep downloadable files ‘out of the context’. Remember, we are about to trim download link from original content. For a case link is found in the middle of the sentence it may happen part of the sentence marked as a link will be missing.

<?php
	// find attached files - NOT IMAGES!
	$content = get_the_content();
	$attached_files = array(); // files array
	$attached_extensions = array(); // extensions may differ
	$attached_string = array(); // file name or string
	$arr_include = array( 'zip', 'rar', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'ppd', 'txt', 'odf' ); // which file types to watch for
	// matches, browse through all the links first, after that filter matches only
	preg_match_all( '|<a.*?href=[\'"](.*?)[\'"].*?>(.*?)<.*?a>|i', $content, $match_extension );
	// 1 - path to file
	// 2 - file string
	if( $match_extension[ 1 ] ) {
		$c = 0;
		while( $c < count( $match_extension[ 1 ] ) ) {
			$bits = explode( '.', $match_extension[ 1 ][ $c ] );
			if( in_array( $bits[ count( $bits ) - 1 ], $arr_include ) && strlen( $bits[ count( $bits ) - 1 ] ) > 2 ) {
				array_push( $attached_files, $match_extension[ 1 ][ $c ] );
				array_push( $attached_extensions, $bits[ count( $bits ) - 1 ] );
				array_push( $attached_string, $match_extension[ 2 ][ $c ] );
                             // remove duplicates from the content
				$content = preg_replace( '|<a.*?href=[\'"](' . $match_extension[ 1 ][ $c ] . ')[\'"].*?>(' . $match_extension[ 2 ][ $c ] . ')<.*?a>|i', '', $content );
			}
			$c ++;
		}
		// throw out modified content
		echo $content;
	} else {
		// throw out original content
		the_content();
	}
?>

How to display files for download

OK, in case there are downloadable files attached either to Post or Page we have them saved in $attached_files array for further usage. Let’s say we want to make ordered list of files on the bottom of the content. This list will also have a title reading “Related documents”.

<?php
	if( count( $attached_files ) > 0 ) {
	// make the list of attached documents
?>
	<div class="documentList">
		<h2>Related documents</h2>
		<ul class="doclist">
<?php
		$i = 0;
		$l = count( $attached_files );
		while( $i < $l ) {
			echo '<li class="' . $attached_extensions[ $i ] . '"><a href="' . $attached_files[ $i ] . '">' . $attached_string[ $i ] . '.' . $attached_extensions[ $i ] . '</a></li>';
			$i++;
		}
?>
		</ul>
	</div>
<?php
	}
?>

CSS

This tutorial would not be complete without using appropriate styles. Remember, we want to be able to display document type icon as well. Note the class assigned to list item! It’s different for different file type.

.doclist a[href$=".txt"]		{ background-image: url(images/icon_txt.gif); }
.doclist a[href$=".doc"],
.doclist a[href$=".docx"],
.doclist a[href$=".odf"]		{ background-image: url(images/icon_doc.gif); }
.doclist a[href$=".xls"],
.doclist a[href$=".xlsx"]		{ background-image: url(images/icon_xls.gif); }
.doclist a[href$=".ppd"],
.doclist a[href$=".ppt"]		{ background-image: url(images/icon_ppt.gif); }
.doclist a[href$=".pdf"]		{ background-image: url(images/icon_pdf.gif); }
.doclist a[href$=".zip"]		{ background-image: url(images/icon_zip.gif); }
.doclist a[href$=".rar"]		{ background-image: url(images/icon_rar.gif); }

As you probably guess previous class declaration will not work for the most stupid Browser ever made on this planet – IE6. So here is the same, supposed to be saved in separate css file specific for IE6:

.doclist .txt a			{ background-image: url(images/icon_txt.gif); }
.doclist .doc a,
.doclist .docx a,
.doclist .odf a			{ background-image: url(images/icon_doc.gif); }
.doclist .xls a,
.doclist .xlsx a 			{ background-image: url(images/icon_xls.gif); }
.doclist .ppt a,
.doclist .ppd a 			{ background-image: url(images/icon_ppt.gif); }
.doclist .pdf a 			{ background-image: url(images/icon_pdf.gif); }
.doclist .zip a 			{ background-image: url(images/icon_zip.gif); }
.doclist .rar a 			{ background-image: url(images/icon_rar.gif); }

That’s it. Hopefully someone will find this method useful. I already have and decided to share it with community.

Share with others...