Tutorial: How to change Zilla Shortcodes for WP 3.9


#1

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…


#2

Hey Webbu thanks for the tut, much appreciated :wink:

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 :smiley:


#3

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


#4
jezh said

Hey Webbu thanks for the tut, much appreciated :wink:

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 :slight_smile:


#5
Softwebmedia said
jezh said

Hey Webbu thanks for the tut, much appreciated :wink:

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 :slight_smile:

+1 right.

You’re welcome. :slight_smile:

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.


#6

Use version_compare.

if ( version_compare(get_bloginfo('version')), 3.9 '>=' ) {

#7

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


#8
jezh said

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

Good… :slight_smile: You’re welcome.


#9

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…


#10

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]')
}},
jezh said

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


#11
Deejan said

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]')
}},
jezh said

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

The problem is below code:

  tinymce.init({
        selector: ".wp-editor-area",
        toolbar: "shortcodes",
        setup: function(editor) {
			
			}
)};

check this new plugin.js https://github.com/webbudesign/ZillaShortcodeWP3.9/blob/master/plugin.js

Hope this will solve the problem.


#12

I cannot thank you enough :slight_smile:

Works great!


#13

Thanks for your help, Webbu :wink:


#14

Thanks Webbu :slight_smile:


#15

Thank you very much, Webbu :slight_smile: Good article.


#16

Happy to help you guys… :slight_smile:


#17

very nice of you to help, thanks Webbu.


#18

This was very helpful, thank you!

I published the full list of shortcode types with the correct identifiers in tinymce/plugin.js

				{text: 'Alerts',onclick:function(){
						editor.execCommand("zillaPopup", false, {title: 'Alerts',identifier: 'alert'})
					}},
					{text: 'Buttons',onclick:function(){
						editor.execCommand("zillaPopup", false, {title: 'Buttons',identifier: 'button'})
					}},
					{text: 'Columns',onclick:function(){
						editor.execCommand("zillaPopup", false, {title: 'Columns',identifier: 'columns'})
					}},
					{text: 'Tabs',onclick:function(){
						editor.execCommand("zillaPopup", false, {title: 'Tabs',identifier: 'tabs'})
					}},
					{text: 'Toggle',onclick:function(){
						editor.execCommand("zillaPopup", false, {title: 'Toggle',identifier: 'toggle'})


#19

Hi there,

thanks a lot! Great help to adjust it.
Is it somehow possible to change the type of the button (Splitbutton) to a button containing the titel of the Button as text a width of e.g. 50px?

And is it difficult to change from Zilla shortcodes 1.0 to 2.0 or do you know any tutorial for that, too?

Thanxs a lot for your kind help.


#20

Hi there,

thanks a lot! Great help to adjust it.
Is it somehow possible to change the type of the button (Splitbutton) to a button containing the titel of the Button as text a width of e.g. 50px?

And is it difficult to change from Zilla shortcodes 1.0 to 2.0 or do you know any tutorial for that, too?

Thanxs a lot for your kind help.