Adding YouTube button to TinyMCE editor

Question

I found a code set to add a YouTube button to the WP tinyMCE editor that I am now trying to incorporate into a Thematic Child theme. The code already works in a non-Thematic theme however, when I add it to the child theme functions file and include the js, not only does it not add the YouTube button, it actually makes the whole TinyMCE kitchen sink disappear. Bummer!

Is there some Thematic-specific variation in the function calls that I'm missing which might make this addition work? The project won't sink without it, but it would definitely be enhanced with it. See code below:

Function Code

<?php
// Add these functions to your functions.php file

// add the shortcode handler for YouTube videos
function addYouTube($atts, $content = null) {
extract(shortcode_atts(array( "id" => '' ), $atts));
return '<p style="text-align:center"><a href="http://www.youtube.com/v/'.$id.'"><img src="http://img.youtube.com/vi/'.$id.'/0.jpg" width="400" height="300" /><span>Watch the video</span></a></p>';
}
add_shortcode('youtube', 'addYouTube');

function add_youtube_button() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;

// Add only in Rich Editor mode
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_youtube_tinymce_plugin");
add_filter('mce_buttons', 'register_youtube_button');
}
}

function register_youtube_button($buttons) {
array_push($buttons, "|", "youryoutube");
return $buttons;
}

// Load the TinyMCE plugin : editor_plugin.js (wp2.5)
function add_youtube_tinymce_plugin($plugin_array) {
$plugin_array['youryoutube'] = get_bloginfo('template_url').'/editor_plugin.js';
return $plugin_array;
}

function my_refresh_mce($ver) {
$ver += 3;
return $ver;
}

// init process for button control
add_filter( 'tiny_mce_version', 'my_refresh_mce');
add_action('init', 'add_youtube_button');
?>

javascript

(function() {
tinymce.create('tinymce.plugins.YourYouTube', {
init : function(ed, url) {
ed.addButton('youryoutube', {
title : 'youryoutube.youtube',
image : url+'/youtube.png',
onclick : function() {
idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
var vidId = prompt("YouTube Video", "Enter the id or url for your video");
var m = idPattern.exec(vidId);
if (m != null && m != 'undefined')
ed.execCommand('mceInsertContent', false, '[youtube id="'+m[1]+'"]');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "YouTube Shortcode",
author : 'Brett Terpstra',
authorurl : 'http://brettterpstra.com/',
infourl : 'http://brettterpstra.com/',
version : "1.0"
};
}
});
tinymce.PluginManager.add('youryoutube', tinymce.plugins.YourYouTube);
})();

Any help would be appreciated.

Answer 1

The problem is that the URL to your script is pointing to the Thematic theme directory, not your child theme. Instead of:

$plugin_array['youryoutube'] = get_bloginfo('template_url').'/editor_plugin.js';

...you need:

$plugin_array['youryoutube'] = get_stylesheet_directory_uri() . '/editor_plugin.js';