How To Use The WordPress Visual Editor

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.

What’s Your Big Idea?

Services we use & recommend

We use the software and services below in our own and most of our client websites. We recommend them because we use and believe in what they can do to improve the experience you provide your website’s visitors and even your rankings in search engines such as Google. For your information, the links are affiliate links, which means we earn a small commission if you click through and make a purchase. There is no extra cost to you and we only recommend products and services we use and have had good results with.

‘Green’ Website Hosting

Why we use it…

Kualo is a website hosting company that uses 100% renewable energy. Data centres consume huge amounts of energy so Kualo’s 100% green energy policy ensures a cleaner and greener future for us all. Using renewable energy is also good for business as customers love buying from ‘green’ suppliers.

WordPress Page Builder

Why we use it…

Elementor is the best and easiest to use WordPress page builder on the market today and we know because we’ve used almost all the others! We use it for almost all our own and our client websites. We cannot recommend it highly enough, as it gives you so much flexibility and makes creating and updating a website very quick and easy. 

Faster WordPress Websites

Why we use it…

WP Rocket makes your WordPress website faster. This means your website will load quicker on your visitor’s computer, smartphone or tablet. Visitors read and buy more from fast websites. Google likes fast websites too, so WP Rocket can also help improve your search engine rankings!

WordPress Website Security

Why we use it…

iThemes Security Pro is a comprehensive and easy-to-use security plugin which helps keep your WordPress website secure and the bad guys out. ‘Hacked’ websites are bad for business, bad for visitor experience and can negatively affect your Google rankings if flagged. iTSP helps you stay secure.

Project Communication

Why we use it…

ProjectHuddle helps web designers, graphic designers, illustrators, photographers and other creatives, get targeted feedback from clients on projects they are working on together. It’s easy for clients to use and an efficient way for you to manage their changes and corrections. Our clients love it and it’s more affordable for us, which is a bonus!

Simple CMS – No Database!

Why we use it…

Sitecake CMS is very easy to implement into a static HTML or PHP websites and even easier for website admins (your clients) to use. WordPress is overkill for most small businesses websites and has many hidden costs. However, when a client wants to edit their site a simple CMS is essential, and this is when we use Sitecake. Try a demo here.