Using the WordPress text editor

Visual Editor

Visual Editor is a rich text editor in the WordPress post edit screen. The WordPress post edit screen has two editors, Visual and Text.

The visual editor is a WYSIWG editor. WYSIWIG stands for “what you see is what you get” which means that however the content shows up on your display is exactly the way it will be when it is published. The editor mimics the behavior of desktop publishing tools such as Microsoft Word and even has many of their features such as a toolbar along the top allowing you to format your content.

WordPress visual editor

So, instead of writing HTML, users can write posts and format them using the buttons in the toolbar. Since it is a visual text editor when users add images they see  them right inside the editor. Users can then easily align the images with their text using the editor’s text align buttons.

You can see the toolbar in the image below with all of the formatting options including making font bold and italic, aligning paragraphs, adding quotes, and spell checking. In the top left you can see the “add media” button that allows you to include images and other media in your post. Check Uploading Images to Post Content article for more details.

In the top right you can see the button that will let you toggle between the visual and text editor modes.

Text Editor

The post edit screen in WordPress comes with two editors to write posts, Visual and Text. Unlike the visual mode, the text mode editor requires you to add any formatting such as italics, alignment, and spacing manually using HTML. The visual mode lets you see your post as is, while the Text mode shows you the code and replaces the WYSIWYG editor buttons with quicktags.

The Text editor do have some basic buttons in the bar along the top which quickly insert commonly used HTML elements into the content. Plain text editor is more useful for users who are comfortable with HTML because most formatting is done manually by writing HTML directly into the editor. One bit of formatting the text editor will perform, however, is converting line breaks into paragraphs. This means that every time you start a new line, you are beginning a new paragraph just like the visual editor.

Often advanced users prefer to use the text editor in WordPress instead of the visual editor to prevent WordPress from adding its own styles which it tends to do every now and again.

The quicktags are explained as follows:

  • b – <strong></strong> HTML tag for strong emphasis of text (i.e. bold).
  • i – <em></em> HTML tag for emphasis of text (i.e. italicize).
  • b-quote – <blockquote></blockquote> HTML tag to distinguish quoted or cited text.
  • del – <del></del> HTML tag to label text considered deleted from a post. Most browsers display as striked through text.
  • link – <a href=”http://example.com”></a> HTML tag to create a hyperlink.
  • ins – <ins></ins> HTML tag to label text considered inserted into a post. Most browsers display as underlined text.
  • ul – <ul></ul> HTML tag will insert an unordered list, or wrap the selected text in same. An unordered list will typically be a bulleted list of items.
  • ol – <ol></ol> HTML tag will insert a numbered list, or wrap the selected text in same. Each item in an ordered list is typically numbered.
  • li – <li></li> HTML tag will insert or make the selected text a list item. Used in conjunction with the ul or ol tag.
  • code – <code></code> HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier.
  • more – <!–more–> WordPress tag that breaks a post into “teaser” and content sections. Type a few paragraphs, insert this tag, then compose the rest of your post. On your blog’s home page you’ll see only those first paragraphs with a hyperlink ((more...)), which when followed displays the rest of the post’s content.
  • page – <!–nextpage–> WordPress tag similar to the more tag, except it can be used any number of times in a post, and each insert will “break” and paginate the post at that location. Hyperlinks to the paginated sections of the post are then generated in combination with the wp_link_pages() or link_pages() template tag.
  • lookup – Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.
  • Close Tags – Closes any open HTML tags left open–but pay attention to the closing tags. WordPress is not a mind reader (!), so make sure the tags enclose what you want, and in the proper way.