Wordpress
Editing Tools

This icon indicates that there is a screen capture or animation describing the concept.

This icon indicates that there is a sound clip describing the tutorial.

Tutorial Overview

Topics covered in this Wordpress tutorial (click link to jump to topic):

1.	Introduction
2.	What the Tools Do
3.	Movie
4.	Other resources

Introduction

Wordpress comes with a "visual editor". This is a screen that allows you to edit text and insert pictures. Visual editors are sometimes refered to as WYSIWYG editors. That stands for "what you see is what you get". MS Word is a WYSIWYG program for example.

You will be using the visual editor quite a bit in Wordpress, so having a good understanding of what the tools do will be useful.

What the Tools Do

At the top of the visual editor you will see at least one row of little icons. These are the editors tools.

B - This Bolds your text.
I - This provides italics.
ABC - is the strike through option, it allows you to rule a line mid line height through text. This is useful to display price changes.
Bulleted list or "dot points" or in HTML what we refer to as unordered list
Numbered list or ordered list. Both bulleted and numbered lists indent from the left column. Some wordpress themes remove this indent.
Blockquote indents a para from the left and right margins This is useful when you are quoting and want things to stand out.
Alignment. The next three buttons determine the alignment of your text. If you want it left aligned, centered, or right aligned text, block the text and choose the appropriate button.
Insert a link. The next option deals with creating hypertext links (these are words you can click to visit a different website). Notice how it is grayed-out until you block a word or words in the visual editor. The first button creates a link. To make a link:

highlight the text to make a link and click that button.
Type in the URL, including http://
The target is if you want the link to open up in a new window or the same window. (leaving the option at Not set bases the behavior off the users default browser behavior)
Title is what will appear when someone hovers over your link (the ALT text)
Class deals with custom CSS code.

The next button inserts a more tag, which lets you write an introductory paragraph, and have only that show up on your front page, it will create a "click here to read more" message, and when they click, they will see the whole post (on a new page).
The next button is your spellchecker which helps you check your words for spelling errors.
The next button makes this screen take up your full screen, stripping off the left and right columns and giving you more space to write with.
The last button either shows or hides the kitchen sink.

The following is what occurs on the second row of icons on the visual editor.

The format drop down menu, lets you select some text, and change how it is formatted. This lets you choose between paragraph text, as well as your HMTL header tags such as h1, h2 and h3.

The next option underlines your text. This isn't very useful as people may mistake your underlined text for a link, so you should use it sparingly.

The next button aligns your text as "full" or justified. Again, this isn't that useful. It will stretch the text out to full the whole column width, making the text less readable.

The A will change the colour of your text, again be careful with this, as most links are a different colour and your user may interpret inline text that is a different colour to be a link.

The next 2 buttons are for pasting in text from other programs. The first one is from a plain text editor, and the second is for Microsoft Word. It gets rid of all the non-standard editing Word applies to text.

The eraser will get rid of custom formatting.

The Omega symbol allows you to insert symbols into your blog.

The next two are your undo and redo (does the same thing as ctrl+z in other desktop applications).

Movie: Wordpress Editing Tools

Other Resources

http://codex.wordpress.org/Writing_Posts

Return to top

[Web Site Design] [Search Engine Submission] [Web Site Hosting] [.AU Domain Name Registration] [Web Marketing Blog] [Sitemap] [dynamicwebs.com.au Homepage]