Posted on August 19, 2013 by
Spread the word...

We are now on to tutorial 3. We’ve looked at how to add new Pages and Posts -  now I would like to go into a bit more detail on how to use the text editor known in the industry as a WYSIWYG (What You See Is What You Get).

Use your mouse to hover over the icons in the image to get a description

wysiwyg-editor-tutorial

The instructions below are in relation to the image above in order of top-left to bottom-right.

Add Media

Used to add images to the content. Read the post WordPress Basics: Tutorial 1 – Adding a New Page.

Visual Tab

This tab is set as default and is the whole premise behind a WYSIWYG (What You See Is What You Get). This should show you how your content will look like on the website, but never put too much trust in this. Always use the preview facility to get an accurate view of your post or page.

Text Tab

This tab will allow you to see and edit the HTML code outputted by the WYSIWYG. Note that the WYSIWYG will sometimes output code you can’t see in this view.

Bold

Highlight a word or phrase and make it bold. Can be useful for SEO, but should be used to emphasis text in order to help the read digest the content more easily.

Italic

Highlight a word or phrase and make it italic. Can be useful for SEO, but should be used to emphasis text in order to help the read digest the content more easily.

Strike Through

This will put a horizontal line through the center of a word or phrase. This can be used if you wish in the future to update a post or a page while keeping the old content so the read can see what has been changed.

Ordered List

Used create a list. Put each item of your list on a new line, then highlight and use the ordered list button to turn it into a list.

Numbered List

Used create a numbered list. Put each item of your list on a new line, then highlight and click the button to turn it into a numbered list.

Blockquote

A Blockquote is often styled differently and is most often used to quote someone, but can be used to make a portion of text stand out from the rest.

Left Align

Aligns a body of text to the left. Often this is set as default.

Center Align

Aligns a body of text to the center.

Right Align

Aligns a body of text to the right.

Insert More Tag

You can use this to set what you wish to be displayed in the excerpt on the blog index or archive page. Depending on your theme, everything preceding the more tag will be in the excerpt.

Spellcheck

Use this to check your spelling.

Full Screen

This will make your WYSIWYG full screen removing all distractions while writing your page or post.

Kitchen Sink

A curious name, but will hide or show the second row of tools in the toolbar.

Format

Use this dropdown to create your titles and subtitles. Highlight the phrase you wish to format and select an item from the dropdown. Note: in most WordPress themes, the post of page title is your Heading 1. You should have only one heading 1 on a page. The other heading such as h2 to h6 can be used multiple times on a page. They are often styled differently according to priority.

Underline

This will underline a word or phrase. Note that on the web, an underlined word often indicates a link.

Justify

Used to justify a body of text.

Font Colour

This will change the colour of your font. If you use this make sure it doesn’t clash with your theme colours.

Paste as Plain Text

You can use this to copy and paste text from another text editing program. This will remove all hidden styling and formatting before placing the text within your WYSIWYG.

Paste Text from Word

You can use this to copy and paste text from Word and it will convert the styling and formatting adopted by Word into legitimate HTML. Note: images will not be copied across and should be uploaded separately.

Remove Formating

By highlighting a body of text you can remove all formating and styling.

Insert Character

Use this to insert special characters such as accented letters.

Outdent

Indent

Undo

You can also use the shortcut Ctrl Z on your keyboard.

Redo

Help

How to link words with the wordpress WYSIWYG

It is often useful and important for SEO to link parts of your page content to other pages on your website or to an external source. This is relatively simple to do. First, highlight the word or phrase you wish to link, this is known as the link (or anchor) text. Then in the toolbar of your editor, click the link icon which will no longer be greyed out. This will bring up the following box:

Wordpress link box

If you are linking to an external website, put the web address in the url field e.g. http://www.rocketmill.co.uk

link-url

You may wish a link to an external website to open up in a new window or tab. Do this by clicking the relevant check box

open link in new tab

To link to page or post within your site click Or link to existing content. This will bring up a list of pages and posts. If the list is extensive use the search. Then click the desired result.

link-same-site

Once you are happy with your link click the blue Add Link button bottom right.

Leave a Comment

Your email address will not be made public or shared. Inappropriate and irrelevant comments will be removed.