WYSIWYG Formatting with the Wunderbar

There are a lot of buttons in the Wunderbar when you edit a post's content or excerpt (but not when editing titles, because formatting titles isn't permitted). If you do any amount of word processing, most of these buttons will look familiar to you.

The majority of the buttons do what you expect – changing font colors, aligning text, an so forth. You can apply quite a lot of formatting to a page this way.

Where things differ from an ordinary word processor, it is because we’re not dealing with a paper document, but with a web page. So there are buttons for managing hyperlinks, for editing the raw HTML Hypertext Markup Language source that makes a page look like it does, and other special functions.

The formatting buttons listed below are grouped by function and described from left to right:

Boldface, Italics, Change Case

Bullet points, numbered lists, indented and outdented text, quoted text, text alignment

Heading and paragraph styles, font overrides, size overrides, line height options

Font color, background color, remove excess formatting

Create/edit hyperlink, remove hyperlink, create/edit anchor point. Images and documents can also be dragged directly into the editable area.

Upload a picture, upload a file, open the Media Browser, create/edit table, insert horizontal rule, insert special characters, create/edit DIV

Find, find & replace, paste from MS-Word, paste as plain text, view/edit HTML source

Our quick reference guide has a handy review of each function. Download it here

A word about styling

Before you put on your Creative Director hat and start experimenting with fonts and colors and sizes, remember that someone already developed guidelines for the site’s look and feel. You should work within those until they become too restrictive. For instance, don't make a font bigger using the size dropdown – first, try the format dropdown and see if one of those works. Your pages will be more consistent, and your content will be better respected by search engines in the bargain.

Hyperlinks

Web pages differ from word processing documents in one important way – hyperlinks. Adding links is easy. All you need to know is which page, post,  or website you want to link to.

You first highlight the range of text that you want to turn into a hyperlink; then click the Hyperlink button (the one that looks like two links of chain). In the resulting dialog box you specify what you want to link TO. You can enter the page or post name by hand — eg: something like /index.html or /termsandconditions.html. You can enter the name of an external website (including the “http://” part) — for instance, http://google.com. Or you can select one of your WordPress pages or posts from the drop down lists. Then click OK and your link is created.

Adding pictures and files

You can add pictures or files (like PDF  files or Word documents) to your content  by simply moving your cursor to where you want the image or PDF to go, then dragging the file right onto your edit area. The file will be uploaded then displayed or linked in place.

Drag and drop works with most web browsers. If your browser doesn't support drag and drop (or you're that's not your style) the “add an image” and “add a file” buttons will do the same job.

Once an image is in place, you can modify it further. The corners of the image are handles that let you resize the picture. Hyperlinks to files are standard links whose text can be edited by moving into the text and retyping. Double clicking an image or a link will bring up a a dialog box where you can adjust options further, for instance adding a css style class.

All objects are added to the WordPress Media library. A Media button in the Wunderbar gives you access to the Library, for when you need to add an existing object to a page.

Right-click for Context Sensitive options

Right-clicking on things while editing will typically bring up a menu with additional useful options.  You can right-click on photos to get a context-sensitive menu of additional options. Hyperlinks work similarly.

You can right-click on tables, too. Table positioning and styling is available, and adding or deleting rows is handled this way.