The content editor is a key part of WordPress. It allows users to create and manage their content, galleries and videos, in a Visual WYSIWYG (what you see is what you get) view. It also comes with a Text view, which allows users to insert or amend HTML within their content. The WordPress Visual Editor is powered by the TinyMCE editor control, which provides the WYSIWYG view, as well as the formatting buttons you see: Thanks to the TinyMCE API and WordPress’ filter hooks, we can add our own functionality to the WordPress Visual Editor. Specifically, we’ll look at how to create and register a custom TinyMCE Plugin which wraps selected text in a CSS class. Creating the TinyMCE Plugin In your WordPress website, create the wp-content/plugins/tinymce-custom-class folder. We’ll store our plugin’s files here, so next create a file called tinymce-custom-class.php, using the following code: /** * Plugin Name: TinyMCE Custom Class * Plugin URI: http://sitepoint.com * Version: 1.0 * Author: Tim Carr * Author URI: http://www.n7studios.co.uk * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor * License: GPL2 */ class TinyMCE_Custom_Class {
Share This