Writing posts with the WordPress visual editor – the “kitchen sink”

A few months ago I wrote a post on the basics of the WordPress visual editor.  In that post I mentioned the “kitchen sink” button that opens up a second row of editing controls.

In this post I’ll describe what each of these controls does.

The drop down menu that appears at the left of the row opens up a menu from which you can choose how to format your text.  The options in the list will use information in your cascading style sheet (CSS) to determine how exactly to format the text.  The CSS is is the style.css file found in your WordPress theme folder.

For example, choosing “Heading 2″ will look in your CSS for the h2 style information, which will generally include font type, size, and any other text effects that should be applied.  In my CSS it looks like this:

h2, h2 a, h2 a:visited {
	font-size: 18px;
	font-family: Arial, Sans-Serif;
	font-weight: Normal;
	color: #5f5f5f;
	text-decoration: none;
	border: none;
	}

Yours may look similar or very different depending on your theme.

The next button is the underline button.  This button works as you would expect it to by underlining text like this.  Because most people use underlines as a text decoration for hyperlinks in their blog posts it is not very common to use the underline button on other text within a post.

The “Align full” button is also seldom used.  Most writers who want fully aligned text will usually choose a WordPress theme where this is defined within the CSS.  However if you find you want to fully align just a small piece of text then you would use this button.

The button marked with the letter “A” opens a drop down list allow you to change the color of text.  You can use this to change text to just about any color you want.

Although it can be useful to use color to emphasise specific parts of your blog posts you should be careful not to choose a color that makes your reader think the text is a hyperlink that they can click on.

The “Paste as Plain Text” button opens a window into which you can paste text from other sources that you wish to include in your blog post.  This text is then stripped of all formatting and added to the post as plain text.  This helps avoid formatting problems when pasting from sources such as other websites where formatting is already applied to the text that may clash with your own formatting.

The “Paste from Word” button works in much the same fashion as “Paste as Plain Text”, and is useful when pasting text from applications such as Microsoft Word or Excel.  Although the text is neatly inserted into your blog post it will retain some characteristics such as hyperlinks.

The “Remove formatting” button is handy if you’ve pasted some content into your blog post without using either of the previous buttons and have found that the formatting is inappropriate.  You can select the newly pasted passage and click this button to remove all formatting.  This has the same outcome as though you’d used “Paste as Plain Text” in the first place.

The “Embed media” button opens a dialog box to embed some external media into your blog post, such as a Flash or Window Media movie file.  You can specify the URL to the media file as well as advanced options such as the size you wish to embed it at and whether to autoplay the file or not.

The “Insert custom character” button opens up a dialog containing a list of non-alpha characters that you can insert into blog posts, such as ©, ®, Ð, and ?.

The “Outdent” button is used to move text to the left by 30 pixels.  However since most text is already as far left as it can go you would usually only need to use this button if you’ve indented some text too far.

The “Indent” button moves text to the right by 30 pixels.  If you want to indent text even further you just press it again and the text is indented a further 30 pixels.  In some WordPress themes using the indent button will change the text to a blockquote.

The “Undo” button can be used to undo mistakes.  Pressing the undo button will reverse the last action you too.  Typing would be considered one action, so if you type a long sentence and then hit undo it will remove the entire sentence.  However if you type a long sentence, then format part of it in bold, pressing undo will remove the bold formatting.  You can also press undo several times to reverse consecutive actions.

The “Redo” button will undo an “Undo”! If you’ve accidentally hit undo for something you didn’t want to remove you can hit redo to put it back again.

Finally the “Help” button will open a dialog with a few tips on how to use the visual editor.  Although it is handy for beginners it is not very comprehensive and doesn’t describe every function within the visual editor.  However it is a good start for beginners.

If you found this post useful please leave a comment below. To receive new blog posts automatically subscribe for free to the mailing list or RSS feed.

Leave a Comment

{ 4 comments… read them below or add one }

BeatlesLane March 6, 2009 at 10:24 am

Thanks for the tips. Can you tell me how to prevent Auto-Play of MP3s when embedding Windows Media Player or QuickTime? The advanced options setting doesn’t seem to work! Also, is there a way to set the volume to maximum as the default? Thanks!

Reply

Rob Cubbon { May 3, 2009 at 11:23 pm

Thanks for this explanation and the great tips that went with each tool. It’s good to know you can set h2 and h3 headings in the visual editor. Thank you.

Reply

dennis mccarty February 12, 2010 at 11:17 am

I believe there’s a third set of icons for the WP editor one of which contains a Fonts selector. I saw it used in an on-line web marketing class where the instructor, Chad Webber, dragged it from somewhere off screen, but I never could see it. I really need a font selector. Any Ideas? Thanks.

Reply

Paul Cunningham { February 20, 2010 at 10:16 pm

Can’t say I’ve seen something that matches that description Dennis. I wonder if they were using an additional plugin for that?

Reply