Customising the Visual Editor

Wouldn’t it be awesome if you could use proper HTML in the editor, and have it not break when you switch to the Visual tab?

You can always customise the editor-styles.css file to make the editor show DIVs and other blocks — but these can be easy to break while editing, and a user can’t add a new block in the way they could insert an image of add a new heading.

Luckily, there are a few other options available. You can customise the visual editor in WordPress to not only show your styles, but also to allow users to insert your custom created blocks.

Here’s a round-up of the plugins that give you the ability to make WordPress a more complete CMS.

Visual Editor Custom Buttons

Allows you to create a new icon on the editor toolbar which, when clicked, inserts your code. You can either insert your code as a single block – say, a column grid template users can edit – or you can wrap selected content in your code, like when you change a paragraph into a heading.

You can also add your own CSS to style your code on a per-button basis. This means yo udon’t need to edit editor-styles.css, but also that your styles are kept if the themes are switched.

TinyMCE Professional Styles

The visual editor already lets you add certain classes to certain elements – like “alignright” on a paragraph. You can actually add your own formats, but it takes a while to learn how.

This plugin lets you add new formats quickly, shows all of your new formats, and includes documentation on the setup page.

This would let you, say, create a format Named “Image Border” that applies a class of “imgborder” to any images. Then, if a user clicks on an image in the post editor, they’ll have the option to use the Image Border format. Selecting the format will add your class, and clicking it again will remove the class.

You could also use this to allow adding a class of “fanxybox” to links – combine this with repeating custom fields, and users can make their own lightboxes.

It’s worth noting too that you can determine which elements accept your format – so you could stop users from accidentally applying that “imgborder” class to links.

The available options are quite expansive, so it’s well worth having a look. The examples given here don’t do justice to how powerful this plugin really is.

Other Plugins

Forget About Shortcode Buttons lets you quickly insert buttons in a range of configurable styles. Selecting your buttons and changing their styles is quick and simple. The buttons are pretty garish though, and probably wouldn’t be usable on a commercial site.

The plugin Crazy Pills does a similar thing to Forget About… – and like FASB, it’s real-life applications are limited.

There’s also the plugin collection named WP Editor. It’s downloadable only from wp-editor.com, but lets you create info boxes, buttons, and columns. Only the latter is really useful for website development, but they’re all worth downloading if you’d like to learn more about how TinyMCE plugins work.

Categories: WordPress
Tags: ,