141 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
+5 more
Webbu says

Hi,

I want to write this tutorial for help authors which using Zilla Shortcodes;

Step1: Open zilla-shortcodes.php and change codes below;

A – ) Code Block 1;
function add_rich_plugins( $plugin_array )
{
$plugin_array['zillaShortcodes'] = ZILLA_TINYMCE_URI . '/plugin.js';
return $plugin_array;
}

change to

function add_rich_plugins( $plugin_array )
{
if ( floatval(get_bloginfo('version')) >= 3.9){
$plugin_array['zillaShortcodes'] = ZILLA_TINYMCE_URI . '/plugin.js';
}else{
$plugin_array['zillaShortcodes'] = ZILLA_TINYMCE_URI . '/plugin.old.js'; // For old versions of WP
}
return $plugin_array;
}

B – ) Code Block 2; on line 89

wp_enqueue_script( 'zilla-popup', ZILLA_TINYMCE_URI . '/js/popup.js', false, '1.0', false );

change to

if ( floatval(get_bloginfo('version')) >= 3.9){
wp_enqueue_script( 'zilla-popup', ZILLA_TINYMCE_URI . '/js/popup.js', false, '1.0', false );
}else{
wp_enqueue_script( 'zilla-popup', ZILLA_TINYMCE_URI . '/js/popup.old.js', false, '1.0', false );
//For older versions of WP
}

Step 2: Rename these to files below;
1-) tinymce > js > popup.js to popup.old.js (keep original one for change)
2-) tinymce > plugin.js to plugin.old.js (keep original one for change)

Step 3: Change tinymce > plugin.js like sample below for new Tinymce; https://github.com/webbudesign/ZillaShortcodeWP3.9/blob/master/plugin.js

Step 4: Find and change tinymce > js > popup.js code below (line146-150);

if(window.tinyMCE)
{
window.tinyMCE.execInstanceCommand('content', 'mceInsertContent', false, $('#_zilla_ushortcode', form).html());
tb_remove();
}

change to

if(parent.tinymce)
{                parent.tinymce.activeEditor.execCommand('mceInsertContent',false,$('#_zilla_ushortcode', form).html());
tb_remove();
}

That is it. Now this shortcodes will work with old WP and new v3.9 . Hope this helps..

72 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
jezh says

Hey Webbu thanks for the tut, much appreciated ;)

I went through all the steps with a fresh download of Zilla Shortcodes, and while the button does appear, I only get two shortcodes listed in the dropdown menu – Alerts and Buttons, and when clicking on Buttons shortcode I get this warning:

Warning: Invalid argument supplied for foreach() in zilla-shortcodes-1.2\tinymce\shortcodes.class.php on line 65

Any ideas on what’s going on?

I swear they couldn’t pick a worse moment for updating the WP, all of the plugins and frameworks I started using, broke down due to TinyMCE 4.0 :D

72 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
jezh says

I see now that you listed the only two shortcodes in the dropdown, but still not sure why the warning…

28 posts
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
Softwebmedia says

Hey Webbu thanks for the tut, much appreciated ;)

I went through all the steps with a fresh download of Zilla Shortcodes, and while the button does appear, I only get two shortcodes listed in the dropdown menu – Alerts and Buttons, and when clicking on Buttons shortcode I get this warning:

Warning: Invalid argument supplied for foreach() in zilla-shortcodes-1.2\tinymce\shortcodes.class.php on line 65

You have to use exact “value” words in identifier… for example “alert” and “button”

Old

a.addWithPopup( b, "Alerts", "alert" );
a.addWithPopup( b, "Buttons", "button" );

New ( identifier: ‘alert’, identifier: ‘button’ )

{text: 'Alerts',onclick:function(){
editor.execCommand("zillaPopup", false, {title: 'Alerts',identifier: 'alert'})
}},
{text: 'Buttons',onclick:function(){
editor.execCommand("zillaPopup", false, {title: 'Buttons',identifier: 'button'})
}},

Thank you Webbu for the perfect solution for Zilla Shortcodes plugin :)

141 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
+5 more
Webbu says


Hey Webbu thanks for the tut, much appreciated ;)

I went through all the steps with a fresh download of Zilla Shortcodes, and while the button does appear, I only get two shortcodes listed in the dropdown menu – Alerts and Buttons, and when clicking on Buttons shortcode I get this warning:

Warning: Invalid argument supplied for foreach() in zilla-shortcodes-1.2\tinymce\shortcodes.class.php on line 65

You have to use exact “value” words in identifier… for example “alert” and “button”

Old

a.addWithPopup( b, "Alerts", "alert" );
a.addWithPopup( b, "Buttons", "button" );

New ( identifier: ‘alert’, identifier: ‘button’ )

{text: 'Alerts',onclick:function(){
editor.execCommand("zillaPopup", false, {title: 'Alerts',identifier: 'alert'})
}},
{text: 'Buttons',onclick:function(){
editor.execCommand("zillaPopup", false, {title: 'Buttons',identifier: 'button'})
}},
Thank you Webbu for the perfect solution for Zilla Shortcodes plugin :)

+1 right.

You’re welcome. :)

One more small tip: (For put button image icon)

Open tinymce / css / popup.css and add below line:

.mce-i-zilla_button{background-image:url(../images/icon.png)!important; background-repeat:no-repeat; background-color:transparent; background-position:center center}

Then you can change images / icon.png with your logo.

1123 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 50+ items on Envato Market
+5 more
Smartik says
Use version_compare.
if ( version_compare(get_bloginfo('version')), 3.9 '>=' ) {
72 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
jezh says

Yeah, got it now, works like a charm. Many thanks Webbu, you’re a life saver!

141 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
+5 more
Webbu says

Yeah, got it now, works like a charm. Many thanks Webbu, you’re a life saver!

Good.. :) You’re welcome.

72 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
jezh says

Did anybody who tried this fix experienced this bug – when switching between the Visual and Text editor a couple of times in TinyMCE, both toolbars become visible and I can’t access the Text editor, as if the tab button is dead. When I disable the Zilla plugin it goes back to normal…

Any ideas what might be causing this?

I tried the Zilla Shortcodes plugin fix on a fresh install and with Twentyfourteen theme…

Other than this, everything works as it should…

1 post
  • Has been part of the Envato Community for over 3 years
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Serbia
Deejan says

Thanks a lot for this tutorial Webbu

If anyone need shortcode to be inserted directly into the editor without popup can use this code inside plugin.js:

{text: 'Subtitle',onclick:function(){
    editor.execCommand("mceInsertContent", false, '[subtitle]Put Your Tittle Here.[/subtitle]')
}},

Did anybody who tried this fix experienced this bug – when switching between the Visual and Text editor a couple of times in TinyMCE, both toolbars become visible and I can’t access the Text editor, as if the tab button is dead. When I disable the Zilla plugin it goes back to normal…

Any ideas what might be causing this?

I tried the Zilla Shortcodes plugin fix on a fresh install and with Twentyfourteen theme…

Other than this, everything works as it should…

I’m getting the same bug switching between visual and the text editor

by
by
by
by
by
by