At work, I received a project for a vlog (video blog).

Each WordPress blog post would have at most one video (some blog posts might have no video). Also, videos would be hosted either on an online video hosting site (i.e. Youtube, Vimeo..) or self hosted and accessed through a URL to a video ASX file or direct to a WMV/AVI. Lastly, a page that displays only the videos posted with no other blog post information was also needed.

Video would be:

• from embed code from youtube, vimeo, etc
• a url to a ASX/WMV/AVI file
• or both

Since a page that only displays videos is needed:

• creating a WordPress loop to display post excerpts would not work since the video would be removed and no text from the post should be displayed

So I figured using custom write panels would be the best way to achieve all this and still make it easy for the end user.

For creating the custom write panel, I referenced this blog post: Revisited: Creating Custom Write Panels in WordPress. I pasted the final code to my functions.php file unchanged except for my two fields, which I named videoasx and embedcode. So my custom write panel looks like so:

The embed code will be pasted as provided by Youtube/Vimeo/etc, which is all the code needed to properly display a video. For ASX/WMV/AVI urls, additional embed code is needed around the url to properly display an embedded video player. Prioritizing is needed to display a video if:

• neither embed code nor asx url is populated, then display nothing
• only one, either the embed code or asx url is populated, then display the video
• both are filled, display only the asx url video

So I came up with the following PHP code to be added in the theme files where ever the video should be displayed:

<?php if (!empty($data[ 'videoasx' ])) {
	echo '<OBJECT   ID="WinMedia"  classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"  CODEBASE= "http://activex.microsoft.com/activex/  controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"  width=480 height=295 standby="Loading Microsoft  Windows Media Player components..." type="application  /x-oleobject"><PARAM NAME="FileName"  VALUE="';
	echo $data[ 'videoasx' ];
	echo '"><PARAM NAME="AutoStart" Value="false"><PARAM NAME="ShowControls" Value="true"><Embed type="application/x-mplayer2"    pluginspage=    "http://www.microsoft.com/Windows/MediaPlayer/"    src="';
	echo $data[ 'videoasx' ];
	echo '"    Name=MediaPlayer    AutoStart=0    Width=480    Height=295    autostart=1    ShowControls=1  </embed></OBJECT>';	}
elseif (!empty($data[ 'embedcode' ])) {
	echo $data[ 'embedcode' ]; }
else {
echo ''; } ?>

This basically says:

1. If the asx url is filled, then display the video with this embed code and the url provided,
2. if the asx url is empty, then display the embed code,
3. if the embed code is empty too, then display nothing.

Which is quite different from the short php code that was provided in the article I referenced that will display just the contents of either field with no additional wrapping code or logic to display just one.

<?php echo $data[ 'videoasx' ]; ?>

or

<?php echo $data[ 'embedcode' ]; ?>

For creating the video only page, I created a WordPress loop that had nothing but my php code within. Something like:

<?php if ( have_posts()) : ?>
<?php while (have_posts()) : the_post(); $data = get_post_meta( $post->ID, 'key', true );?>
	<div class="video">
		<?php if (!empty($data[ 'videoasx' ])) {
			echo '<OBJECT   ID="WinMedia"  classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"  CODEBASE= "http://activex.microsoft.com/activex/  controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"  width=480 height=295 standby="Loading Microsoft  Windows Media Player components..." type="application  /x-oleobject"><PARAM NAME="FileName"  VALUE="';
			echo $data[ 'videoasx' ];
			echo '"><PARAM NAME="AutoStart" Value="false"><PARAM NAME="ShowControls" Value="true"><Embed type="application/x-mplayer2"    pluginspage=    	"http://www.microsoft.com/Windows/MediaPlayer/"    src="';
			echo $data[ 'videoasx' ];
			echo '"    Name=MediaPlayer    AutoStart=0    Width=480    Height=295    autostart=1    ShowControls=1  </embed></OBJECT>';	}
		elseif (!empty($data[ 'embedcode' ])) {
			echo $data[ 'embedcode' ]; }
		else {
		echo ''; } ?>
	</div>
<?php endwhile; ?><?php else : ?>
	<div class="post">
		<?php _e('Sorry, but you are looking for something that isn&#39;t here.'); ?>
	</div>
<?php endif; ?>

And that’s that. Hope this can help you somehow.

I’ll do my best to help answer any questions. Should you have any, please do not hesitate to leave a comment.

In my other blog, Pet Turtles And More, I wanted to display one image from the content of my posts and be able to over-ride that image with another, if I so choose, within the WordPress loop .

The result I wanted (which is what I got) looks like this:

The first image in the post is displayed or, if I designate an alternate, it will display an alternate image.

The first step I did was find a way to extract the image from a post. I found this in the WordPress.org support forums: Retrieve First Image From Post.

This worked beautifully, but noticed that it:

1. didn’t give me an easy way to override the image if I didn’t like the one it chose (which is the first image)
2. if I had an advertisement, even one that is generated by an iframe, it would take the image from the ad and display it instead, and
3. if I use shortcode to display a gallery (like what is used to display a NextGen Smooth gallery, it wouldn’t be able to extract a photo

So I looked for a way to add an image through the use of custom fields. I found number 9 from Custom Fields Hacks For WordPress to be most useful.

Then I did some nifty PHP to combine the two hacks and came out with this code.

Paste this into your theme’s functions.php file:

function get_custom_field_value($szKey, $bPrint = false) {
	global $post;
	$szValue = get_post_meta($post->ID, $szKey, true);
	if ( $bPrint == false ) return $szValue; else echo $szValue;
}

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// no image found display default image instead
if(empty($first_img)){
$first_img = get_custom_field_value('mythumb');
}
return $first_img;
}

And use this within the WordPress loop for where you want to display the image:

<?php
$customField = get_post_custom_values("mythumb");
if (isset($customField[0])) {
    echo '<img src="';
    echo "".$customField[0];
	echo '" />'; }
  else{
echo '<img src="';
echo (catch_that_image());
echo '" />'; }
 ?>

The code assumes that you are using a custom field called “mythumb” and that you are using the full URL path of the image for “mythumb”.

What the code does is it first tells WordPress to display the image in “mythumb” then if that custom field is empty, it will then display the first image in the post. In effect, it displays the first image in a post or the one in a custom field.

A nice WP hack indeed!!

I’ve been wanting to go to a WordCamp since I got into blogging…it took a few short years and now I’m finally going.

WordCamp is going to be two whole conference days of nothing but WordPress. I like the sound of that…

I even know one of the speakers!

Sometimes, I work with WordPress all day for work – then when I get home – I spend even more time working with WordPress for myself!!

Check out the Word Camp NYC 2009 page.