Tag Archives: tool bar

WordPress Post EditorTool Bar – Demystified!

Demystifying the WordPress Post Editor Tool Bar

 

Updated January 15, 2017

The WordPress Post Editor Tool Bar is one of the things that makes WordPress so user friendly.  The tool bar shown above is from the 2017 WordPress default theme.  If you have a different theme, your Post Editor may have more options.

The toolbar is visible in the Visual Editor mode.  By default you will be in the Visual Editor mode. It enables you to type your posts just as you would in a word processing document (well almost).  The name/function of each little icon appears as you hover over them.  Don’t be afraid to type some text and play with these features! Nothing will go live on your site until you click the Publish button.

There are two tabs at the top right of the box where you type your post.  The tab on the left says, Visual and the tab on the right says, Text.  The latter enables the Text Editor mode which allows you to write code – we will explore that in a later post.

Note:  If you don’t see these two tabs, you may have checked the box:  “Disable the visual editor when writing” in the dashboard menu.  To correct this, go to Users>Your Profile.  Click to edit your profile then uncheck that box.  Don’t forget to scroll down to the bottom and click “update your profile” to save the changes.

Text

If you have used word processing programs, then these options in the tool bar will be familiar:

  • bold text
  • italic text
  • strikethrough text
  • unordered list (bulleted list – like this one)
  • ordered list (numbered list)
  • underline text
  • align left/centre/right (can be applied to images and text)
  • align full (justified – can only be applied to text)

Distraction Free Writing Mode

If you have watched videos on your computer or mobile device, you are probably familiar with the “full screen” icon. WordPress calls it the “distraction free writing mode”.  When you click this icon, it presents (an almost) blank page for your thoughts. You will notice the tool bar at the top fades away and re-appears when you move your mouse.

Now for some less common icons….

Block Quote

“Block quote” is represented by a large quotation mark icon.  If you type text, highlight it and select block quote, it becomes indented, italicized and separated from the main content.  This is useful for quotations and other blocks of text you want to emphasize.

Link and Unlink Text

There are two gray (inactive) strange little figure eight-like symbols.  These are the “insert/edit link” (a chain link) and “unlink” (a broken chain link) icons.  Once you highlight some text, they become active and you can select them.  To turn regular text into a link, follow these steps:

  1. Highlight the text that you want readers to click on to follow your link.
  2. In the tool bar, click the “insert link” (chain) icon and a pop up box appears.  The URL field has “http://” already in it.
  3. Type in the URL (web address) for the page you want to link.  The easiest way to do that is to open that page in another tab of your web browser, copy the URL from the browser, and then paste it into the URL field. If you are using this method to get a URL, first delete the http:// that WordPress has already typed for you.
  4. The next field offers you the opportunity to give your link a title.  Readers will see this title as they hover over your link. Try to make your link title as helpful as possible.
  5. Lastly, there is a check box that will open your link in a new page or tab of the reader’s browser.  Sometimes you will want to do this, sometimes you won’t.  Unless you already have a preference, go ahead and check that box.

Insert More

The “insert more tag” is a link that is inserted wherever your cursor is.  It links to a new, separate page which is created for this post.  This new page contains the complete text of your post. The blog page now has only the first part of the text and a “continue reading” link.”  When the reader gets to the end of the text shown on the blog page, they can choose to click on the “continue reading” link to read the rest of the post (on the other page) or skip down to the next post. This function works well for longer posts.

There is another way to do this in the Settings>Reading dashboard menu by selecting either “show full text” or “summary” for each article in a feed.  If you select “show full text” then you can use the “insert more tag” giving you more control over where the post content gets separated.

Kitchen Sink

The “kitchen sink” is a nifty little icon that activates another row of options.  You may be familiar with:

  • text colour
  • insert custom character (symbol)
  • outdent/indent
  • remove formatting
  • help

However, you may not have used:

  • format (drop down menu)
  • paste as plain text (little clip board with a T)
  • paste from word (little clip board with a W)
  • undo (reverses your last action within the text box)
  • redo (reverses the last “undo”)

Format Drop Down Menu

The “format” drop down menu offers:  paragraph, address, preformatted, and headings 1-6. These functions are used by highlighting text and then clicking on one of them.

Paragraph

“Paragraph” changes formatted text back to plain text.  Highlighting your text and clicking “paragraph” will have no effect if you have not used any formatting.

Address

“Address” italicizes the text and decreases its width so that it stands out – the way you might want an address to look.

Preformatted

Selecting “preformatted” does nothing unless you have highlighted text or unless you start typing.  Then a new box (with a scroll bar on the bottom) appears inside the post.  This might seem a little alarming but don’t worry you can always use the “undo” option.  This preformatted box is usually used to display code and the scrolling box makes it easier to read and copy longer lines of code.  The text inside the box shows up in a basic font.

Headings

Headings help to organize your information and enhance readability.  Good headings also attract search engine attention.  “Heading 1” is the largest and they decrease in size accordingly. Use them wisely to make your posts more readable and improve your SEO!

Paste From Word

If you copy text from the Microsoft Word program, it will have formatting that does not jive with WordPress.  There used to be a feature for cleaning up Word formatting before it goes into your post but it has been discontinued.

If you find this too frustrating, type your drafts in another program such as Notepad++. Or better yet, use the draft feature of WordPress, add your content to your posts and save them as drafts until you are ready to publish.

Readability and More!

If you think you now have an understanding of this Tool Bar, you should read this excellent article, A Comprehensive Guide to Formatting Your WordPress Posts and Pages by Pamela Wilson,  describing how to format your posts for best effect and readability.