Manually Adding Flowplayer to a WordPress Theme

this tutorial teaches you a quick, and easily customisable way to get flowplayer working in any of your wordpress themes with videos uploaded through the wordpress admin panel.

People have been asking me how I got the excellent flash video player Flowplayer working in my WordPress themes on both BrightSky and Mixtape so I decided to do a post on it.

To do this tutorial I’m assuming that you are familiar with how WordPress themes are made and the how Template Hierarchy works.

First thing we need to do is download Flowplayer. When you unzip the file you will see it contains 2 swf files (one is the player and one is the control bar) and an example folder. Copy the 2 swf files and the flowplayer-3.1.4.min.js from the example folder into the folder of the WordPress theme you want to add it to.

Before we start coding lets upload a video and attach it to a post. Log into your WordPress admin panel and hit add post. Add a title and some body text then click the upload media link above the editor. Use this to upload your video and hit save. Don’t insert it into the post.

Now to the coding. First we need to attach the javascript file. Open the header.php file from your theme and copy the following line of code into it above the </head> tag:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/flowplayer-3.1.4.min.js"></script>

Next we need to get it to play our video through the player. Open the single.php file in your WordPress theme and copy the following code into it:

<?php $videos =& get_children( 'post_type=attachment&post_mime_type=video&post_parent=' .$post->ID );
if(!empty($videos)){
    foreach($videos as $video){
        $src=$video->guid;
    }
    ?>
    <a href="<?php echo $src; ?>" style="display:block;width:520px;height:330px" id="player"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/placeholder.jpg" alt="video placeholder" /></a>
    <!-- this will install flowplayer inside previous A- tag. -->
    <script>
        flowplayer("player", "<?php bloginfo('stylesheet_directory'); ?>/flowplayer-3.1.5.swf");
    </script>
<?php } ?>

This code can be placed anywhere within The_Loop. What this is doing is utilising a function called get_children(). This function is taking the id of the current post and checking the database for children of it. We’re also passing the parameters post_type=attachment which ensures only attached media items are returned and post_mime_type=video which makes sure only attached videos are returned. The parameter post_parent is how it’s passing the id of the current post. All the information returned is saved as the variable $videos.

Next is an if statement. This is used to make sure that the player is only added to the page if there is a video attached to the post.

The $videos variable contains an array of the objects that are attached to the current post with the array keys set to the id of the attachment. As we don’t know this id we need to use a for loop to get access to the url of the video. This is what the next piece of code is doing.

Now we have a variable called $src which contains the url of our video. The a tag is where the video is going to be embedded. You can see that it has some inline style elements for changing the size of the player. The image tag is set to display an image called placeholder.jpg that you can create and place into the images folder in your theme. This image is displayed when the page loads first and the player is only loaded when the image is clicked.

The last piece of the code is the player script. This is what is actually embedding the player into the page. This is highly customisable and you can find loads of examples here.

Now go and check the post page on your blog to see your video. BAM! You now have Flowplayer working as part of your WordPress theme. You can see it working on this site right here.

Its worth noting that this code only displays the latest video attached to the post as I only needed one video to be attached per post. This code could be easily modified to embed multiple players. If you have any questions please leave a comment.

Tags: Flowplayer/Wordpress
Posted in Blog by Abban |