I was wondering how difficult it would be to add a button to the WordPress Post Editor. I've seen a few plugins do it, but I discovered that they had to add their own version of TinyMCE to do it.
So I searched around on the internet, and found a few methods. But they either stopped working or required you to edit your quicktags.js file to work, then again after each Wordpress update. So I looked into it and I found a solution that works with the current version 3.2 and hopefully future versions without requiring you to edit or replace the quicktags file.
Before
After
Note: This code is intended to be added inside your WordPress plugin. Like I said, I'm a total noob with WordPress so I'm not sure if it would work outside of a plugin.
CSS - This CSS should be outside of the php tags
<style>
/* Simulate the input buttons styles */
#ed_toolbar button {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
min-width: 26px;
height: 24px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: #c3c3c3 1px solid;
background: url() repeat-x;
}
#ed_toolbar button:hover {
border: #aaa 1px solid;
background: #ddd;
}
/* toolbar button images in span */
#ed_toolbar button span {
display: inline-block;
background: transparent no-repeat center center;
padding: 4px 2px;
width: 16px;
height: 16px;
}
/* toolbar custom button image */
#_custom span {
background-image: url(/wp-content/plugins/my-plugin-directory/my-plugin-icon.png);
}
</style>PHP - Add this to your plugin php
<?php
add_action('admin_footer', 'my_plugin_add_button');
function my_plugin_add_button(){
echo <<<EOT
<script>/* <![CDATA[ */
var j, n,
last = edButtons.length,
tbar = '';
// add a new editor button as follows:
// edButtons[edButtons.length] = new edButton('BUTTON ID', 'BUTTON TEXT', 'OPENING TAG', 'CLOSING TAG', 'ACCESSKEY');
// Example: edButtons[edButtons.length] = new edButton('_h1', 'H1', '<h1>', '</h1>', -1);
edButtons[edButtons.length] = new edButton('_h1', 'h1', '<h1>', '</h1>', "h");
edButtons[edButtons.length] = new edButton('_h2', 'h2', '<h2>', '</h2>', -1);
edButtons[edButtons.length] = new edButton('_h3', 'h3', '<h3>', '</h3>', -1);
edButtons[edButtons.length] = new edButton('_h4', 'h4', '<h4>', '</h4>', -1);
edButtons[edButtons.length] = new edButton('_h5', 'h5', '<h5>', '</h5>', -1);
edButtons[edButtons.length] = new edButton('_h6', 'h6', '<h6>', '</h6>', -1);
edButtons[edButtons.length] = new edButton('_custom', '<button>', '[myplugin_short_code]', '', -1);
// Don't change anything below
// ***************************
for ( j = last; j < edButtons.length; j++) {
n = edButtons[j];
if (/<button>/g.test(n.display)) {
// matched opening tag => add a button
tbar += '<button id="' + n.id + '" type="button" class="ed_button" onclick="edInsertTag(edCanvas, ' + j + ');"><span></span></button>';
} else {
// add an input
tbar += '<input type="button" id="' + n.id + '" accesskey="' + n.access + '" class="ed_button" onclick="edInsertTag(edCanvas,' + j + ');" value="' + n.display.replace(/\"/g,'\"') + '" />';
}
}
document.getElementById('ed_toolbar').innerHTML += tbar;
/* ]]> */</script>
EOT;
}
?>
Here is the basic php required to obtain the server status: