653 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+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
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 5 years
+1 more
jrwebstudio says

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

653 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+5 more
UBLThemes says

You’re welcome :)

6 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 2 years
  • Sells items exclusively on Envato Market
thezoc says

Thank you !

149 posts Designer & Developer
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has sold $125,000+ on Envato Market
  • Sells items exclusively on Envato Market
+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.

288 posts WeNotMe
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has referred 1+ members
  • Elite Author: Sold more than $75,000 on Envato Market
+3 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

653 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+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 ;)

288 posts WeNotMe
  • Has been part of the Envato Community for over 4 years
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has referred 1+ members
  • Elite Author: Sold more than $75,000 on Envato Market
+3 more
codeex says

thanks, removing that fixed my issue.. :)

653 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 100+ items on Envato Market
+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
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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by