Sometimes you may need to add a button in the WordPress editor. This can be for practical reasons such as when you have shorted a little complicated to wear. For example, if our shortcode is going to have multiple and complicated parameters like a post id, category id, etc.
Let’s start from the observation that we want to set up a shortcode that will display the last articles of a category and a type of content in particular. I’m not going to ask our users to know their taxonomy or term ids and also the content type slugs.
So a little button in the editor can be useful.
Table of Contents
The code for the button
TinyMce allows through an API to do all kinds of things, like additional styles, and in our case add a button with a particular behavior.
This addition happens on the javascript side and the processing can happen on the PHP side, for the part I like to go through the Thickbox of WordPress and a page in ajax, with an interface and a real form so that it is the simplest for the user and especially not to load additional libraries for the user interface.
For the PHP code, it is quite simple to set up but it is, of course, necessary to differentiate the administration from the client part. To do this we will need a javascript file, an image for the button but also a file that will take care of the admin part and the client part. To do so, I would make a little zip with all of this at the end of the article!
PHP
The basis of the plugin is as follows, it is like that of the article talking about setting up an extension :
<?php /*
Plugin Name: My tinyMce Button
Plugin URI: http://nicolas-juen.fr
Description: Add tinymce button
Version: 1.0
Author: Rahe
Author URI: https://blog.nicolas-juen.fr
*/
define('MTMCE_URL', plugins_url('/', __FILE__));
define('MTMCE_DIR', dirname(__FILE__));
define('MTMCE_VERSION', '1.0');
require_once (MTMCE_DIR . DIRECTORY_SEPARATOR . 'inc' . DIRECTORY_SEPARATOR . 'class.client.php');
function MyTinyMceButton_Init() {
global $myTinyMce;
// Load translations
load_plugin_textdomain('mytmceb', false, basename(rtrim(dirname(__FILE__), '/')) . '/languages');
// Load client
$myTinyMce['client'] = new myTinyMceButton_Client();
// Admin
if (is_admin()) {
require_once (MTMCE_DIR . DIRECTORY_SEPARATOR . 'inc' . DIRECTORY_SEPARATOR . 'class.admin.php');
$myTinyMce['admin'] = new myTinyMceButton_Admin();
}
}
add_action('plugins_loaded', 'MyTinyMceButton_Init');
?>Admin class:
<?php class myTinyMceButton_Admin{
function __construct() {
// init process for button control
add_action( 'admin_init', array (&$this, 'addButtons' ) );
add_action( 'wp_ajax_mybutton_shortcodePrinter', array( &$this, 'wp_ajax_fct' ) );
}
/*
* The content of the javascript popin for the insertion
*
*/
function wp_ajax_fct(){
?>
<h2><!--?php _e("Category: ", 'mytmceb');?--><!--?php wp_dropdown_categories(array('name' =--> 'mcb_category', 'id' => 'mcb_category'));?>
<!--?php _e("Number of posts: ", 'mytmceb');?-->
<input id="mcb_number" type="number" min="-1" name="mcb_number" value="-1"><input class="button-primary" id="mcb_button"
type="submit" name="mcb_button" value="<?php _e(">">
<!--?php die();<br ?--> }
/*
* Add buttons to the tiymce bar
*/
function addButtons() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return false;
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', array (&$this,'addScriptTinymce' ) );
add_filter('mce_buttons', array (&$this,'registerTheButton' ) );
}
}
/*
* Add buttons to the tiymce bar
*
*/
function registerTheButton($buttons) {
array_push($buttons, "|", "mybutton");
return $buttons;
}
/*
* Load the custom js for the tinymce button
*
*/
function addScriptTinymce($plugin_array) {
$plugin_array['mybutton'] = MTMCE_URL. '/inc/ressources/tinymce.js';
return $plugin_array;
}
}
?>So in describing what’s going on, we have two actions:
- Adding the button in the editor
- Adding the ajax action (if you want to know how it works, you can refer to the article that explains ajax in WordPress )
Simply, the action in ‘ admin_init ‘ allows you to check if the user has sufficient rights and above all add two filters to set up the js file and also add our button to the list of TinyMCE buttons. You should know that each button must have a unique slug! Here we use the slug ‘ mybutton ‘. So our javascript file which manages the behavior of the button is included only if the button appears in the list of buttons.
The wp_ajax_fct method just displays our form to choose the category we want to use to display our articles but also the number of articles to display.
Javascript
For javascript, all you need is a single file for it to work:
(function() {
var called = false;
tinymce.create('tinymce.plugins.mybutton', {
init : function(ed, url) {
ed.addButton('mybutton', {
title : 'My button',
image : url + '/images/mybutton.png',
cmd : 'mceMyButtonInsert',
});
ed.addCommand('mceMyButtonInsert', function(ui, v) {
tb_show('', ajaxurl + '?action=mybutton_shortcodePrinter');
if(called == false) {
called = true;
jQuery('#mcb_button').live("click", function(e) {
e.preventDefault();
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, mybutton_create_shortcode());
tb_remove();
});
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mybutton', tinymce.plugins.mybutton);
})();
function mybutton_create_shortcode() {
return '[my-listing category="' + jQuery('#mcb_category').val() + '" posts_per_page="' + jQuery('#mcb_number').val() + '"]';
}
A quick tour of what’s going on, so we add a special action on our button with the tinymce.PluginManager.add (‘mybutton’, tinymce.plugins.mybutton); and we declare the function associated with tinymce.create (‘tinymce.plugins.mybutton’,, it also adds the button in the bar. As you can see, we can put an image (very recommended) on our button so that it is easily located in the editor. We also add the effect that the click on the button will trigger with cmd: ‘mceMyButtonInsert’, and with ed.addCommand (‘mceMyButtonInsert’, we catch the call to be able to trigger the function that interests us at this time.
In our case we call thickbox with our ajax action and after we add the live-action on the validation button of our small farm in the thickbox. On clicking, we simply launch an insertion of content by calling our function mybutton_create_shortcode which will return the string to insert to TinyMCE.
In our case, we insert the shortcode with the selected arguments.
The client part
For the client part, we will just add the shortcode and interpret it:
<?php class myTinyMceButton_Client {
function __construct() {
add_shortcode( 'my-listing' , array( &$this, 'shortcode' ) );
}
function shortcode( $atts ) {
extract( shortcode_atts( array(
'category' => 0,
'posts_per_page' =>5,
), $atts ) );
if ( empty( $category ) )
return false;
ob_start();
$q_posts = new WP_Query( array( 'post_type' => 'post', 'category__in' => $category, 'posts_per_page' => (int)$posts_per_page ) );
if( $q_posts->have_posts() ) {
?>
<ul><ul><?php while( $q_posts->have_posts() ) {</ul></ul>
<ul><ul>$q_posts->the_post();</ul></ul>
?>
<!--?php </p-->
}
?>
<?php wp_reset_post_data();
}
$content = ob_get_contents();
ob_clean();
return $content;
}
}
?>So for the shortcode, we just add the shortcode, we check that the category has been provided and we display the number of articles requested in a ul / li.
Conclusion
Your users need interfaces and this is one of the possibilities to give the keys to your users to add “dynamic” content in their article or other. In addition to the shortcodes, the display can be altered later or adapted.
It is also the assurance of having more or less control over the effect and presentation of the data. Adding a button doesn’t require a lot of code so make your users’ lives easier.
I hope this article helped you to know about how to add a custom button in WordPress editor. Feel free to share anything regarding the article in the comment below.