Visual Editor in WordPress

From d12 Web Design Manuals

The Visual Editor in WordPress functions much like the toolbar in a word processor.

The visual editor initially looks like this:

File:Wp4-ve-001.png

You can tell that you are using the visual editor, because the "Visual" tab is highlighted:

File:Wp4-ve-002.png

As you can see, there is also a text editor which will allow you to add HTML, CSS, or JavaScript to your web pages.

Toggle

Many of the buttons in the visual editor act as toggles: they turn something on or off.

  • If you select previously typed text, clicking the button adds that text characteristic to the selected text. Clicking the button again removes that text characteristic from the selected text.
  • If you click the button and then type, your text will have that text characteristic until you click the button again.

First Row

Bold

The bold button is a toggle. Clicking it turns bold on or off.

Italic

The italic button is a toggle. Clicking it turns italic on or off.

Strikethrough

The strikethrough button is a toggle. Clicking it turns strikethrough on or off. Strikethrough text is often used to show where information has been edited, deleted, or no longer applies.

Bulleted List

The bulleted list button is a toggle. Clicking it turns makes an item part of a bulleted list.

Ordered List

The number list button is a toggle. Clicking it makes an item part of an ordered list.

Blockquote

The blockquote button is a toggle. Blockquotes are often used to quote longer passages of text. A blockquote can encompass several paragraphs. (They are not the same as a pull quote, however.)

Horizontal Rule

The horizontal rule button adds a horizontal line to your webpage:


Alignment Buttons

Alignment buttons control whether a paragraph aligns to the left, the right, or centered. They are not toggles, however. To change the alignment of a paragraph, simply click on a different alignment button.

Align Left

The align left button aligns a paragraph to the left, with a ragged right edge.

Align Center

The align center button centers the text in a paragraph. (For a professional appearance, use centered text sparingly, if at all.)

Align Right

The align right button aligns a paragraph to the right, with a ragged left edge.

Insert/Edit Link

The add link button brings up a dialogue box that allows you to add or edit links. See Adding and Editing Links in WordPress.

Remove Link

The remove link button deletes a link from text. See Adding and Editing Links in WordPress.

Insert "Read More" Tag

The read more button inserts a "Read More" link in your page. If your archive pages only show excerpts, the excerpt will consist of everything up to the "Read More" tag. A "Read More" button will appear at the end of the excerpt, prompting visitors to click on the link to see the rest of your article.

Toggle Toolbar

The toggle toolbar button displays and hides the second row of the visual editor.

Second Row