As a developer you frequently need to build in complex design features. Sometimes, these styled elements look like they should appear in the main content area, but because you can’t use proper HTML in the page editor, they have to be separated off into widgets of using custom fields.
You can always customise the editor-styles.css file to make the editor show your blocks in a styled way – 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.
That doesn’t have to be the case though! 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.
This plugin 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, as you can already do when changing paragraphs into headings.
You can also add your own CSS to style your code on a per-button basis, so you’d never have to edit editor-styles.css.
One example of using this plugin would be to create a button that lets users insert a featured content box with multiple columns and a placeholder image.
You could also use it to insert your own custom shortcode, or even to allow users to create accordions without needing use shortcodes.
You can add your own formats to TinyMCE (which is what WordPress uses for the visual editor), but doing so is a bit fiddly and time consuming. This plugin lets you add new formats quickly, shows all of your new formats, and includes documentation on the setup page.
The settings are very flexible and you have about as much control over formatting changes as WordPress offers you with the existing visual toolbar buttons.
For example, you could could create a format named “Image Border” that applies a class of “imgborder” to any images. Now, when 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. Clicking it again will remove the class.
Another example would be to allow users to add the class of “fancybox” to links, letting them create their own lightboxes.
Formats appear in a dropdown menu next to the dropdown that normally says “Paragraph”. The menu will list all the formats you’ve created, and formats can only be used on elements you’ve allowed usage for. In the example, since you set the class to be added to images only, users won’t be able to add the class “imgborder” to links or paragraphs.
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.
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. This one is not recommended though, as it’s not really suitable for website development. As simple as the plugin is to use, you’d probably prefer not to have users creating bright, bold buttons everywhere in an otherwise understated and calm website design!
The plugin Crazy Pills does a similar thing to Forget About… – but 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 TinyMCE plugins.