148 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 5 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 5 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…

29 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Had an item featured on Envato Market
  • Has collected 10+ items 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 :)

148 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.

1272 posts
  • Has been part of the Envato Community for over 4 years
  • 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 5 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!

148 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 5 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

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