Building a Simple Vimeo Wordpress Plugin

The other day I needed to embed a Vimeo clip into my blog. This should have been a straight for­ward process, given the small amount of code that was needed. Well, the more I explored the var­i­ous options for get­ting Vimeo into Word­press, the more I real­ized that there really aren’t any great solu­tions. First, if you copy the code from Vimeo’s site and paste it into your post, the embed will work and video will play. How­ever, if you switch between the rich text edi­tor and the code view, Word­press changes the <embed> tag to an <img> tag and your video is no more—making it impos­si­ble to edit the post later on. Sec­ond, the code that comes from Vimeo is not valid XHTML. This is a prob­lem, as I don’t want non-​​standard code on my site. Finally, the selec­tion of plu­g­ins that allow embed­ding media in your posts are just too bloated. Most allow you to embed every video for­mat under the sun—making the plu­g­ins large—and have clunky inter­faces and tags.

My solu­tion was to write a sim­ple Word­press plu­gin that allows tag-​​based embed­ding of Vimeo videos [vimeo 1821974] and out­puts valid XHTML to the browser. No other for­mats are sup­ported (although they could eas­ily be added) and there is no admin menu. This also serves as a great intro­duc­tion to build­ing small plu­g­ins for Word­press.

Thanks to Martín Aberastegue and his WP-​​Vidz plu­gin for the inspi­ra­tion.

1. Cre­ate a new file—locally or on your server—and name it vimeo.php (or what­ever you want, really). Open the empty the file in your favorite text edi­tor.

2. Add the required header to the file so Word­press knows a lit­tle more about the plu­gin. This is done using stan­dard PHP block com­ments. Don’t for­get to add the open­ing <?php tag so Word­press and your server know what to do with the code.

   <?php
   /*
   Plugin Name: Simple Vimeo
   Plugin URI: http://siarto.com/2008/10/02/vimeo-wp-plugin/
   Description: Valid XHTML Vimeo embed tag
   Author: Jeff Siarto
   Version: 0.1
   Author URI: http://siarto.com
   */

3. This plu­gin has two parts, the main vimeo_code() func­tion that defines the tag and an add_filter() call that reg­is­ters the new tag with Word­press.

4. Cre­ate a new func­tion below the header com­ment block called vimeo_code() that takes a sin­gle argu­ment named $data. This argu­ment will hold the tag that we use in our posts to embed a Vimeo video—in this case: [vimeo 1821974].

   function vimeo_code($data) {
   
   }

5. Add two vari­ables within the vimeo_code() func­tion to store the height and width of the video (this is an area that could use an admin GUI, but remem­ber, we’re going for sim­plic­ity here). Set the height and width to val­ues that fit well on your page. Remem­ber to pre­serve the aspect ratio of your clip so that the video doesn’t look squashed or stretched.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
   }

6. Next, we need some code that takes our Vimeo tag and out­puts the proper XHTML to the browser, dis­play­ing the cor­rect video based on the ID. To do this we declare a vari­able named $data (the same name as our func­tion argu­ment) and use PHP’s preg_replace() func­tion to extract the ID. $pattern and $replacement are just place­hold­ers that we’ll change fur­ther along in the tuto­r­ial.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace($pattern, $replacement, $data);
   }

   The first argu­ment for preg_replace() is a reg­u­lar expres­sion that matches the for­mat of our tag (this will replace the $pattern place­holder). This will look for a pat­tern in a chunk of text and if it finds a match, replace it with our spec­i­fied text.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", $replacement, $data);
   }

   The sec­ond argu­ment is a string con­tain­ing the code that will be inserted when our plu­gin finds the spe­cial Vimeo tag in our posts. This is basi­cally an XHTML-​​valid ver­sion of the embed code you get from Vimeo. The last argu­ment—$data just tells the func­tion what to per­form the first two actions on. In our case, we want to replace the text that is passed to our vimeo_code() func­tion.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
           width=\"$video_width\"
           height=\"$video_height\"
           data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
           type=\"application/x-shockwave-flash\">
               <param name=\"allowfullscreen\" value=\"true\" />
               <param name=\"allowscriptaccess\" value=\"always\" />
               <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
           </object>\n", $data
       );
   }

7. The last line in our vimeo_code() func­tion just returns the value of $data. This sends our object code to the browser for dis­play.

   function vimeo_code($data) {
       $video_width = 450;
       $video_height = 340;
       $data = preg_replace("~\[vimeo (.*?)\]~i", "<object
           width=\"$video_width\"
           height=\"$video_height\"
           data=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\"
           type=\"application/x-shockwave-flash\">
               <param name=\"allowfullscreen\" value=\"true\" />
               <param name=\"allowscriptaccess\" value=\"always\" />
               <param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com\" />
           </object>\n", $data
       );
       return $data;
   }

8. The very last snip­pet of code needed to make this plu­gin work is a call to the add_filter() Word­press func­tion. This just tells Word­press that our vimeo_code() func­tion should be exe­cuted when­ever the the_content tem­plate tag is used. Make sure you also close your script with a ?> tag.

   add_filter('the_content', 'vimeo_code');
   ?>

9. Save this file and place it in your plu­g­ins direc­tory. Once the plu­gin is acti­vated, you can begin using the spe­cial tag [vimeo 1821974] (replac­ing the ID with the one of your video) in your posts to prop­erly embed Vimeo media on your blog.

   

Down­load the com­pleted vimeo.php plu­gin file.

tagged: plugin, vimeo, wordpress