There is a superior visual editor for WordPress that you can install and configure to your site in 2 minutes. It’s called TinyMCE Advanced. It offers a rich expansion over the default editor, particularly:

• Imports all CSS classes from the main theme stylesheet and add them to a drop-down list.
• Support for making and editing tables (with a very cool context sensitive menu to add, delete and merge columns and rows, set table properties etc).
• In-line CSS styles.
• Advanced link and image dialogs that offer a lot of options.
• Search and Replace while editing.
• Support for XHTML specific tags
• Add/remove (div based) layers, with relative or absolute positioning via drag-and-drop etc.

Here is how it works:

1. Search, install and activate “TinyMCE advanced” from Plugins > Add new
2. In Settings > TinyMCE Advanced, drag and drop as many icons as you want (or all of them) from the bottom panel onto the 3rd line of the toolbar.
   
3. Check “Import the current theme CSS Classes” at the bottom
4. “Save Changes”

Now (for example) in your visual editor, highlight any text and choose the applicable style (ie. “redcheck”) from the drop-down:

Your style will be applied:

Notes:

1. If you are using Firefox, the context menus Cut / Copy / Paste are disabled by default by the Firefox security settings (which can be very annoying). You will need to enable them using the information in this article (installing the AllowClipboard Helper plugin).
2. The function to import the current CSS doesn’t work in Atahualpa or other CSS files that are automatically-generated or complex. You will need to cut-and-paste into the TInyMCE custom CSS file (see the bottom of Settings > TinyMCE under “Advanced”)
3. Only “pure” CSS classes will get imported, ie. “div.redcheck {…}” won’t work and neither will “.redcheck li {…}”

For more information on changing list and bullet style in WordPress see also the following article.

Comment on Facebook!