• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

WordPress comes equipped with a powerful visual editor called TinyMCE. This utility is itself a separate opensource project maintained and developed by MoxieCode Systems. TinyMCE is a powerful, platform independent, javascript based WYSIWYG editor. Apart from WordPress, it is used in my other content management systems.

TinyMCE is like your regular rich text editors with lots of buttons to do different things. It is extendable just like WordPress and can be used to provide an extended user interface to users for writing posts. Most of the advanced buttons are hidden in the default WordPress Visual Editor. You can display the full range of buttons by switching to the Advanced Editor Mode.

Hint: Use Shift+Alt+Z to display all buttons in Visual Editor or click the Show/Hide Kitchen Sink button

Why Would You Want to Customize TinyMCE

As a WordPress developer or site owner, there will be times when you will have users other than yourself contributing content on your website. Not all of them will be familiar with your editorial style. Sometimes you will even have contributors who do not even know how to make a hyperlink in HTML editor.

So as a website admin/developer it is your job to make it simpler for them to follow your editorial style by providing them an interface where they can easily use the same styles as you want them to. Websites that have a lot of non-tech savvy contributors will benefit a lot if they customized their TinyMCE editor in WordPress. This will provide a consistency in style, content would look better, and the contributors will be able to focus on just writing.

In this example we will be adding a Styles drop down menu to TinyMCE, then we will add a purple button to it, and another element for writing tag lines. At WPlift we use that purple button to highlight links to external sites and downloads. So I thought it would be fun learning how it can be added to TinyMCE.

How to add Custom Styles to WordPress Visual Editor

Firstly, we are going to enable Styles dropdown menu for TinyMCE in our WordPress edit screen.

Hint: This code goes into your theme’s functions.php file

// Add the Style Dropdown Menu to the second row of visual editor buttons
function my_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

What we have done here is that we have enabled the Styles Menu. The above code will show the default style classes available. We don’t want default classes to confuse our user so we add our own classes to it with friendly titles.

function my_mce_before_init($init_array)
	{
		// Now we add classes with title and separate them with;
		$init_array['theme_advanced_styles'] = "Tag Line=tag-line;Button=custom-button";
	return $init_array;
}

add_filter('tiny_mce_before_init', 'my_mce_before_init');

Now we have added a menu with two style items in it, Tag Line and button. However, nothing happens when a user selects text and then selects these options from the menu. So we need to define these styles in our Editor Style Sheet and our Theme Stylesheet.

Since version 3.0, WordPress allows theme developers and website admins to define custom styles for the Visual Post Editor. This means that theme developers can provide the same style for the visual editor as their themes and when a user is writing a post they know how it will look when published. This feature makes the TinyMCE in WordPress truly a WYSIWYG editor.

Using add_editor_style we add these styles and tell WordPress where to look for the CSS for these styles. The default location is editor-style.css, you can create this file in your theme directory if it does not already have it. Or you can use a custom style sheet of your own.

	add_editor_style();
		// OR
	add_editor_style('custom-editor-style.css');

Now we are going to add CSS to either editor-style.css or custom-editor-style.css and we will also add the same css in our Theme’s style.css

.tag-line {

	Font:italic 14px Georgia, serif;
	color:#ccc;
}

.custom-button {

	font-size:13px;
	background: #9027A2;
	display: inline-block;
	padding: 2px  5px 2px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-  radius: 4px;
	border:none;
	position: relative;
	cursor: pointer;
	margin:10px 10px 0 0;

}

Show and Hide Buttons in TinyMCE

The default settings for the TinyMCE buttons and plugins are saved in /wp-includes/class-wp-editor.php. These settings can be over written by using the filter tiny_mce_before_init. There are several buttons in the visual editor which many people never use and you can remove these buttons if you want. Look at the following code and see if there are things that you don’t want. Also notice that you can add a third and fourth row of buttons to your Visual Editor UI.

	function myformatTinyMCE($in)
		{
 			$in['remove_linebreaks']=false;
 			$in['gecko_spellcheck']=false;
 			$in['keep_styles']=true;
 			$in['accessibility_focus']=true;
 			$in['tabfocus_elements']='major-publishing-actions';
			$in['media_strict']=false;
			$in['paste_remove_styles']=false;
			$in['paste_remove_spans']=false;
			$in['paste_strip_class_attributes']='none';
 			$in['paste_text_use_dialog']=true;
			$in['wpeditimage_disable_captions']=true;
			$in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
 			$in['content_css']=get_template_directory_uri() . "/editor-style.css";
			$in['wpautop']=true;
			$in['apply_source_formatting']=false;
			$in['theme_advanced_buttons1']='formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv';
			$in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|outdent,indent,|,undo,redo';
			$in['theme_advanced_buttons3']='';
			$in['theme_advanced_buttons4']='';
		 return $in;
		}
	add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Creating TinyMCE Custom Buttons in WordPress

Just like WordPress, TinyMCE is also extendible by using plugins. There are some tinyMCE plugins available in /wp-includes/js/tinymce/plugins directory, which you can look at if you want to write a plugin for yourself. Also look at the TinyMCE documentation on creating a plugin. These plugins can be embedded into the UI of your Visual Editor in WordPress.

However, creating TinyMCE plugins for WordPress is not a very simple task. For users who don’t want to dive into writing plugins there are some excellent WordPress Plugins that allow you to extend TinyMCE in WordPress.

Ultimate TinyMCE Plugin

The Ultimate TinyMCE plugin is a powerful WordPress plugin that extends your TinyMCE editor to the maximum level. It comes loaded with lots of buttons which will make it a lot easier for MSWord users to create their posts in Visual Editor. I particularly liked the YouTube Button, which allows users to set the width and height, along with other options. However, there are some buttons that many would find useless and these buttons can be disabled from the plugin settings page.

Ultimate TinyMCE plugin also comes with premium addons which can be bought from the plugin author’s website. These addons include Google Web Fonts, Custom Styles, Mood Icons, Advance Configuration options, etc.

Download Ultimate TinyMCE

TinyMCE Template Plugin

TinyMCE template plugin is a very useful tool for the websites where authors are required to follow a format and style guide to contribute content. TinyMCE Template plugin allows you to create template posts which you can use inside your visual editor to create new posts. The idea is so simple and beautiful and works flawlessly. You can create templates, predefine required fields which post authors can then fill in quickly and move on.

Download TinyMCE Templates

TinyMCE Advanced

Oli has previously written a thorough review of this plugin in his post How to Extend WordPress Visual Editor Buttons, so I will keep this one short. As the name says this plugin adds extra features to the Visual Editor in WordPress. One feature that I particularly found useful was the ability to load CSS classes from the theme’s style sheet and make them available in Visual Editor. The plugin settings page has a drag and drop interface to set buttons, add separators between them, and modify the editor to meet your needs.

Download TinyMCE Advanced

Conclusion

Using custom styles with TinyMCE can make it a lot easier and quicker for users to create buttons, format content, and stylize posts quickly. It does not completely eliminate the need for switching to HTML editor from time to time, but it can be great tool for users coming from desktop publishing environment who just want to write posts not code.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

12 Comments

  1. Nicolas Brisebois-Tétreault

    Is it possible to add it in the “zen mode”?

  2. Anonymous

    According to this post, this functionality will be available in the upcoming version. 

  3. Really inspiring job, great blog, thank you for sharing, keep it up!

  4. Awesome tutorial Noumaan thank you

  5. onlineverdient

    The buttons do show in the post editor. But when published it shows the text as normal text.

    Any help is greatly appreciated!

    Could it be the theme im using?

    If you know please reply

  6. welcomebrand

    Looks really useful and something I actually need in a project right now so thanks :)

    Just one question though, if a client updates WordPress or their Plugins, will this modification be lost?

  7. Sam

    Thanks for the post. I just installed the plugin and working on it.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors