wordpress: getting started

Appendix A: Post Toolbar Icons

Here is a complete guide to the formatting icons found in the WordPress post/page editor. Since the icons change when you switch between HTML and Visual modes, guides to both modes are shown below.

Visual display Bold icon Make text bold
Visual display Italic icon Make text italic
Visual display Strikethrough icon Strikethrough text
Visual display Unordered List icon Create an unordered list
Visual display Ordered List icon Create an ordered list
Visual display Blockquote icon Convert to blockquote
Visual display Align Left icon Align text left
Visual display Align Center icon Center text
Visual display Align Right icon Align text right
Visual display Hyperlink icon Convert text into a hyperlink
Visual display Remove Link icon Remove hyperlink
Visual display More icon Creates a "More" break*
Visual display Fullscreen icon View the editor in fullscreen mode

A final icon at the right-most end of the toolbar enables "Kitchen Sink Mode," and turns on a second row of buttons with more advanced functionality not covered here.

* The "More" tag creates a break between the "teaser" that will appear on index pages such as the homepage and the "body" section of your post, which will appear on the post's individual "permalink" page (the actual story page).

Icons in HTML Mode

If you switch from Visual to HTML mode, you'll see a somewhat different set of toolbar icons:

HTML Icons

Most of these follow the functions of the Visual mode icons pretty closely - bold, italic, link, blockquote, and more all work as expected. The "ul" and "ol" buttons create unorderd and ordered lists, respectively, while "li" creates a list item within those lists.

The "del" and "ins" buttons are for making corrections to posts. Select the text you want to change and click "del" and it will be rendered in strikethrough. Enter your new text, select it and click "ins" and the new text will be styled by the browser or stylesheet. WordPress will add a timestamp to show when the insertion was made (which you can remove if you like).

The "img" button does not take you to the WordPress media uploader - it lets you insert an image from a known URL instead.

The "code" button is for adding computer code samples to posts - it wraps text in the HTML "code" tag which is styled specially by the browser or stylesheet.

"lookup" provides a quick way to look up a word in an online dictionary, while "close tags" does its best to close any unopened HTML tags.