I'd like to customize my Wordpress site by extending the TinyMCE editor with a custom button.
Now I can find many tutorials on how to implement such "plugins", but neither of them seem to mention how to install it into Wordpress. It must be trivial to do so, but I can't seem to do it...
Lets say I have the following two files compressed into a zip file, but when I attempt to upload it to Wordpress I get:
Unpacking the package…
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin install failed.
Return to Plugins page
This is functions.php
<?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" class="aligncenter" /><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');
?>
And editor_plugin.js
(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);
})();
The solution was that I was missing a header for the PHP file.
<?php
/**
* Plugin Name: Name Of The Plugin
* Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
* Description: A brief description of the Plugin.
* Version: The Plugin's Version Number, e.g.: 1.0
* Author: Name Of The Plugin Author
* Author URI: http://URI_Of_The_Plugin_Author
* License: A "Slug" license name e.g. GPL2
*/