How to use the WYSIWYG editor

Published: July 2014

The WYSIWYG (what you see is what you get) editor is a powerful tool that helps you manage and style the content on your website quickly and correctly. It comes with plenty of functionality but does have a few traps that need to be avoided when using it to add or update content on your website.

How to use the WYSIWYG editor

Before we begin, make sure you’re in “Visual” mode. To check this, simply click “Visual” at the top right of your editor panel. This is the mode you will always want to be in when adding or editing content.

The most basic functions of the WYSIWYG editor include general text styling such as bold, italics and underline. All these features plus a few more are located at the top of your editor panel and to apply them to text, simply highlight the text you want to make the change to and hit the button that corresponds to the style you want to apply to the highlighted text. To remove the style, simply highlight it again and press the same button, notice that the button may be indented to show you that a style has been applied and you should see the results live in-front of you.

So on the top row from left to right we have the follow controls…

Bold – Makes text bold
Italics – Makes text italic
Strikethrough – Gives text a line through the middle
List – Gives a list of text items bullet points and styles them as a list
Numbered list – Gives a list of text items numbers and styles them as a list
Quote – Styles the text to be a quote
Align left – Aligns the text left
Align centre – Aligns the text centre
Align right – Aligns the text right
Add link – Adds a link to another page or website
Remove link – Removes a hyperlink from the text
Insert more – Gives text a read more tag (not something generally use)
Full screen editor – Makes your editor full screen for easier writing
Kitchen sink – Toggles more WYSIWYG functionality

Creating lists

Most of these are quite simple to use, you highlight some text and click it to use that style however, some can be a little trickier. For example, when creating lists its best to type out your list on separate lines then highlight the whole thing and click the  list button or the  numbered list button. If you try and copy in lists from places such as Word, it may look out of place as it will style it differently to the rest of your site.

Adding links

Another really useful tool from the editor is the add link  tool. This allows you to add links from your content to other pages or  websites. You start by highlighting the text you want to make into a link, and then hit the add link  button.

A popup will appear and ask you for some information about the link so in the URL you need to enter the address of the page you want, for example https://www.urbanriver.com. Note that I put http:// at the start and you must include this otherwise your link won’t work! The second item it asks for is a title which is essentially a description of what you’re linking to and generally should be 2 to 6 words in length. The last item is a check box, if you’re linking to a page on a different website, then make sure you check this so the link opens in a new window, if you’re linking to another page on your own website, then leave it unchecked so we don’t flood the user with new windows while navigating your website.

You can also use the “Or link to existing content” where you can search for a page or post that is on your website, click it and it will do the rest for you, acting as a shortcut for adding links to content on your website.

To remove links, simply highlight the link and click the remove icon  simple as that really.

Advanced WYSIWYG tools

So when we toggle the kitchen sink  button you will see the following tools…

Format – A drop down box that styles your text
Underline – Similar to the bold and italics, it just adds a underline to your text
Align full – This styles your text to fill the full width of a page much like a newspaper column
Colour – This allows you to change the colour of text
Paste as plain text – This allows you to copy some text from elsewhere and past it into your editor as plain text with no styling
Paste from word – This allows you to copy directly from Word documents (but generally this is not advised, more on this later)
Remove formatting – Removes any formatting or styling from the highlighted text
Insert custom character – Allows you to put in special characters
Outdent – Lets you outdent text
Indent – Lets you indent text
Undo – Undo your last action, very useful
Redo – Lets you redo the action you undid, for those who can’t make their minds up

Format

Many of these are pretty simple but there are a couple that we should touch on. The Format tool which is displayed as a drop down that allows you to style blocks of text as headings or paragraphs. This is very useful because it means that you don’t have to manually style all your headings, simply highlight the heading and set it as Heading 2. To get another slightly smaller heading to use as a sub-heading underneath your Heading 2, then simply highlight that and set it to Heading 3. General text like the stuff you’re reading now should be set to Paragraph.

A quick note on Heading 1, you shouldn’t use Heading 1 as your page title will be using that and to keep inline with web standards, we only ever have one Heading 1 on each page, so it’s best to start at Heading 2 and work your way down from there.

Pasting text

If you copy text, you can use the pasting tools that are provided however, this is one of the WYSIWYG’s traps, they don’t always paste correctly. This means that if you paste something from a Word document you’ve written, when you paste it it may bring over some hidden styles or formatting from Word (which we really don’t want as it interferes with our website styles).

To get around this, the best practice is to simply create your content inside of the WYSIWYG editor and save your pages or posts as draft if you want to work on them over multiple sessions. Failing this, copying from Word into Notepad and then finally into the WYSIWYG editor fixes the problem of rogue styles coming across with your text.

Some things to take note of…

1. The WYSIWYG editor is not a perfect representation! Always use the preview button before publishing your content.
2. Pasting text is bad, as mentioned in the previous section, try and create your content directly into the WYSIWYG editor or use the steps outlined earlier.
3. Things occasionally move around depending on what version of WordPress you are currently using, this means that some of my pictures might not coincide with your editor, but the icons are generally kept the same so keep an eye out for them if you can’t find something.

So that’s it for this weeks WordPress Weekly! The WYSIWYG editor is such a powerful tool that has so many editorial features that we could publish a book on it however, it remains easy to learn and use which is what makes it such a great part of WordPress.

For more content editing, you can head over to our image editing article…