Get the Official WPSaviour App Now!

BlogTutorials

WordPress 3.9+ TinyMCE 4 Tweaks: Adding Styles, Buttons, Fonts, Drop-downs & Pop-Ups

Thought-about one in every of my favorite updates in WordPress 3.9 was making the TinyMCE mannequin 4.zero core. The model new TinyMCE seems to be like a look cleaner (truly matches the WP dashboard) and it has some very good added efficiency. A lot of my outdated themes and plugins wanted to be updated to work with the model new TinyMCE so I spent some time digging by the API and figuring some cool stuff out. Beneath I’ll give you some examples on how one can lengthen the efficiency of the TinyMCE. I’m not going to walk you via the entire steps or what the code means exactly (that’s meant for builders) nonetheless will give you the exact code you’ll copy/paste in your theme or plugin after which tweak accordingly.

Together with Font Dimension & Font Family Selects

By default the Custom-made Fonts and font sizes is not going to be added into the TinyMCE editor. The function beneath will add every of these dropdowns to the far left of the editor inside the second row. Merely change the place it says ‘mce_buttons_2’ to ensure that you it in a particular row (ex: use ‘mce_buttons_3’ for the third row).

// Enable font measurement & font family selects inside the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Dimension Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Together with Custom-made Font Sizes

By default the font sizes are set to pt values which isn’t always supreme. I favor to utilize pixel values (12px, 13px, 14px, 16px..and so forth) and to supply further decisions for grater flexibility. The function beneath will alter the default font measurement decisions inside the dropdown selector.

// Customise mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Together with Custom-made Fonts

The default font decisions inside the font family selector are all “web-safe” fonts by default, nonetheless what within the occasion you wanted in order so as to add further fonts to the selector? Maybe some Google Fonts? We’ll it’s very simple have a look on the occasion beneath.

// Add custom-made Fonts to the Fonts document
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,events;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;E-book Antiqua=e e book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impression=affect,chicago;Picture=picture;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Events New Roman=events new roman,events;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

Uncover how I added “Lato” to the document inside the code above? It’s that simple! In my Full WordPress theme I actually loop by any custom-made font’s used on the situation as outlined inside the theme panel and add them to the select discipline so that they’re moreover obtainable whereas enhancing your posts/pages (sweet). Nonetheless the code ONLY adverts the font-family to the drop-down it acquired’t magically load the script so that when you change your textual content material inside the editor you’ll actually see that custom-made font utilized to it…That’s what the code beneath does!

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
	function wpex_mce_google_fonts_styles() {
	   $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
           add_editor_style( str_replace( ',', '%2C', $font_url ) );
	}
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );

Enable the Codecs (sorts) Dropdown Menu & Add New Sorts

Consider the “Sorts” dropdown in WP 3.8? That was pretty cool! You would possibly use it in order so as to add some cool programs to be used contained in the submit editor (I apply it to WPSaviour actually for buttons, colored spans, bins..and so forth). We’ll in WP 3.9 you’ll nonetheless add sorts, nonetheless, it has been renamed inside the new TinyMCE 4.zero to “Codecs” so it actually works a tiny bit completely totally different. Beneath is an occasion of learn the way to permit the Codecs dropdown and likewise add some new objects to it.

WordPress TInyMCE Formats Dropdown Menu

Enable the Codecs Dropdown Menu

That’s actually accomplished within the an identical methodology earlier to WP 3.9 nonetheless I’m sharing incase you didn’t know learn the way to do it.

// Add Codecs Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
	function wpex_style_select( $buttons ) {
		array_push( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons', 'wpex_style_select' );

Add New Objects to Codecs

Together with new objects is large easy. Please uncover how I’ve added “$settings[‘style_formats_merge’] = true;” to the code beneath, this makes sure your edits are added to the codecs dropdown menu along with any others – don’t go overwriting the entire issue (presumably totally different plugins must make use of it as correctly).

// Add new sorts to the TinyMCE "codecs" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of newest sorts
		$new_styles = array(
			array(
				'title'	=> __( 'Custom-made Sorts', 'wpex' ),
				'objects'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'programs'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'programs'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge outdated & new sorts
		$settings['style_formats_merge'] = true;

		// Add new sorts
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

Together with A Straightforward MCE Button

Together with a model new button to the TinyMCE editor is especially useful for shortcodes, on account of as a client you don’t have to remember any shortcodes you’ll merely click on on a button and it inserts it. I’m not saying in order so as to add 100’s of buttons to the TinyMCE for your entire shortcodes (I hate when builders try this, it’s such harmful apply and seems horrible) nonetheless within the occasion you add 1 or only a few I’ll let it transfer ? In case you want to add a bunch, then it is best to create a submenu as outlined inside the half that follows.

WordPress MCE New Button

PHP Code – Declare the model new MCE plugin in WP

This code will declare your new MCE plugin it’s best to positively change the state of affairs of the javascript file “mce-button.js” to match the state of affairs of your file (which I presents you the code for as correctly inside the subsequent subsection) along with clearly rename the prefix “my” to at least one factor further distinctive!

// Hooks your options into the fitting filters
function my_add_mce_button() {
	// confirm client permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// confirm if WYSIWYG is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'my_register_mce_button' );
	}
}
add_action('admin_head', 'my_add_mce_button');

// Declare script for model new button
function my_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
	return $plugin_array;
}

// Register new button inside the editor
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}

JS Code – Add the button to the MCE

This js code goes inside the js file registered inside the snippet above inside the “symple_shortcodes_add_tinymce_plugin” function. This might add a model new textual content material button that claims “New Button” into your editor and when clicked it will insert the textual content material “WPSaviour.com is superior!” (in any case).

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton('my_mce_button', {
			textual content material: 'New Button',
			icon: false,
			onclick: function() {
				editor.insertContent('WPSaviour.com is superior!');
			}
		});
	});
})();

Add A Custom-made Icon To Your New MCE Button

Above I confirmed you learn the way so as to add a model new button that will present as “New Button” inside the editor, this generally is a bit lame…So the altered code will current you learn the way so as to add your private custom-made icon.

Load a stylesheet alongside together with your CSS

Use this function to load a model new stylesheet for use in your admin panel – some plugins/themes could already be together with a stylesheet so in case your theme/plugin is doing that skip this and easily add your custom-made CSS and tweak the js (confirmed beneath).

function my_shortcodes_mce_css() {
	wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

Your Custom-made CSS

That’s the CSS in order so as to add the the stylesheet loaded beforehand.

i.my-mce-icon {
	background-image: url('YOUR ICON URL');
}

Tweak your Javascript

Now simple tweak the javascript which you added beforehand to remove the textual content material parameter and instead of setting the icon to false give it a custom-made classname.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			icon: 'my-mce-icon',
			onclick: function() {
				editor.insertContent('WPSaviour.com is superior!');
			}
		});
	});
})();

Together with A Button With Submenu

MCE Button Submenu

Earlier I mentioned that together with a ton of newest icons to the TinyMCE bar is a foul idea (and it is) so strive the code beneath to see how one can edit the javascript to indicate a submenu in your custom-made button. In case you want to see it in movement strive my Symple Shortcodes Video.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			textual content material: 'Sample Dropdown',
			icon: false,
			variety: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPSaviour.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPSaviour.com is awesome!');
							}
						}
					]
				},
				{
					textual content material: 'Merchandise 2',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPSaviour.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPSaviour.com is awesome!');
							}
						}
					]
				}
			]
		});
	});
})();

Together with A Pop-Up Window To Your Button on Click on on

Inside the occasion above chances are you’ll uncover that every button merely inserts the textual content material “WPSaviour.com is superior!” which is cool, nonetheless what about making a pop-up window the place a client can alter what’s being inserted into the textual content material? Now which may be sweet! And it’s one factor I’ve added to mannequin 1.6 of my Symple Shortcodes, making the plugin far more user-friendly.

WordPress MCE Pop-up Window

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			textual content material: 'Sample Dropdown',
			icon: false,
			variety: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Pop-Up',
							onclick: function() {
								editor.windowManager.open( {
									title: 'Insert Random Shortcode',
									body: [
										{
											type: 'textbox',
											name: 'textboxName',
											label: 'Text Box',
											value: '30'
										},
										{
											type: 'textbox',
											name: 'multilineName',
											label: 'Multiline Text Box',
											value: 'You can say a lot of stuff in here',
											multiline: true,
											minWidth: 300,
											minHeight: 100
										},
										{
											type: 'listbox',
											name: 'listboxName',
											label: 'List Box',
											'values': [
												{text: 'Option 1', value: '1'},
												{text: 'Option 2', value: '2'},
												{text: 'Option 3', value: '3'}
											]
										}
									],
									onsubmit: function( e ) {
										editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
									}
								});
							}
						}
					]
				}
			]
		});
	});
})();

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
SUBSCRIBE NOW
Terms and Conditions apply
close-link
Click Me