WordPress Visual Editor

How To Use The WordPress Visual Editor

The WordPress Visual Editor is the default content editor and formatting area that you use when editing posts and pages in WordPress. If you can't see it when you load a page or post, make sure you have selected the WordPress Visual Editor tab above the top row of icons and to the right.

This WordPress Visual Editor (as opposed to the Text editor) provides a semi-WYSIWYG (What You See Is What You Get) content editor, that makes styling and changing your content a breeze. You will almost certainly have used something similar in other word processors such as Microsoft Word.

Along the top of the Visual editor is a toolbar which contains two rows of editing icons relating to common formatting tasks such as bold, italic and alignment etc. These tools give you the ability to format your content and create the look and feel you want, as well as inserting links to content elsewhere on your website or the wider web.

WordPress Visual Editor

To see what any of the tools do, just hover over them with your cursor and a small tooltip will appear. If you don't see two rows of icons in your Visual editor's toolbar, click on the Toolbar Toggle (Kitchen Sink) icon, which in the standard WorPress install will be at the end of the top row of icons. The second row will now appear.

For a quick run-down of the icons and what they do, see our list below.

The editor's standard tools include, from left to right:

Paragraph – Using the drop-down menu enables you to format text as a paragraph or different types of headings. Heading styles include H1, H2, H3, H4, H5 and H6 all of which usually decrease in size as the 'H' number goes up. This relates to the hierarchy of text on your page with the H1 headings being at the top (the most important) working down to the smaller H6 headings at the bottom. It's not quite as simple as this but we will cover that in a different WordPress Help blog post.

Bold – Style and display your text as bold. This is used help style your page for your readers by drawing their attention to important text on the page. Using bold can help indicate to search engines the words or text on a page that might be important for that page's SEO (Search Engine Optimisation) but this is a little old school now, and could be interpreted as being 'spammy'.

Italics – Style and display your text as italic. Similar to bold, italics should be used to highlight and draw attention to important text for your readers. Don't expect it to improve SEO or use it for this.

Bullet list – Allows you to create unordered lists (i.e no numbers or letters etc) such as:

  • This is an item in a bulleted list.
  • This is the second item of a bulleted list.

Numbered list - Allows you to create ordered lists (i.e. not using bullets) such as:

  1. This is an item in a numbered list.
  2. This is the second item of a numbered list.

Both Bullet and Numbered lists are used to break up your text and make it more readable for your website's visitors. Breaking up long paragraphs using lists is a recognised way of getting readers to stop and concentrate on your content. Lists are easy to assimilate, look important, to more to the point, easy to read!

Blockquote – Allows you to style text as a quote. Most WordPress themes style Blockquotes differently.

This is how our theme displays our Blockquotes.

Alignment – Enable you to align your text left, centre, or right.

This is left aligned text and is the most common way of aligning text on most western language websites as we read from left to right.

This is right aligned text and is often used to align text off an image or another item on the page.

Finally, this is centred text and generally used for display purposes, especially on smaller single column mobile displays.

Link – Insert, edit or remove hyperlinks (can be text or images) to content elsewhere on your website or the internet. Adding links is very easy to do, you just select the text or image you want to link to somewhere else, click the Link icon and insert the link in the small pop-up box that appears next to the item you selected. Click the little return arrow in the box to apply the link. Remember to save or update your page to save your changes.

Insert ‘Read More’ tag – Splits your page into two parts so only the content before the ‘More’ tag is displayed until your users click the auto-inserted ‘Read More’ link to read the rest of the article.

Toolbar Toggle (also known as the Kitchen Sink icon) – Clicking on this icon opens the second line of formatting tools.

WordPress Visual Editor Icons

The WordPress Visual Editor icons in the second row include:

Strikethrough – Mark text as incorrect or deleted.

Horizontal line – Insert a horizontal line in your post, which can separate content.

Text colour – This is a drop-down menu where you can choose different colours for your text.

Paste as text – This allows you to paste plain text directly into the Editor from Notepad, Microsoft Word or something similar.

Tip: Use the 'Paste as text' icon when you've copied some text directly from Microsoft Word because this will remove the formatting that MW includes. If you don't do this, your text may end up not looking as you expect!

Clear formatting – Enables you to remove all formatting (bold, italic etc) from a highlighted area of text in your content.

Special character – Clicking on this opens a dialogue box which allows you to insert custom characters or symbols into your text.

Indent/Outdent – Adjust the indent of lines, paragraphs or lists.

Undo – Reverses, or ‘un-does’, the last thing you did in the Visual editor, deleting mistakes or bringing back text you deleted by mistake. Clicking on the icon more than once reverses each action in turn.

Redo – Reverses the undo, or ‘re-does’ the last action you undid.

Note: Once you have Saved or Updated your page you cannot undo an action in the WordPress visual editor.

Help – The Help, or Keyboard Shortcuts icon, opens a dialogue box which gives you further information about the WordPress Visual Editor.

Finally, on the far right of the Toolbar, is the Fullscreen icon. Clicking this allows you to enter the Distraction-Free Writing mode of the editor, which will we will discuss in another post.

Contact Us

To discuss a new graphic, branding or photography project, or to enquire about a Website Care Plan or TimeBlocks package, please use this form.

To enquire about a new website, please click here.

Need help with your WordPress website?

If you need help caring for your website, give us a call on 01579 559 699 during work hours or contact us at any time via email.

Blog posts in the WordPress Help series

We are actively writing over 20 blog posts for this WordPress Help series and plan to release at least one new post a week until finished! So far we have published:

Would you like us to quote for something?

Maybe a WEBSITE or a LOGO perhaps.

Prefer to talk? Call Chris on 01579 559 699

New Logo Details

To provide you with an accurate price, please fill out the form below.

  • Your Details
  • Why?
  • Customers
  • Design
  • Comments

Step 1 - Your Details

NOTE: No spaces between numbers

Contact Us

To discuss a new graphic, branding or photography project, or to enquire about a Website Care Plan or TimeBlocks package, please use this form.

To enquire about a new website, please click here.