Using the WordPress Content Editor

Ah, the WordPress editor. As friendly-at-a-glance as you’ve become, for many you still tilt toward the daunting, the uncertain. Will using “Text” mode mean I’ll end up needing to write code? What exactly is a block quote? How can I make all of my fonts huge and blinking?

Today I aim to answer these questions and more. We’ll cover what all of the buttons in the WordPress editor do and even more importantly, when it’s appropriate to use them for formatting purposes.

a screenshot of a text editor in WordPress
Screenshot of the Content Editor as of WP 3.5.1

We’ll tackle the button toolbars one screen at a time, beginning with…

The Visual Editor

This is as close to a Microsoft Word experience as is available for WordPress right out of the box. Unlike Word, though, it is intended to be easy to use first and powerful second, so you don’t have a huge bloated box of thousands of buttons that you can’t really be sure what any of them do other than take up valuable screen real estate. While the editor seems simple, it can be expanded to provide more functionality. Beginning from the left, let’s work our way through each button.

the Bold button from the WordPress visual editorBold
What it does: Makes text bold, ie thicker than normal.
Code it adds to “Text” tab: <strong>your text</strong>
When to use it: Anytime you want to indicate that certain text is more important than usual.
the Italics button from the WordPress visual editorItalics
What it does: Makes text italicized, ie slightly slanted right.
Code it adds to “Text” tab: <em>your text</em>
When to use it: Anytime you want to indicate certain text should have emphasis / be pronounced differently.
the Strikethrough button from the WordPress visual editorStrikethrough
What it does: Adds a line through your text.
Code it adds to “Text” tab: <del>your text</del>
When to use it: When you’d like to indicate text is no longer relative or has been replaced with updated content.
the Unordered List button from the WordPress visual editorUnordered List
What it does: Creates a bullet point list.
Code it adds to “Text” tab: <ul><li>one item in a list</li></ul>
When to use it: Anytime you want to make a list of things where none of them are specifically more important than another.
the Ordered List button from the WordPress visual editorOrdered List
What it does: Creates a numbered list.
Code it adds to “Text” tab: <ol><li>one item in a list</li></ol>
When to use it: When you’d like to create a list in which things are numbered in order of importance or otherwise.
the Blockquote button from the WordPress visual editorBlockquote
What it does: Depending on your theme, adds some type of visual difference via CSS, often in the form of “quotation marks”.
Code it adds to “Text” tab: <blockquote><p>your text</p></blockquote>
When to use it: When you’re quoting text from another source, such as a famous quote, blurb of text from another website, etc.
the Left Align button from the WordPress visual editorLeft Align
What it does: Aligns text or images visually to the left, which is typically the default layout for text.
Code it adds to “Text” tab: <p style="text-align:left">your text</p> or, for images, <img class="alignleft" src="your image" />
When to use it: Whenever you’d like to align an image to the left, rarely needed for text.
the Center Align button from the WordPress visual editorCenter Align
What it does: Center aligns text and images.
Code it adds to “Text” tab: <p style="text-align:center">your text</p> or, for images, <img class="aligncenter" src="your image" />
When to use it:
the Right Align button from the WordPress visual editorRight Align
What it does: Aligns text or images visually to the right.
Code it adds to “Text” tab: <p style="text-align:right">your text</p> or, for images, <img class="alignright" src="your image" />
When to use it: Whenever you’d like to align an image or text to the right.
the Link button from the WordPress visual editorLink
What it does: Opens a small window that allows you to type or paste in the URL of another page or anchor you’d like some text or an image to link to.
Code it adds to “Text” tab: <a href="http://yourlink.com" title="your link title text">your text</a>
When to use it: Anytime you want to create a link, the backbone of the WWW!
the Unlink button from the WordPress visual editorUnlink
What it does: Removes a link you’ve already created.
When to use it: Whenever you want to remove a link from some text.
the More button from the WordPress visual editorMore
What it does: Inserts some code into your post that tells WordPress not to show anything below that code on certain pages such as your front page, the main page of your blog and other areas, depending on your theme.
Code it adds to “Text” tab: <!--more-->
When to use it: Whenever you want to limit the text shown on index and archive pages on your site. Theme dependent.
the Spellcheck button from the WordPress visual editorSpellcheck
What it does: Performs a spellcheck on your text.
When to use it: Largely irrelevant as Operating Systems and browsers come with built in spell checkers these days.
the Fullscreen button from the WordPress visual editorFullscreen Editing
What it does: Removes just about everything from the page except for a few formatting buttons and an area to create your content’s title and copy.
When to use it: Whenever you want to write without the “distractions” of additional content on the page.
the Kitchen Sink button from the WordPress visual editorbutton
What it does: Reveals a second row of formatting buttons in the Visual editor.
When to use it: Whenever you’d like more options for formatting.
the Formatting dropdown from the WordPress visual editorFormatting
What it does: Allows you to set specific types of code for your text. You can use this to set your text to various types of content, including paragraph, address, preformatted and headlines
Code it adds to “Text” tab:

<strong>your text</strong>
<p>normal paragraph text</p>
<address>100 Address St.</address>
<pre>your text</pre>
<h1>A Primary Title</h1>
<h2>A Secondary Title</h2>
<h3>A Tertiary Title</h3>
<h4>A Quaternary Title </h4>
<h5>A Quinary Title</h5>
<h6>A Senary Title</h6>

When to use it: Text is automatically set to paragraph text by WordPress if no other specific block level formatting is applied, so the paragraph option is kind of pointless. Address can be used to denote an address, but is not in widespread use. Preformatted will disregard most CSS rules, typically set the text in a monospace font, and respect any double spacing and line indents you add in the editor itself. The heading settings should be used as appropriate, that is, you should never have an h3 if you don’t already have an h2 above it, etc. More on Headings

the Underline button from the WordPress visual editorUnderline
What it does: Adds a line below your text.
Code it adds to “Text” tab: <p style="text-align: left;">your text</p>
When to use it: Sparsely. Underlines are a typical visual indicator of links, and tend to be confusing when used otherwise on the web.
the Justify button from the WordPress visual editorJustify
What it does: Justifies your text, meaning it will be aligned both on the right and left sides of the paragraph and whitespace will be added between words to make this visually possible.
Code it adds to “Text” tab: <p style="text-align: justify;">your text</p>
When to use it: Whenever you want this text affect.
the Font Color button from the WordPress visual editorFont Color
What it does: Allows you to change the color of your text.
Code it adds to “Text” tab: <span style="text-decoration: underline; color: #00ff00;">your text</p>
When to use it: Sparingly, whenever you want to change the color of text. Making text throughout your site resemble Joseph and the Amazing Technicolor Dreamcoat is almost always a poor design decision.
the Paste as Plain Text button from the WordPress visual editorPaste as Plain Text
What it does: If you copy text from a webpage or other rich text source, clicking this button will paste it into the editor without any formatting.
When to use it: Whenever you’ve copied text from something like Word, another web page, etc. and want to paste just the text, not all of the formatting and code that may have come along with it.
the Paste from Word button from the WordPress visual editorPaste from Word
What it does: Pastes text copied from Word without all of Microsoft’s formatting code.
When to use it: When you want to paste text from a Word Document but not get a ton of strange, invalid HTML.
the Remove Formatting button from the WordPress visual editorRemove Formatting
What it does: Removes formatting and code from your text.
When to use it: Anytime you find funky things going on with your text that you don’t like, such as odd fonts or code that came along with copied text.
the Insert Custom Character button from the WordPress visual editorInsert Custom Character
What it does: Allows you to insert custom characters such as → or € without knowing the code to do so.
When to use it: Whenever you need a symbol not easily accessed from your keyboard.
the Remove Indent button from the WordPress visual editorRemove Indent
What it does: Removes any indents you may have made to your text.
the Indent button from the WordPress visual editorIndent
What it does: Adds a 30 pixel space to the left of your text.
Code it adds to “Text” tab: <p style="padding-left: 30px;">your text</p>
When to use it: Whenever you want to indent some text.

Inline CSS

I’ve mentioned CSS above, which stands for Cascading Style Sheets. It’s the code that the developer of your WordPress theme created to make your site look the way it does. Which fonts to use, what color elements are on the page, and even layout are largely controlled by a CSS file that lives alongside the rest of your theme’s templates. This is all behind the scenes stuff that most of us rarely touch when using WordPress to blog or otherwise manage our website’s content.

Many of the buttons above–such as indent, underline, font color and text alignment–add CSS code directly into your HTML code…which is generally not a great idea. This code can’t easily be overwritten by your site’s global CSS file, and so even if you change themes down the road, it will remain there, muddying up your HTML. I urge you to consider carefully whether or not making your text bright green or underlining some indented text and then aligning it to the center is really a good idea. More than likely, the bold and italics buttons, along with lists and blockquotes, will provide more than enough formatting options to help solid content stand out on its own. You don’t need to make text flashy to get people to read it, you just need to make it interesting to read.

More on Headings

The heading tags should never be used to make text bigger simply because you want to emphasize it like a car salesman shouting over a television commercial. They are there to indicate to search engines and browsers what text is a heading vs. what is normal copy. If you choose to use them to change font sizes, you’re essentially throwing any hard work your theme’s developer did to make sure your site is 100% valid code, and the less valid your code, the more problems that can crop up down the road, especially as search engines get smarter and smarter and want to very specifically determine what content on your page is what.

The Text Editor

Formerly known as the HTML editor, this is where we move away from a What-You-See-Is-What-You-Get approach and start digging into the actual code of a post. This editor can be significantly more powerful, but also a bit more dangerous. It can also be a great way to troubleshoot why you can’t do or undo something in the Visual editor, such as get out of an Unordered List or get an image in exactly the spot you want it.

b
What it does: Makes text bold, just like its Visual editor equivalent. See above for appropriate use cases.
i
What it does: Makes text italicized, just like its Visual editor equivalent. Again, see above for when to use it.
link
What it does: Works exactly like the Link button in the Visual editor.
b-quote
What it does: Works just like the Blockquote button from the Visual editor.
del
What it does: The equivalent of the Strikethrough Visual editor button.
ins
What it does: The opposite of a <del>, <ins> indicates that text has been inserted. Browsers often underline this text.
When to use it: Because many browsers will underline inserted text, I don’t recommend using it very often. However, its most appropriate use is in conjunction with deleted / strikethrough text to indicate a change in the content of the page, but even that use is completely optional.
img
What it does: Opens a small box allowing you to paste in the URL of an image.
When to use it: Anytime you’d like to add an image and don’t want to use the Add Media functionality.
ul
What it does: Creates an opening <ul> tag, so you can begin to create an unordered list. You need to use it in conjunction with the <li> button to create each individual list item. Think of it as the container that holds all of the list items together. Click it a second time and it will close the unordered list.
ol
What it does: Similarly, creates an opening <ol> tag, so you can begin to create an ordered list. You also need to use it in conjunction with the <li> button to create individual list items. Clicking it a second time closes the ordered list.
li
What it does: Creates an opening <li> tag so you can create individual list items in one of the above two types of lists. Click it again after you’ve entered your list text to close the list item.
code
What it does: Wraps your text in <code> tags, indicating specific text is meant to be taken as literal code of some sort, typically HTML, CSS, PHP, etc.
more
What it does: Adds the <!– more –> tag as described above in the Visual editor.
lookup
What it does: Looks up selected text on Answers.com.
close tags
What it does: Attempts to close any open HTML tags.
fullscreen
What it does: The same thing as in the Visual editor, but with the text/code writing style.

Up Next: A Brief Stroll through WordPress