631 posts
  • United Kingdom
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Interviewed on the Envato Notes blog
  • Referred between 50 and 99 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
UBLThemes says

Hi Guys, with WordPress 3.9 coming out and with there being very little documentation on how to do this as its a little different to the codes used within wordpress 3.8

Most experienced wordpress developers will already know this but for those who do not and need to find a solution for the themes you have which are using shortcode generators here is a little tutorial.

Bare in mind its not oop or anything complex, this tutorial is only to show you how it can be achieved.

Here is the tutorial

I hope this helps some developers who was scratching their heads a little on this.

2 posts
  • Sold between 100 and 1 000 dollars
  • Exclusive Author
  • Has been a member for 5-6 years
  • Europe
  • Bought between 1 and 9 items
jrwebstudio says

Thank you for this post @UBLThemes. Really saved me some time :)

631 posts
  • United Kingdom
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Interviewed on the Envato Notes blog
  • Referred between 50 and 99 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
UBLThemes says

You’re welcome :)

6 posts
  • Has been a member for 2-3 years
  • Bought between 1 and 9 items
  • Exclusive Author
  • Europe
thezoc says

Thank you !

141 posts Designer & Developer
  • Elite Author
  • Has been a member for 5-6 years
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Referred between 50 and 99 users
  • Bought between 100 and 499 items
  • Author had a File in an Envato Bundle
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
Webbu says

Hi Good article but there was a wrong code. I already send a comment from your page but I think you didn’t see it. below code at the end of the page:

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 );

has to be like this

add_filter( 'mce_buttons', ubl_add_tinymce_plugin );

change to
add_filter( 'mce_buttons', ubl_add_tinymce_button );

If I didn’t remember wrong this will fix the problem.

180 posts
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Bought between 1 and 9 items
  • Has been a member for 4-5 years
  • Austria
codeex says

I tried customising your code and this part

selector: ".wp-editor-area",

causes “Visual and Text” tab not working.. any fix for this?

thanks

631 posts
  • United Kingdom
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Interviewed on the Envato Notes blog
  • Referred between 50 and 99 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
UBLThemes says

I tried customising your code and this part
selector: ".wp-editor-area",

causes “Visual and Text” tab not working.. any fix for this?

thanks

Yes I’m about to update it, sorry been busy with updating themes on all our profiles

I’ll post the fix on here in a couple of hours when I get to my mac ;)

180 posts
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Bought between 1 and 9 items
  • Has been a member for 4-5 years
  • Austria
codeex says

thanks, removing that fixed my issue.. :)

631 posts
  • United Kingdom
  • Sold between 10 000 and 50 000 dollars
  • Most Wanted Bounty Winner
  • Interviewed on the Envato Notes blog
  • Referred between 50 and 99 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
UBLThemes says

thanks, removing that fixed my issue.. :)

Sorry about the late reply, been away all weekend.

Here is the fix for the editor, the whole code:

Php side:

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_button' );

    }

    // inlcude the js for tinymce
    function ubl_add_tinymce_plugin( $plugin_array ) {

        $plugin_array['ubl_location'] = get_template_directory_uri() . '/js/Shortcodes_js-3.9.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:

/*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";    
document.getElementById("content-tmce").onclick = function(){
document.getElementById("mce_30").style.display = "block";
document.getElementById("wp-content-wrap").classList.remove("html-active");
document.getElementById("wp-content-wrap").className += " tmce-active";
}
document.getElementById("content-html").onclick = function(){
document.getElementById("mce_30").style.display = "none";
document.getElementById("wp-content-wrap").classList.remove("tmce-active");
document.getElementById("wp-content-wrap").className += " html-active";
}
    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,
                    tooltip: 'Editor Shortcodes',
                    classes: 'ublnewlist',
                    onselect: function(e) {
                    }, 
                    values: [

                        //SHORTCODE STARTS
                        {text: 'H1 Title', onclick : function() {

                            var selected = tinyMCE.activeEditor.selection.getContent();
                            var content = '';
                            var h1titleclass = prompt("Would you like a custom class?", "");

                            if(h1titleclass != ''){
                                h1titleclass = ' class="'+h1titleclass+'"';
                            }

                            if (selected !== '') {
                                content = '[h1'+h1titleclass+']' + selected + '[/h1]';
                            } else {
                                content = '[h1'+h1titleclass+'][/h1]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);
                        }},
                        // END SHORTCODE

                        /*

                        Keep adding adding shortcodes as shown on the tutorial here

                        */
                    ]

                });

          });

        }

    });

})();

I hope this helps guys :)

2 posts
  • Has been a member for 0-1 years
matrasoriginal says

Hi,

thank you for the tutorial. It seems like text editor is not working. When I change to ‘Text’ tab, content is still formated like in Visual editor.

by
by
by
by
by
by