HOW TO CREATE A DROPDOWN BOX IN WORDPRESS 3.9 & TINYMCE 4

Hi everyone, just recently we are having to update all our WordPress themes and found next to no documentation on how to do this.

Please bare in mind this is very basic and to make more complex options will need customising a little.

Ok lets start with the basics and lets make sure the php side is done.

Either input the following details within your functions.php or create a new php file and include them into your theme functions.

Here is the code, I will talk you through it below the code:

function ubl_add_tinymce() {
 
 global $typenow;
 if(!in_array($typenow, array('post', 'page'))) return ;
 
 add_filter( 'mce_external_plugins', 'ubl_add_tinymce_plugin' );
 add_filter( 'mce_buttons', ubl_add_tinymce_plugin );
 
}

First we created a functions called ubl_add_tinymce.

Within this function we have a global typenow variable which finds the current post type.

Then we do a if statement which asks if its within the post or page post type.

Now we know that the type is either a post or a page we will now add the filters which are the mce_external_plugins and the mce_buttons.

Within these we have the function names of the following functions we are going to create.

// inlcude the js for tinymce
function ubl_add_tinymce_plugin( $plugin_array ) {
 
 $plugin_array['ubl_location'] = get_template_directory_uri() . '/js/Shortcodes_js.js';
 return $plugin_array;
 
}

So the ubl_add_tinymce_plugin has a perimeter which is the plugin array.

Within the function we have the plugin array with the name of the tinymce plugin and then we link it to the javascript directory where the javascript will be!

In this tutorial we are creating it within the theme which is why we are using the get_template_directory_uri() function which gets the url of your theme and then the path for the file is set after.

Then you just return the plugin array.

// Add the button key for address via JS
function ubl_add_tinymce_button( $buttons ) {
 
 array_push( $buttons, shortcodes );
 return $buttons;
 
}

As you can see within the above code we have create a new function which is ubl_add_tinymce_button with a perimeter of buttons.

we then use array_push php function which just pushes the button we are creating onto the buttons array, we then call our button a name.

Then we finally return it.

Last bit for the php side is adding a wordpress action so it makes this all work.

We want it called within the header so we use admin_head, and then we call our function ubl_add_tinymce which is our function we created first.

add_action( 'admin_head', ubl_add_tinymce );

That's the php part done now.

Now we focus on the javascript side.

First thing is first we setup the javascript and add a little jshint so its compliant.

/*global tinyMCE, tinymce*/
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:50 */
(function() {
"use strict"; 
 
//code will be going here!!!!!
 
})();

So where it states code will be going here we need to create init function with a couple of perimeters and then setup of the editor.

tinymce.init({
 selector: ".wp-editor-area",
 toolbar: "shortcodes",
 setup: function(editor) {
 //code will go here next!!!!
 }
 
});

So our first perimeter is the selector, this is basically the class of the editor you are wanting to add this option. So we just want it within the main wordpress editor which is .wp-editor-area.

The reason for this, is within some page options, custom posts within posts etc, some themes use text areas to give some inputs, well if you just input selector: "textarea" then all textareas will be chosen to add a tinymce editor which you may not want.

Anyway the next is the toolbar name which was called Shortcodes within the button area.

Last is the setup of the editor.

This is where the rest of the code goes.

So within the //code will go here next section we add this:

tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
 //code will go here.
});

We have created are now telling the tinymce to add a plugin manager to the tinymce, we give it the location to the javascript file by giving it the variable name we setup in ubl_add_tinymce_plugin which was ubl_location.

Then we start a function which gives the editor and url as perimeters.

As normal within the //code goes here add the following code.

editor.addButton( 'shortcodes', {
 type: 'listbox',
 text: 'Shortcodes',
 icon: false,
 onselect: function(e) {}, 
 values: [
 ]
});

We add the listbox button by creating a new button within the editor.addButton function with the Shortcodes as the name and then giving the following perimeters.

Type is the type of button, we are wanting a listbox (dropdown box) so we give the type a listbox.

The text is the text you are wanting to use for the button.

You can have an icon by adding the location instead of using false.

Then there is the onselect section which we are not using within this tutorial.

The values perimeter section is the main section of your shortcodes and I will show you how to do 2 shortcodes, 1 which has no content selection and 1 with content which is wrapped (selected).

to add values you need to do the following:

{text: 'H1 Title', onclick : function() {
 
 tinymce.execCommand('mceInsertContent', false, '[h1][/h1]');
 
}},

We start with braces and then within them we have a text area and then a value section.

The text is simply the dropdown name, as you can see we have called this a H1 Title.

Then within it we have a tinymce.execCommand function which was available within tinymce 3, with the mceInsertContent function perimeter, we set the next perimeter to false and then we give the shortcode within single quotes, you can use double quotes.

Now for the selected content section, under the section you have just created we just simply do:

{text: 'H2 Title', onclick : function() {
 
 var selected2 = tinyMCE.activeEditor.selection.getContent();
 var content2 = '';
 var h2titleclass = prompt("Would you like a custom class?", "");
 
 if(h2titleclass != ''){
 h2titleclass = ' class= "'+h2titleclass+'"';
 }
 
 if (selected2 !== '') {
 content2 = '[h2'+h1titleclass+']' + selected2 + '[/h2]';
 } else {
 content2 = '[h2'+h1titleclass+'][/h2]';
 }
 
 tinymce.execCommand('mceInsertContent', false, content2);
}},

Same as above we have a text name, then the onclick function.

We give a selected2 variable the selected text tinymce function which again was given within the tinymce 3.

I thought we would show you how to create a popup so you can have attributes to your shortcodes.

So to do this we set a variable called h2titleclass and used a prompt javascript function, then we asked a question which the user would answer and the answer would be stored within the variable.

The we do a simple if else about if the variable is empty or not.

then we do another if else statement to see if there was any content selected.

Then last but not least we added the insert execCommand function again.

So the full code is as follows:

PHP CODE:

function ubl_add_tinymce() {
 
 global $typenow;
 if(!in_array($typenow, array('post', 'page'))) return ;
 
 add_filter( 'mce_external_plugins', 'ubl_add_tinymce_plugin' );
 add_filter( 'mce_buttons', ubl_add_tinymce_plugin );
 
}
 
// inlcude the js for tinymce
function ubl_add_tinymce_plugin( $plugin_array ) {
 
 $plugin_array['ubl_location'] = get_template_directory_uri() . '/js/Shortcodes_js.js';
 return $plugin_array;
 
}
 
// Add the button key for address via JS
function ubl_add_tinymce_button( $buttons ) {
 
 array_push( $buttons, shortcodes );
 return $buttons;
 
}
 
add_action( 'admin_head', ubl_add_tinymce );

JAVASCRIPT VERSION:

/*global tinyMCE, tinymce*/
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:50 */
(function() {
"use strict"; 
 
 tinymce.init({
 selector: ".wp-editor-area",
 toolbar: "shortcodes",
 setup: function(editor) {
 
 tinymce.PluginManager.add( 'ubl_location', function( editor, url ) {
 
 editor.addButton( 'shortcodes', {
 type: 'listbox',
 text: 'Shortcodes',
 icon: false,
 onselect: function(e) {
 }, 
 values: [
 
 {text: 'H1 Title', onclick : function() {
 tinymce.execCommand('mceInsertContent', false, '[h1][/h1]');
 }},
 
 {text: 'H2 Title', onclick : function() {
 
 var selected2 = false;
 var content2 = selected2 = tinyMCE.activeEditor.selection.getContent();
 var h2titleclass = prompt("Would you like a custom class?", "");
 
 if(h2titleclass != ''){
 h2titleclass = ' class= "'+h2titleclass+'"';
 }
 
 if (selected2 !== '') {
 content2 = '[h2'+h2titleclass+']' + selected2 + '[/h2]';
 } else {
 content2 = '[h2'+h2titleclass+'][/h2]';
 }
 
 tinymce.execCommand('mceInsertContent', false, content2);
 }},
 
 ]
 
 });
 
 });
 
 }
 
 });
 
})();

Thats the conclusion to this tutorial.

I hope you liked it, if you did and it helped please like and share on the buttons below :)