689 posts
  • Affiliate Level 3
  • Author Level 6
  • Beta Tester
  • Collector Level 4
+5 more
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
  • Author Level 3
  • Collector Level 1
  • Exclusive Author
  • 6 Years of Membership
jrwebstudio
says

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

689 posts
  • Affiliate Level 3
  • Author Level 6
  • Beta Tester
  • Collector Level 4
+5 more
UBLThemes
says

You’re welcome :)

6 posts
  • Exclusive Author
  • 3 Years of Membership
  • Collector Level 2
thezoc
says

Thank you !

164 posts Designer & Developer
  • Trendsetter
  • Elite Author
  • 6 Years of Membership
  • Author Level 8
+6 more
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.

607 posts WeNotMe
  • 5 Years of Membership
  • Elite Author
  • Author Level 7
  • Trendsetter
+4 more
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

689 posts
  • Affiliate Level 3
  • Author Level 6
  • Beta Tester
  • Collector Level 4
+5 more
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 ;)

607 posts WeNotMe
  • 5 Years of Membership
  • Elite Author
  • Author Level 7
  • Trendsetter
+4 more
codeex
says

thanks, removing that fixed my issue.. :)

689 posts
  • Affiliate Level 3
  • Author Level 6
  • Beta Tester
  • Collector Level 4
+5 more
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
  • 1 Year of Membership
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