Back to Top

Using WordPress’s Visual Editor

Previous Post:

Using WordPress’s Visual Editor

WordPress’s Visual Editor, or any WYSIWYG (What you see is what you get) editor, is often known for their bad output and the auto-cleaning up problem. If you ask another WordPress user, he or she will most of the time tell you how they hate the Visual Editor and turn it off immediately after installation.

I actually use the Visual Editor a lot, it has ‘Visual’ in the name for a purpose and people who find it suitable for that purpose will surely prefer to combine the power of both editors. In this article I am not going to debate about what’s best: Visual Editor or HTML editor (you simply can’t compare them), I just want to give you some tips and tricks to make the most of the Visual Editor and hopefully you will have a better experience using it.

Look and Feel

The first thing you should probably do is to match the post contents inside the editor to the actual look and feel of your blog. This can be done rather easily, using add_editor_style()1, available since WordPress 3.0. Put in your theme’s functions.php this line of code:

add_editor_style('my-editor-style.css');

and put my-editor-style.css inside your theme’s root. If you put the CSS file inside a sub folder, for example ‘css’, be sure to include ‘css’ when calling this function too, like so:

add_editor_style('css/my-editor-style.css');

You can even leave out all those name and path, like so:

add_editor_style();

and in such case, WordPress will automatically look for editor-style.css inside your theme’s root, which is simply convenient (please note a bug regarding editor style when you are developing a child theme, whose description and fix can be found here.) If you are using a right to left language, you will have to create another stylesheet named editor-style-rtl.css in the same directory as editor-style.css for your post contents to be displayed correctly.

Since we are going to style the post contents, you should only add CSS rules that are related to the post body into editor-style.css. If you want a demo CSS file, Twenty Ten’s editor-style.css can be a good start. In my opinion, you should focus on styling paragraphs, headings, blockquotes, preformatted blocks and code blocks which are most used HTML elements inside your post contents.

For people who are using versions prior to 3.0 (preferably 2.7 or higher), you will have to add your editor-style.css using the mce_css2 filter, for example like this:

add_filter('mce_css', 'editor_style_css');
function editor_style_css() {
	return get_stylesheet_directory_uri() . '/editor-style.css';
}

Tips and Tricks when editing

Unofficial tips and tricks

When you copy a block of text within <pre>, <code>, <p> or <div> you will notice that the editor will actually copy the container that wraps that text block. For example if you copy a block of text like this:

Copy Text from a pre formatted blockwp-content/uploads/2011/01/a20-copy-text-300x34.gif 300w" sizes="(max-width: 530px) 100vw, 530px" />

Copy Text from a preformatted block

and then paste it in the editor, you will get this:

Paste Text from a preformatted blockwp-content/uploads/2011/01/a20-paste-text-300x62.gif 300w" sizes="(max-width: 530px) 100vw, 530px" />

Paste Text from a preformatted block

You can make good use of that behaviour to avoid having to switch between the Visual and HTML editor just to copy the container, especially when you need <code> blocks or <div> blocks which aren’t available on the editor’s toolbar by default. In the case when you do not fancy such behaviour, you can always strip out the container using the “Paste as Plain Text” button (by default it is located next to the coloring button) or simply using the HTML editor to paste.

The next thing is: WordPress uses paragraph for a new line by default. The only downside of this is when you actually need <br /> instead of <p> (for example when you want a list without any bullet or indent), there would be no way to do so automatically. There’s a trick, fortunately, to let you do that hassle-free. All you have to do is to use a list normally:

Normal Listwp-content/uploads/2011/01/a20-normal-list-300x39.gif 300w" sizes="(max-width: 530px) 100vw, 530px" />

Normal List

and then with all list items still selected, press the list button again you will have this:

List with no bullet or indentwp-content/uploads/2011/01/a20-nobullet-list-300x39.gif 300w" sizes="(max-width: 530px) 100vw, 530px" />

List with no bullet or indent

Most of the time you will see those list items in their ‘no CSS’ form, i.e. WordPress’s CSS and your editor-style.css aren’t applied, what you should do is to press enter one time and things will go back to normal (that’s crazy, I know).

Combine the power of both editors

So you are still using only the HTML editor? I think you should give the Visual Editor more chances because, like I have said from the beginning, it is there for a purpose (and has been improved a great deal since the early versions of WordPress). Admittedly, I use the Visual Editor as my main editor simply because it allows me to write much faster. Of course there are occasions when the Visual Editor can’t do the job and the HTML editor is needed, thus combining them might give you more editing power than you can imagine.

HTML entities conversion

If you try to type something like <pre> inside the Visual Editor you will get the HTML output of &lt;pre&gt;, which is expected because the editor has converted some reserved HTML characters3 to their HTML entities. This allows you to show HTML markups as-is in your post for demonstration purposes easily, rather than having to manually type those entities in the HTML editor, which is way too time-consuming.

When you switch from the HTML editor to the Visual Editor, it will again do the conversion except for those considered HTML markups, for example <div> will not be converted while => will be converted. It is therefore recommended to use the Visual Editor for demonstration purposes and use the HTML editor for usage purposes of HTML markups.

Copying contents

As I have said earlier, the Visual Editor conveniently allows you to copy the container along with selected text and when you don’t need such behaviour you can use the HTML editor to strip out the container. There’s one thing the Visual Editor will not copy, however, that is the attributes of the container (except for attributes set in valid_elements options4 which I will describe in the next section). Please note that although you can use a WordPress filter to add more attributes, I don’t think doing so will change this copying issue (if someone can correct me on this, please comment) so it is faster to just switch to the HTML editor and copy the container instead.

Customize the Visual Editor

It is recommended that you take a look at TinyMCE (the Javascript editor behind WordPress’s Visual Editor)’s documentation5 as well as some WordPress filters to extend its functionality6 first before continuing reading this section.

Dealing with the cleaning up problem

When you write something like this in your HTML editor:

<div extra="test">
<!-- some contents -->
</div>

and then switch to the Visual Editor, the part extra="test" will be removed. The reason is easy to understand, <div extra="test"> isn’t XHTML compliant and therefore ignored by the Visual Editor by default. Here comes a debatable issue of whether or not to be XHTML compliant. Generally speaking it is better to be so but a small incompliant part of your post, such as <div extra="test"> can not cause any problem, can it (except for validation of course)? Many people out there still need extra attributes for a specific element so we are going to add more using a simple WordPress filter:

add_filter('tiny_mce_before_init', 'add_tinymce_attributes');

function add_tinymce_attributes($initArray)
{
	$ext = 'div[extra]';
	if (isset($initArray['extended_valid_elements']))
	{
		$initArray['extended_valid_elements'] .= ',' . $ext;
	}
	else
	{
		$initArray['extended_valid_elements'] = $ext;
	}

	return $initArray;
}

Please note the use of extended_valid_elements7 which is also an option used by TinyMCE before its initialization. You can use valid_elements4 rather than extended_valid_elements but as stated in its documentation, extended_valid_elements is considered a better approach. After inserting such filter to your codes the Visual Editor will not remove extra="test" anymore but again keep in mind that if you copy the mentioned <div> block, extra="test" will still be removed.

Force <br /> for a new line

In some (rare) cases you don’t like a new paragraph added for each new line, you can tell the Visual Editor to use <br />8 instead using the same approach above:

add_filter('tiny_mce_before_init', 'force_tinymce_br');

function force_tinymce_br($initArray)
{
	$initArray['force_br_newlines'] = true;
	$initArray['force_p_newlines'] = false;
	$initArray['forced_root_block'] = '';
	return $initArray;
}

Adding more buttons

Default buttons provided by TinyMCE

If you would like to have (almost) all the default buttons provided by TinyMCE, as shown here: http://tinymce.moxiecode.com/tryit/full.php, I’d suggest that you use a plugin, such as TinyMCE advanced. Please note an issue regarding this plugin, though.

Custom buttons

There’s a quite detailed Codex page that can help you with this: http://codex.wordpress.org/TinyMCE_Custom_Buttons. Remember to follow all the links in the Further Reading section, too!

That’s all in my mind regarding the Visual Editor for now and I hope you guys find this article useful. If there are tips and tricks that have not been mentioned in this article, please feel free to contribute. Thanks for reading!

References

  1. http://codex.wordpress.org/Function_Reference/add_edito ... itor_style []
  2. http://codex.wordpress.org/Plugin_API/Filter_Reference/ ... ce/mce_css []
  3. http://www.w3schools.com/tags/ref_entities.asp []
  4. http://tinymce.moxiecode.com/wiki.php/Configuration:val ... d_elements [] []
  5. http://tinymce.moxiecode.com/wiki.php/TinyMCE []
  6. http://codex.wordpress.org/Plugin_API/Filter_Reference# ... or_Filters []
  7. http://tinymce.moxiecode.com/wiki.php/Configuration:ext ... d_elements []
  8. http://tinymce.moxiecode.com/wiki.php/Configuration:for ... r_newlines []

Take Social Sharing to
the Next Level with Monarch!

Take Social Sharing to the Next Level with Monarch!
Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

6 Opinions for Using WordPress’s Visual Editor (2 Trackbacks)

  1. User's Gravatar
    1
    Jester April 1, 2011 at 9:03 am – Permalink

    Haha very nice tricks, never thought of making a no-bullet list like that!

  2. User's Gravatar
    4
    rabbi September 2, 2012 at 8:38 pm – Permalink

    I am using some plugins to customize my visual editor and it works really great.

    • User's Gravatar
      5
      Dietrich October 23, 2012 at 4:55 pm – Permalink

      It would be nice to learn more which plugins you are using, thank you.

  3. User's Gravatar
    6
    Dietrich October 23, 2012 at 4:53 pm – Permalink

    editor-style.css is very important for customers with less programming experience and rather unknown in the WP community. I myself now wrote an article about this theme in German http://internetdienste-berlin.de/css-fur-den-dashboard-editor/ and quoted yours because it supplied a lot more suggestions using the visual editor.

  1. mizení/přidávání html značek při přepínání v editor/html « Fórum podpory WordPressu

    [...] informace o kouzlech s vizuálním editorem naleznete např. zde. Existují i pluginy, např. Raw HTML, ale pro přepínání z HTML do vizuálního editoru je [...]

  2. Using TinyMCE in WordPress | CodeIsLife – Code Is My Life. It Brings Success To Your Life

    [...] editor style when you are developing a child theme, whose description and fix can be found here.) If you are using a right to left language, you will have to create another stylesheet named [...]

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.




  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: