How to use The Visual Editor in WordPress

As a WordPress user or website owner, you’re going to be spending a lot of time working with the visual editor to update various sections of your website. The visual editor is one of the most important backend features of WordPress. It allows you to create content in a WYSIWYG (What You See is What You Get) environment. It’s easy to use. It’s convenient. And it’s powerful.

In this first tutorial, I’ll teach you how to use Visual Editor to enter and update content to your WordPress website. This tutorial helps you save time by increasing your visual editor productivity.

The visual editor

Getting Started

You use the Visual Editor to create a post or page. The first step is to feed the title in the top entry field that says ‘Enter title here’. A permalink will be created for your page or post once you move the cursor to the editor below. A permalink is simply the permanent URL for your page, post, categories, etc. You can edit the auto-created permalink manually by hitting on the Edit button next to it. But this is not usually necessary. If you choose to modify this field though, make sure to click on the OK button to save the changes.

2

The Toolbar

Above of the content editor is a collection of multiple formatting buttons often referred to as the toolbar. Some of these buttons may be hidden. Click on the Toolbar Toggle icon 3 to show or hide another line of formatting icons that give you additionally functionality. To make sure that you are using the ‘visual’ editor as opposed to the HTML/Text mode, check to see that it’s selected at the top!

Edit text


In the following sections, we’ll take a brief look at all the tools found in the visual editor toolbar. You’ll need to understand how each of these tools works to be able to use the Visual Editor optimally and increase your productivity.

Working With the Editor Buttons

Each of the toolbar buttons is assigned to a specific function. One of the best things about these buttons is that you’ll find them super-easy to work with. A good deal of them are pretty much obvious to apply, while many others are suggestive. If you know how to use Microsoft Word or any other text editor for that matter, you’ll be sorted out for the most part. Below is a listing of all editor buttons and their associated functionality.

 

  • 4 Visual/Text – this allows you to switch the active editor view between Text Editor and Visual Editor. The Visual Editor is a WSYIWYG editor while the text editor allows you to view the HTML code that makes up your content. If you’re an experienced WordPress user who’s familiar with HTML tags, you can try using the Text mode to insert or modify various elements of your content. For those unfamiliar with HTML tags, try to keep off Text Mode otherwise you might get things messed up!
  • 5 Add Media – as the name suggests, this feature makes it possible for you to upload and insert media objects including images, video, audio or document files.
  • 6 Bold – used to make text Bold.
  • 7 Italic – used to italicize text.
  • 8 Strikethrough – when selected, adds a strikethrough line to your text.
  • 9 Bulleted List – creates a bullet point (unordered) list.
  • 10 Numbered List – creates a numbered (ordered) list.
  • 11 Blockquote – this tool is used to show a quote. However, the exact effect of this tool (in terms of appearance) will depend on the WordPress theme you are using.
  • 12 Horizontal Line – adds a straight horizontal line to your page.
  • 13 Align Left – left-aligns your text.
  • 14 Align Center – centers your text in the page.
  • 15 Align Right – right-aligns your text.
  • 16 Insert/edit link – use this button to hyperlink some text in your content to a html link or another page on your website. Highlight your text first then click on this button/tool to insert the link. To edit an existing link, click on the hyperlinked text then hit on this button. A dialog box will appear where you can delete the existing link and replace it with a new one.
  • 17 Remove Link – this button comes in handy when you are looking to remove an html link from text. Your cursor should be resting on an active link for this icon to be activated.
  • 18 Insert Read More tag – this inserts the ‘More’ tag into your content. Majority of blogs (whether or not they’re built on WordPress only show a short excerpt/summary of a post and then allow a user to click on the Post title or a ‘read More…’ link to view the whole of it. To insert a Read more tag in your post, click to put the cursor where you want the tag to go, then hit on the respective icon at the toolbar. Anything before the tag will be considered as the excerpt/summary. This feature is often used in posts, not pages.
  • 19 Toolbar Toggle – we already covered this in the third paragraph of this post. This button is also commonly referred to as the ‘Kitchen Sink’. Its use is to show or hide an additional line of formatting icons on the toolbar.
  • 20 Distraction-Free Writing – click on this button if you want to maximize your editor so that it occupies your entire browser window. If you want to revert back to normal mode, you can easily click on the Exit fullscreen text that appears at the top. The purpose of this feature/button is to make it possible for you to work in your WordPress editor without distractions from other browser tabs or windows.
  • 21 Style – the style feature allows you to select an appropriate format for various text on your page. Options available include paragraph, heading 1, heading 2, heading 3, etc. By default, you’ll want it to be set at ‘Paragraph’. To modify existing content on a page, highlight the text that you want to format then select an appropriate option (e.g. heading 1).
  • 22 Underline – click on this button to underline your text.
  • 23 Justify – aligns your text both to the right and left.
  • 24 Text Color – allows you to choose or alter the text color on your page.
  • 25 Paste as Plain Text – you often need to copy and paste text from other websites or word processor programs such as Microsoft word. But sometimes, this can lead to messed-up formatting. This is so because often, the HTML tags that modified/formatted the initial text are pasted along with the copied text itself. You can avoid this by clicking on ‘Paste as Plain text’, which strips all html tags and formatting from your source text. If you turn this button on, you’ll need to turn it off again to deactivate ‘Paste as Plain text’.
  • 26 Clear Formatting – used to erase all formatting such as Underline, Color, Bold, etc. from highlighted text.
  • 27 Special Character – you can use this button to insert special characters that otherwise cannot be easily accessed via your keyboard.
  • 28 Decrease Indent – this icon erases a single level of indenting.
  • 29 Increase Indent – this icon indents text by a single level.
  • 30 Undo – reverses your last edit/action.
  •  31 Redo – redoes your last edit/action.
  • 32 Keyboard Shortcuts – this is a helpful button that you can use to view information regarding the Visual Editor as well as keyboard shortcuts. See more on why you need this feature below.

Heading

Hyperlinks

Lists

More on Keyword Shortcuts

It often takes more time and more effort to move the mouse over every time you need to make changes to your text (e.g. underline text or insert a link). Luckily for you, the WordPress visual editor is equipped with a bunch of handy shortcuts that you can use to accomplish common formatting tasks. If used proficiently, keyboard shortcuts can dramatically increase your working speed and also make your visual editor writing much easier. Click on the ‘Keyboard Shortcuts’ icon as highlighted in the previous section to see a list of possible shortcuts that you can use to enhance your visual editor productivity.

Line Spacing

A lot of new WordPress users wonder how they can add line spacing to their content. You can add a new paragraph to the visual editor by pressing the ‘Enter’ key on your keyboard. Also, WordPress automatically starts a new paragraph with double line spacing. Press Shift + Enter keys on your keyboard together to insert a line break with single line spacing.

Add paragraph

Adding Tables & Columns

Often times, you’ll see the need to use tables or columns in your content. There’s no default to add either of these in the Visual Editor. You would need to write HTML tags in Text Mode to leverage these. The good news though is that you can use plugins. Plugins are functional packages of code that help you accomplish something specific on WordPress without having to write the code yourself. We’ll be talking more about plugins in another post. As an alternative, you can use online table generators to generate HTML tags for tables. But these often do not produce the desired results. So it’s better to stick to a good plugin.

Adding Video to Your Content

You can easily add video to your content using the Add Media feature/button in the toolbar, but this is not recommended. Most WordPress site owners find it easier and much better to host the video on YouTube or Vimeo, and then just simply include the link to it in the Post Editor. There are also a number of great WordPress plugins that also make it easy for you to ‘embed’ video content to your post.

Embed video

Other Post Editor Screen Options

The scope of this article is the WordPress visual editor, but you might also want to know a few more things about the Post Editor screen. In addition to the content editor, this screen also features other sections (commonly referred to as metaboxes) that highlight such things as the author, categories and custom fields. Be sure to check and see which of these sections you’ll need to use when creating your posts.

This article serves as an introductory guide to the WordPress visual editor. You’ll be able to create great content with the information I have included here. However, if you find some areas challenging, give it time and practice. Create practice post and test your grasp of the various toolbar icons. Hopefully, by the time you’re done with your first few practice posts, most of the important practical skills will be at your fingertips.

Playlists

Excerpt options