<?php
	the_content(); // this is your standard way to output Post or Page content
	// now the test
	$var_content = get_the_content();
	echo $var_content;
?>

It looks like paragraphs and break rules (<p> and <br />) are gone. Maybe some other tags too but I have noticed those two. I suppose not so many developers use get_the_content() function, however some of my themes (this one too) needs it in order to extract images or documents out of Post/Page content and still keep text formatted. We all know that the_excerpt() function will strip down each and every html tag so there’s no sense in using it, especially not in Post/Page details template.

Solution

It’s true there’s a solution at codex.wordpress.org but for those who have hard time to find it – here it is:

<?php
	the_content(); // this is your standard way to output Post or Page content
	// now the test which works
	$var_content = get_the_content();
	$var_content = apply_filters( 'the_content', $var_content );
	$var_content = str_replace( ']]>', ']]>', $var_content );
	echo $var_content;
?>

It should be OK now. Just wanted to pay your attention to this issue since WordPress developer team didn’t fix it until 2.8.4 – currently available for download. Maybe next time.

The code

Please note that I have created new WordPress template file and save it as ’sitemap.php’ in theme’s root folder. For more info regarding custom WP template files and how to use them, please refer to this page.
Also, another important info is that this code will work only for Custom Permalink structure set to /%category%/%postname%/.

<?php
    // easy job for pages...
    echo '<ul>';
    echo '<li><h1>PAGES:</h1></li>';
    echo '<li><ul>';
    wp_list_pages( 'title_li=&echo=1' );
    echo '</ul></li></ul>';

    // categories sitemap will be tough...get'em all
    $subcats = wp_list_categories( 'echo=0&use_desc_for_title=0&title_li=' );
    // anybody there?
    preg_match_all( '|<a.*?href=[\'"](.*?)[\'"].*?>|i', $subcats, $m );
	if( !$m[ 1 ] ) {
		// no categs, subcategs or whatsoever...
		echo "There are no categories added to your WordPress site.";
	} else {
		$arr_categories = array();
		$arr_orig_urls  = array();
		foreach( $m[ 1 ] as $key => $value ) {
			// $value will keep the URL, extract category slug
			$arr_of_url = explode( '/', $value );
			array_pop( $arr_of_url ); // remove empty
			// push the last
			array_push( $arr_categories, $arr_of_url[ count( $arr_of_url ) - 1 ] );
			// get its URL
			array_push( $arr_orig_urls, $value );
		}
	}

	if( count( $arr_categories ) > 0 ) {
		// now we have entire logical structure of all categories
		// let's try to get ID for each of these
		echo '<ul>';
		echo '<li><h1>CATEGORIES:</h1></li>';
		$i = 0;
		while( $i < count( $arr_categories ) ) {
			// shortcut by WP built-in
			$idObj = get_category_by_slug( $arr_categories[ $i ] );
			$catid = $idObj->term_id;

			// check whether this is root category. If true, make an outset in list, otherwise leave inset.
			if( $idObj->category_parent > 0 ) echo '<li><ul>';

			// get category real name and link
			$cat_real_name = $wpdb->get_var( "SELECT name FROM $wpdb->terms WHERE term_id=" . $catid );
			echo '<li><h2><a href="' . $arr_orig_urls[ $i ] . '">' . $cat_real_name . '</a></h2></li>';

			// generate list of posts
			echo '<li><ul>';
			query_posts( 'cat=' . $catid  . '&order=ASC' ); // change to DESC - if required
			while( have_posts() ) : the_post();
?>

<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php
			endwhile;
			echo '</ul></li>';
			if( $idObj->category_parent > 0 ) echo '</ul></li>';
			$i ++;
		}
	echo '</ul>';
	}
?>

Hopefully you will find this code useful. Any comment/suggestion regarding improvement is welcome!

How to use it?

Just for demo purpose upload all the files (and ’script’ folder as well!) to the root of your theme, it doesn’t matter which one. Now you need to call ‘WP_flash_holder.php’ in Browser but full path to this file must be used because we are currently out of WP ‘native environment’:
http://yourdomain.com/wp-content/themes/your_theme_name/WP_flash_holder.php.
For a case you are about to include WP_flash.swf in any existing template file of your theme (for example sidebar.php), things will work normally.

NOTE:

Open WP_flash_holder.php and change path to match your domain and theme name otherwise it’ll not work. For example the line reading:

<script src="http://your_domain.com/wp-content/themes/your_theme_name/script/swfobject.js" type="text/javascript"></script>

As well as:

var so = new SWFObject( "http://your_domain.com/wp-content/themes/your_theme_name/WP_flash.swf", "wpflash", "550", "400", "8" );

…must be replaced with your own data!

Files in package…

• slidestyle.css
  Flash Player supports a subset of properties in the original CSS1 specification only so basic text formatting can be done here. Not much but enough for this tutorial.
• WP_flash_holder.php
  This file is here just to properly include/embed Flash file into HTML page. In source code you can read how to include Flash in native WordPress environment (for example sidebar.php).
• script > swfobject.js
  As already mentioned, swf must be properly embed so this is nothing but a piece of javascript code required to avoid page errors and Browser warnings.
• WP_flash.fla and WP_flash.swf
  Source and rendered file used for demonstration purpose.

It’s good to know

I guess some of you already plan to make a first Flash theme so it’s good to know that each and every WP theme must fulfill minimum requirements. Theme folder MUST contain the following files: index.php, style.css and functions.php (screenshot.png). In that case you can keep all of your Flash styles in style.css and embed Flash into index.php. Remember, it’s a long way to develop Flash theme and this tutorial is just a little tiny foot step on the long path up to the hill. Enjoy!

Otherwise spoken, how to extract certain image out of the post and display it out of context.

So how the hell WordPress can know which image is supposed to represent teaser image if there’s at least one image extra attached to the very same Post? Well, that’s the trick. We must use different “insert” method. Let’s assume all other images are clickable and users are able to see full size for each of them. In order to properly extract teaser image from Post later in frontend we’ll use the following method to insert it first:

If you take a look at the HTML code after, you’ll note that this image is not enclosed with <a></a> tags, right? Let’s now take a look how to extract such image from the content…

Extracting teaser image from Post

The basic idea is to grab teaser thumbnail from the_content() and replace it with – nothing, empty string. Remember, we don’t want to have the same image displayed twice within Post.

<?php
    // get the first image out of content, prevent double image display
    $path = ""; // teaser image path
    $content = get_the_content(); // get Post content entirely
    // grab fist image (teaser thumb) by pattern
    $frst_image = preg_match_all( '|<img.*?src=[\'"](.*?)[\'"].*?>|i', $content, $matches );
    // any image there?
    if( $frst_image > 0 ) {
    	$path = $matches[ 1 ][ 0 ]; // we need the first one only!
    	// replace with empty string in order to avoid duplicates
    	$content = preg_replace( '|<img.*?src=[\'"](' . $path . ')[\'"].*?>|i', '', $content );
    }
    if( $path ) {
    	// teaser image found! display it now or leave in variable for later
?>
    	<img src="<?php echo $path; ?>" alt="<?php echo get_the_title(); ?>" class="thumbnail" />
<?php
    	$path = "";
    } else {
    	// teaser image not found. replace with dummy graphic
?>
    	<img src="<?php echo bloginfo( 'template_directory' ) . ( '/images/no_image.jpg' ); ?>" alt="<?php echo get_the_title(); ?>" class="thumbnail" />
<?php
    	$path = "";
    }
?>

There’s one little tip at the end: Insert teaser images before any other Post content (text or other images). It’s good idea to keep things organized.

And here it comes sequential navigation as quite handy solution. I like to use it in conjunction with breadcrumbs so there’s no chance site visitor gets ‘lost’. As you know, in WordPress categories and pages can have ‘children’, up to 999 levels – as I recall – please correct me if I am wrong. Of course, you’ll never need so many navigation levels but I’m sure 3 are quite often.

Before showing the code, I would like to explain the logic behind sequential navigation. Here’s an illustration – just to show you what we are up to.

Our goal is to display only the first level children of selected category, no matter how ‘deep’ we are.

Parent category (or page) will always be displayed as a title, indicating current menu set. Hopefully it does make sense to you. It doesn’t? Later you will be able to read how easily is to implement it into your own site…

The code

Code is well commented so there shouldn’t be a problem to understand the logic…

<?php
	// is there a page or category? both may have childeren
	if( is_category() ) {
		// if this category has childeren
		$categ_object = get_category( get_query_var( 'cat' ), false );
		$list_subcats = wp_list_categories( 'title_li=&depth=1&echo=0&child_of=' . (int)$categ_object->cat_ID );
		// wordpress never returns null or empty string. If children, <a> tag will be found, otherwise string is returned.
		preg_match_all( '|<a.*?href=[\'"](.*?)[\'"].*?>|i', $list_subcats, $m );
		if( !$m[ 1 ] ) {
			// there are no subcategories. Why?
			// this is either the last child or this category really doesn't have subcategories
			// last child must have a parent, right?
				if( (int)$categ_object->category_parent > 0 ) {
					// we'll need parent category name for the title, extract name via category ID
					$parent_cat_name = $wpdb->get_var( "SELECT name FROM $wpdb->terms WHERE term_id=" . (int)$categ_object->category_parent );
?>
					<div class="box">
					<h1><?php echo $parent_cat_name; ?></h1>
					<ul class="subnavigation">
					<?php wp_list_categories( 'title_li=&depth=1&child_of=' . (int)$categ_object->category_parent ); ?>
					</ul>
					</div>
<?php
				} // else...no else! This category really doesn't have child categories.
		} else {
			// ohoho! ...but here are some. List them all...
?>
			<div class="box">
			<h1><?php echo $categ_object->cat_name; ?></h1>
			<ul class="subnavigation">
			<?php wp_list_categories( 'title_li=&depth=1&child_of=' . (int)$categ_object->cat_ID ); ?>
			</ul>
			</div>
<?php
		}
	}
	// almost the same for page hierarchy.
	if( is_page() ) {
		// here we go...just do the same job
		$page_object = get_post( get_query_var( 'page' ), OBJECT );
		$list_subpages = wp_list_pages( 'title_li=&depth=1&echo=0&child_of=' . (int)$page_object->ID );
		// wordpress never returns null or empty string. If children, <a> tag will be found, otherwise string is returned.
		preg_match_all( '|<a.*?href=[\'"](.*?)[\'"].*?>|i', $list_subpages, $ms );
		if( !$ms[ 1 ] ) {
			if( (int)$page_object->post_parent > 0 ) {
				$parent_post_name = $wpdb->get_var( "SELECT post_title FROM $wpdb->posts WHERE ID=" . (int)$page_object->post_parent );
?>
				<div class="box">
				<h1><?php echo $parent_post_name; ?></h1>
				<ul class="subnavigation">
				<?php wp_list_pages( 'title_li=&depth=1&child_of=' . (int)$page_object->post_parent ); ?>
				</ul>
				</div>
<?php
			}
		} else {
?>
				<div class="box">
				<h1><?php echo $page_object->post_title; ?></h1>
				<ul class="subnavigation">
				<?php wp_list_pages( 'title_li=&depth=1&child_of=' . (int)$page_object->ID ); ?>
				</ul>
				</div>
<?php
		}
	}
?>

And this is it; save, and see how it works. You may want to replace style/class name for div in ‘navigation.php’ but this should be an easy part.

<?php
	$numposts = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'" );
	echo $numposts;
?>

What’s the purpose of embeded Flash file?

Are you about to replace standard, HTML navigation with Flashed one? Do you want to make some recent posts slider in sidebar? Maybe some cool tag cloud in footer? Flash can be added whenever you like and do whatever you like. The most important fact about Flash is that it’s capable to load and process XML and that’s exactly how we are about to exchange data between WordPress and Flash. Once the data has been loaded into Flash options to display it on some non-standard and interesting way are endless.

Our task: Create latest Posts list

For the demonstration purpose we are about to generate the list of latest Posts and send it to embeded Flash file. Each list item will have a title, post date, number of comments, thumbnail image (if any), post category and a link back to post details.

Preparing backend file

Let’s create and save in our theme’s folder new file called ‘flash_recent.php’. I don’t know which theme you are using but it doesn’t matter in deed, it’ll work with any properly activated WordPress theme. Our new file should be able to connect to database and get required information. In the same time we’ll output results in standard XML format readable to Flash.

<?php

 // get connected
  require_once( '../../../wp-config.php' );


 // variables
  $xml = "";
  $num_of_posts_to_display = 5;


 // query posts
  query_posts( 'showposts=' . $num_of_posts_to_display . '&post_type=post&post_status=publish&order=DESC' );


 if( have_posts() ) : while( have_posts() ) : the_post();
  // category ID
  $category = get_the_category();
  // get first thumbnail path
  preg_match_all( '|<img.*?src=[\'"](.*?)[\'"].*?>|i', $post->post_content, $m );
  // format XML
  $xml .= '<item>';
  $xml .= '<title>' . $post->post_title . '</title>';
  $xml .= '<postlink>' . get_permalink() . '</postlink>';
  if( $m[ 1 ] ) $xml .= '<image>' . $m[ 1 ][ 0 ] . '</image>';
  $xml .= '<category>' . $category[ 0 ]->cat_name . '</category>';
  $xml .= '<catid>' . bloginfo( 'home' ) . '?cat=' . $category[ 0 ]->cat_ID . '</catid>';
  $xml .= '<date>' . date( 'M j, Y', strtotime( $post->post_date ) ) . '</date>';
  $xml .= '<comments>' . $post->comment_count . '</comments>';
  $xml .= '<excerpt>' . get_the_excerpt() . '</excerpt>';
  $xml .= '</item>';
  endwhile; endif;


 // output results
  echo $xml;


?>

In order to check whether an output is OK you should type in Browser’s address bar full path to ‘flash_recent.php’ file. For eample: http://yourdomain.com/wp-content/themes/some_themeName/flash_recent.php.

What next?

Well, next time we gonna learn how Flash can handle parsed XML. I bet many of you already know how but for the sake of those who doesn’t – expect to find an answer in part#2 of this tutorial.

Get cat ID by name

<?php
	$category_slug = "myCategory"; // just an example name/slug
	$category_ID = $wpdb->get_var( "SELECT term_id FROM $wpdb->terms WHERE slug = '" . $category_slug . "'" );
?>

Get cat name by ID

<?php
	$category_ID = 1; // just an example ID
	$category_name = $wpdb->get_var( "SELECT name FROM $wpdb->terms WHERE term_id = " . $category_id );
?>

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

Simple, quick and easy solution

The main question was how to make an easy and acceptable solution even for an average WP theme maker? I guess an average WP theme maker is at least familiar with basic WP functions (methods, properties, objects) and knows how to include external file. On the other side are theme end users and these people are mostly tied to a common article publish routine. According to that fact, adding sidebar content to Post or Page must be as easy as mouse click.

Code snippets

After thinking a little bit I’ve came across quite acceptable solution: code snippets. More precisely, one snippet = one page which can be included in sidebar whenever is required, straight from Post/Page Write panel. Such ‘tiny’ pages should be placed in separate folder and share common prefix in file name because we are about to ease our job for the future. Let’s now consider the following situation…
As a theme coder you would like to enable your theme user an easy way to include latest comment in sidebar. You’ve made a piece of code which may look like this:

<?php
	$cout_comments = 0; // internal counter
	$show_comments = 1; // how many latest comments to display?
	// get all approved comments but in reverse order; the latest one on top
	$comment_array = array_reverse( get_approved_comments( $post->ID ) );
	// any comments?
	if( $comment_array ) {
		foreach( $comment_array as $comment ) {
			// we need $show_comments comment(s) only
			if( $cout_comments < $show_comments ) {
                     // use predefined styles, widgets use'em as well
?>
			<div class="box">
			<h1>Latest comment by <?php comment_author_link(); ?></h1>
			<p>
<?php
			// get user gravatar - if any
			$comment_text = get_comment_text();
			$author_email = $comment->comment_author_email;
			echo get_avatar( $author_email, '80' );
			echo $comment_text;
?>
			</p>
			</div>
<?php
			break;
			}
		$cout_comments ++;
		}
	}
?>

Now we need to save our code snippet. As already mentioned before, we’ll create new folder within our theme folder named ‘pluggers’ and save this code snippet as ‘plugger_LatestComment.php’. All other code snippets will be saved in ‘pluggers’ folder and use ‘plugger_’ in name prefix. However, if you don’t like to use phrase ‘plugger’ – go ahead and make up your own. In this tutorial we’ll keep using ‘plugger’.

Custom Write panel

Let’s now build user-friendly interface in Admin panel which will be used to insert our code whenever is required. This part is based on great tutorial published by WeFunction and I strongly recommend to read it for better understanding of what we are about to do here. The following code must be included in functions.php, that’s how we make it available to Post or Page write panel.

<?php
$array_values_post_page = array();
function sidebar_meta_boxes() {
	global $post, $array_values_post_page;
	// anything already writen in Custom Field?
	if( get_post_meta( $post->ID, 'plugger_value', false ) ) {
		$plugger_values_post_page = implode( ",", get_post_meta( $post->ID, 'plugger_value', false ) );
	} else $plugger_values_post_page = "";
	echo '<p style="padding: 5px 0;"><em>Tick the checkbox for each Plugger you want to be visible in sidebar, next to this article/page. Add sorting number to change the appearance order.</em></p><h4>List of available Pluggers:</h4><hr style="border: 1px dashed #F1F1F1; height: 1px;" />';
	echo "<input type='hidden' name='plugger_value' id='plugger_value' value='" . $plugger_values_post_page . "' size='33'></input>";
	if( $plugger_values_post_page != "" ) {
		$array_values_post_page = explode( ",", $plugger_values_post_page );
	}
	// get all available Pluggers from a certain folder
	$path = TEMPLATEPATH . "/pluggers";
	$dir = opendir( $path );
	while( ( $plugger_file = readdir( $dir ) ) !== false ) {
	if( $plugger_file != "." && $plugger_file != ".." ) {
		$data_aray = explode( "_", $plugger_file );
		if( $data_aray[ 0 ] == "plugger" ) {
			$checked = "";
			$suffix = explode( ".", $data_aray[ 1 ] );
			$val = "";
			$in_position = key( preg_grep( "/{$suffix[ 0 ]}/i", $array_values_post_page ) );
			// pluggers are sorted by numbers, sorting position writen after plugger name like pluggerName:n
			if( strlen( $in_position ) > 0 ) {
				$in_p_arr = explode( ":", $array_values_post_page[ $in_position ] );
				$val = $in_p_arr[ 1 ];
				$checked = ' checked="checked"';
			}
			echo "<div style='width: 266px; clear: both; overflow: hidden; padding: 5px 0; border-bottom: 1px solid #F1F1F1;'>";
			echo "<div style='float: left; display: inline; width: 170px; padding-top: 8px;'>";
			echo "<input style='margin-right: 5px;' type='checkbox' id='" . $suffix[ 0 ] . "' name='plugger_names' value='" . $suffix[ 0 ] . "' " . $checked . " onchange='addPostPagePluggers()' />";
			echo "<label for='" . $suffix[ 0 ] . "'>" . $suffix[ 0 ] . "</label>";
			echo "</div>";
			echo "<div style='float: left; display: inline; width: 95px;'>";
			echo "<input type='text' style='margin-right: 5px; width: 26px;' name='sort_" . $suffix[ 0 ] . "' id='sort_" . $suffix[ 0 ] . "' value='" . $val . "' size='2' onchange='addPostPagePluggers()'></input>";
			echo "<label for='sort_" . $suffix[ 0 ] . "'>sort num.</label>";
			echo "</div>";
			echo "</div>";
		}
	}
	}
	closedir( $dir );
?>
<script language="javascript" type="text/javascript">
function addPostPagePluggers() {
	// watch for checkbox activity and sort out elements for the frontend
	var val = "";
	var old = document.getElementById( "post" ).plugger_value; // hidden field which holds an array of name-value pairs
	var cbs = document.getElementById( "post" ).plugger_names; // an array (names) of available pluggers represented via check boxes
	for( var n = 0; n < cbs.length; n ++ ) {
		if( cbs[ n ].checked ) {
		var sort_field = eval( "document.getElementById( 'post' ).sort_" + cbs[ n ].id );
		var sort_num = parseInt( sort_field.value );
		if( isNaN( sort_num ) ) sort_field.value = n + 1;
			val += cbs[ n ].value + ":" + sort_field.value + ",";
		} else {
			var sort_field = eval( "document.getElementById( 'post' ).sort_" + cbs[ n ].id );
			sort_field.value = "";
		}
	}
	var temp = val.split( "," );
	temp.pop();
	// sort by :n
	temp.sort( function compareStrnum( a, b ) { return a.replace( /[^.0-9]/g, "" ) - b.replace( /[^.0-9]/g, "" ) } );
	old.value = temp.toString();
}
</script>
<?php
}
// save settings on Admin level routine
function create_meta_box() {
	if ( function_exists('add_meta_box') ) {
		add_meta_box( 'sidebar_meta_boxes', 'Pluggers to include in Page Sidebar', 'sidebar_meta_boxes', 'page', 'side', 'high' );
		add_meta_box( 'sidebar_meta_boxes', 'Pluggers to include in Post Sidebar', 'sidebar_meta_boxes', 'post', 'side', 'high' );
	}
}

function save_postdata( $post_id ) {
	global $post, $array_values_post_page;
	if ( 'page' == $_POST[ 'post_type' ] ) {
		if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id;
	} else {
		if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id;
	}
	$data = $_POST[ 'plugger_value' ];
	if( get_post_meta( $post_id, 'plugger_value' ) == "" ) {
		add_post_meta( $post_id, 'plugger_value', $data, true );
	} elseif( $data != get_post_meta( $post_id, 'plugger_value', true ) ) {
		update_post_meta( $post_id, 'plugger_value', $data );
	} elseif( $data == "" ) {
		delete_post_meta( $post_id, 'plugger_value', get_post_meta( $post_id, 'plugger_value', true ) );
	}
}

add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_postdata' );
?>

What this code is supposed to do? First, it’ll seek for all files in ‘pluggers’ folder whose name starts with ‘plugger_’. In the same time it checks whether a current Post or Page already has any of available Pluggers aassigned to it. Settings are kept in Custom Field of a current Post or Page so every time you are about to edit one of those the list of available Pluggers and already selected ones is properly populated.
Javascript watches for all the changes made to the list and sorts it out immediately. That’s how we can get all of selected Pluggers properly sorted in frontend. The last two functions are used to insert our meta box to Post/Page sidebar write panel and save settings to database.

Getting values in frontend

So far we’ve created Plugger unit called ‘plugger_LatestComment.php’ and meta box which will be displayed in Post/Page write panel (sidebar). Now we just have to get certain Custom Field value out of the Post/Page and display it in frontend. For a case you didn’t notice in save_postdata() function is the name of our Custom Field plugger_value which is either supposed to be created, updated or deleted – according to meta box selected value(s). Here is the piece of code used to pull required meta values out of the Post or Page:

<?php 
	$post_data = get_post_custom_keys( $post->ID );
	foreach( $post_data as $postKey ) {
	// remove orphans
	$value_trimmed = trim( $postKey );
	if ( '_' == $value_trimmed{0} ) continue;
		// what we have here?
		$postKey_data[ $postKey ] = get_post_meta( $post->ID, $postKey );
		// check for checkbox values
		if( $postKey == "plugger_value" ) {
			// compile file name
			$filename_arr = explode( ",", $postKey_data[ $postKey ][ 0 ] );
			$c = 0;
			while( $c < count( $filename_arr ) ) {
				$file_to_include = explode( ":", $filename_arr[ $c ] );
				// include in sidebar
				include( TEMPLATEPATH . "/pluggers/plugger_" . $file_to_include[ 0 ] . ".php" );
				$c ++;
			}
		}
	}
?>

For a case you want to display Pluggers above other widgets in sidebar – paste the code on the top of sidebar-single.php or sidebar-page.php. Otherwise paste it below widget reserved area – if any.