Your Totally Complete Guide to Customizing the WordPress Post Editor

Your Totally Complete Guide to Customizing the WordPress Post Editor

To give you a place to create posts and pages, WordPress uses TinyMCE, a platform independent web based Javascript HTML WYSIWYG editor control.

It offers a good, basic set of features that include bold, italic, quote, alignment, text color, paragraph style, etc. For the most part it does its job and it does it well. Your posts will look okay. They will use the CSS built into your theme, so you’ll have the basic fonts and styles. If you want a different font style, you’ll have to switch from the Visual editor to the Text editor and make your modifications in HTML. It works, but it’s time consuming and can be clunky.

But there is another option. You can use plugins or create your own code. Through using plugins or by coding by hand, TinyMCE can replaced or modified to give you more features to help you stand out from the crowd.

Plugins for Customizing the WordPress Editor

Of course plugins are much faster to deal with and get quicker results compared to writing your own code.

Here is a list of the best plugins to customize your WordPress editor. These plugins will give you some nifty features that can truly make your posts sparkle.

  • TinyMCE Advanced

    This free plugin will let you add features to the WordPress WYSIWYG editor. You can rearrange, add, and remove buttons in the Editor’s toolbar. The tools you can add include: tables, options for inserting lists, find and replace, set font size and style, and more.

    Some of the functions are easy enough just from the standard editor, but with the addition of tables and options for lists, this plugin gives you a lot of added functionality.

    Interested in TinyMCE Advanced?

  • WP Edit

    This plugin has a free and pro edition that gives you lots of added features, buttons, and options. The free edition alone has a lot of new features. It gives you a drag and drop function to create a custom top row of editor buttons. It also adds new editor buttons such as subscript, superscript, insert media, emoticons, search and replace, html editor, preview.

    You can add a custom editor to excerpt areas, which even includes profiles. You can highlight posts and pages based on their status, use shortcodes in excerpts and widgets, and even import and export your settings if you want.

    The Pro edition adds the Extreme Custom Widget Builder. This is a tool that lets you create custom widgets like posts or pages. You can insert them into the content area or into any widget area. It adds a drag and drop function to create custom buttons for any row of the editor. It also adds custom button arrangements based on user roles. It is WP Network Ready, so you can install it over the network. This plugin adds: an advanced code editor, custom editor styles, a format painter, advanced image editor, shortcodes to add columns, predefined styles, and much more.

    It also includes one year of support and updates.

    The single version is $35 and can be used on two sites. The Single Extended version is $69 and can be used on 5 sites. The Multisite version is $149 and can be used on an unlimited number of sites. The Developer version is $279 and adds reseller possibilities. All versions can be extended by one year at a fraction of their initial cost: $10, $20, $35, and $65.

  • Visual Editor Custom Buttons

    The Visual Editor Custom Buttons plugin lets you add custom buttons to your WordPress editor. It simplifies the process of creating and customizing your buttons. You can add custom buttons using the Visual editor or the Text editor, add HTML code to your button, adjust the CSS, and view the affect in the visual editor. It comes with plenty of button icons built in, and of course you can add your own, too.

    Interested in Visual Editor Custom Buttons?

  • Plug-N-Edit Drag & Drop HTML Visual Editor with Web Page Builder WYSIWYG

    This one is a free plugin with a drag and drop WYSIWYG editor to create your posts and pages. It uses an adaptive and responsive HTML editor for 3D page building to give you height, width, and depth, so you can layer your images, text, or whatever you want to place in your post. It will import your site’s CSS, so the pages you build with it will match the rest of your site.

    You can create buttons, clone items, use Google fonts, and more. When you’re done editing, just save it and it places the code into your editor, where you can publish as normal. It has full access to your media, so you can use all of your images, videos, etc. It comes with images you can use as backgrounds in your posts, too.

    Using this plugin takes you away from your WordPress editor, so it doesn’t make any changes to your editor other than adding a link. It gives you the option to use either editor, depending on your needs at the time.

    This is an amazing plugin, especially considering it’s free. You can make some really nice layouts and posts with it. Using it is intuitive, so there’s not much of a learning curve.

    Interested in Plug-N-Edit Drag & Drop HTML Visual Editor with Web Page Builder WYSIWYG?

  • CKEditor for WordPress

    This one replaces your current editor and adds a ton of new buttons and features.

    Features include buttons for cut, copy, paste as plain text, paste from Word, undo, redo, find, replace, select all, spell check (with options), numbered list, bullets, decrease indent, increase indent, block quote, alignment, text direction, language, link, anchor, more break, image, flash, table, horizontal line, smiley, special characters, iFrame, bold, italic, underline, subscript, superscript, remove format, format, font, size, text color, background color, maximize, and blocks. You got all that? Whew!

    The toolbars are customizable. You can even customize the skin. This plugin has a built in read more button that shows up on the page where it will be seen on the screen when you mouse over it. It’s automatically inserted into the content but you can delete it if you want.

    It can also integrate with several other plugins including Viper’s Video Quicktags, WP-Polls, GD Star Rating, and NextGEN Gallery. Unfortunately, it can’t be used with HTML editors such as the HTML Editor Syntax Highlighter. Instead, HTML is handled through its own editor, which looks really nice. It doesn’t color-code the tags for you though.

    Interested in CKEditor for WordPress?

  • RichTextEditor

    This free plugin is a WYSIWYG text editor that creates clean HTML code. This one is filled with intuitive features for your text. It has a configurable toolbar that bears similarity to the Microsoft Office Ribbon. It has four areas with tools: Common, Format, Paragraphs, and Insert.

    Common covers your basics: copy, cut, paste, save, new, undo, delete, find and replace, etc. One really nice feature is the format painter. Paste from Word lets you insert clean HTML code from Microsoft Word, so you don’t get slow page-load times due to Word’s unnecessary markup. You can also paste from regular text.
    Format is the text formatting functions: font style, size, bold, italic, underline, font color, back color, superscript, subscript, change case, remove format, select all, and clean up HTML. The feature for cleaning up HTML is a nice addition to help with speeding up your page load time.
    Paragraphs contains all of the paragraph styling and formatting: It includes paragraphs, styles, justify, line height, left to right, right to left, line break, ordered list, bullets, outdent, indent, and block quote.
    Insert adds even more functionality: It not only gives you an easy way to add your media, but also adds new features. It includes table, form, layout box, layer, fieldset, window, border, page properties, link, anchor, date and time, special characters, keyboard (for onscreen use – great for writing with a tablet or smartphone if you don’t want to use the one that’s built in to your device), image gallery, image, template, PDF, video, syntax highlighter, YouTube video, HTML5 tags, and Google Maps.
    You can drag to resize the writing space in both height and width. At the bottom are tags to change from design, source, and preview.

    These same features also appear on the back end for your comments. Readers can’t use them from the front end, though. You can turn this off in the settings if you wish.

    Advanced settings let you choose the paths for your media so you can link your images, video, gallery, and documents to the Insert buttons.

    Interested in RichTextEditor?

  • Jetpack

    Jetpack has a lot of features that add a lot to WordPress. Only a few of them modify your editor. One addition is the Contact Form. This feature will let you create a contact form that can be used in any post.

    You can customize the fields, add as many fields as you want, and control how you receive the responses. You can customize your submit button and your notification emails. Plus, you can reuse any contact form you want by inserting a shortcode on the page.

  • Pods – Custom Content Types and Fields

    Pods is a framework that makes it easy to add custom content and fields to your posts from your editor. The only modification that it makes to your editor is a single button to access your pods. This is a link that allows you to choose from the pre made content—or pods—that you’ve already made in another screen. It places a shortcode in your post that you can move around anywhere you want.

    Interested in Pods – Custom Content Types and Fields?

  • Just Writing

    The Distraction Free Writing Mode in WordPress 4.2 is a great way to focus on just the text, but it could use a few more features. This is a plugin to enhance the distraction free editor and still keep it distraction free. It has drop down boxes where you can select paragraph and formatting styles, allowing you to see your text the way it will appear in the post.

    Buttons include Visual, Text, bold, italic, strikethrough, underline, remove formatting, bullets, numbered list, image, link, alignment, outdent, indent, paragraph, proofread, insert more tag, undo, redo, save, preview, and exit. You can remove any of the buttons you want, so you can have even less on the screen to distract you if you want.

  • HTML Editor Syntax Highlighter

    This is an excellent tool for those that like to write HTML code within their posts. Even simple code needs debugging and this plugin makes debugging from your WordPress editor a snap. You can code in full screen mode if you want.

    It adds buttons for H1, H2, and H3 tags as well as comments. It removes the button for close tags because they are not needed when using this editor. Selecting Code will give you both sets of brackets (open and close) and will place your cursor within them. It displays line numbers for easy reference, too.

    You can change the font size independently of the font that will be displayed in the post. The line you’re typing on is highlighted in blue, making it easier to see where you are in your code.

    The main advantage to this plugin is the syntax highlighting. The code is color-coded to make your coding sessions much easier. It highlights the syntax, making the code much easier to read. The tags are colored green and your text is black.

    You can save your posts by selecting crtl+s for PC and cmd+s for Mac.

    There is a light and dark theme that you can switch between with a button click, so you can choose the one that’s the most comfortable to your eyes. Unfortunately, this plugin only affects the code in the post and page editor. For themes and plugins you will need a different plugin like Advanced Code Editor.

    Interested in HTML Editor Syntax Highlighter?

  • WP Editor

    WP Editor is another plugin that adds features to the HTML coding side of your WordPress editor. It will replace your post and page editor as well as your plugin and theme editor. It gives you some great features for creating fast and clean code. It adds line numbers and color-codes your HTML so it’s easy to spot what is what. It has line wrapping, editor themes, search, full-screen mode, and FancyBox for image viewing. Additionally, it provides separate settings for the posts, plugins, and themes editors.

Code

And speaking of code, rather than adding features via plugin, you can always code your own. Here are a list of tutorials from around the web that make it easy to add great features to TinyMCE.

Display the Full TinyMCE Editor in WordPress

First off, the TinyMCE features have been reduced in recent updates to make your visual editor cleaner. You can easily bring them back so you have full access to the full 26 kitchen sink buttons. This tutorial is from right here at WPMU DEV and shows you how to unhide the buttons with just a few lines of code. This one is just too easy to ignore.

To turn the buttons on, place this code in your functions.php file (code from Display the Full TinyMCE Editor In WordPress):

All 26 buttons will now be useable, opening up the full functionality of your visual editor.

The Post Editor with full array of buttons.

TinyMCE Custom Styles

TinyMCE has an API that can be used to make custom styles. These styles can be inserted into your posts from the Visual editor. This uses a hidden button called Styleselect. To use this, you will need to activate Styleselect and define your styles that will show in your pull-down menu. This code will go in your functions.php file or you can use it in a plugin.

NOTE: This code is taken from the WordPress Codex.

Enable the Stylesheet

This will activate the stylesheet pull-down menu in the Visual Editor. You enable the stylesheet by filtering the buttons that are loaded into TinyMCE. This tutorial will show you how to add these buttons to the second row, so the filter we will use is mce_buttons_2.

Registering Custom Styles

Once the stylesheet filter is in place, you have to register your styles. You can do this by using the style_formats array within your TinyMCE configuration array. This way you can register each style with several configuration settings.

Making Visual Editor Display Styles

In order to get your styles to display, they have to be registered in your CSS. For this you will use add_editor_style(). This will let you link a custom stylesheet file to your visual editor. The code looks like this:

Here’s what it looks like when added to the functions.php portion of your theme:

Next, you will need to create a file named custom-editor-style.css and place it in your themes root directory. Any CSS rules that you add to this file will then show up in your visual editor. Here’s an example of what this might look like:

Using Google Fonts

If you want to use Google Fonts, you can insert this code. This will bring in the styles from Google’s CSS file. It includes multiple variants of type-faces.

Reusing Your Theme Styles

If you want to use the styles from your theme’s stylesheet, you can import them into your custom editor stylesheet. This code goes into the custom-editor-style.css file:

WordPress WYSIWYG Editor Customization

This code from Alex Bulat will add four extra buttons to your Text editor. The buttons it will add are:

< p >, < br >, < h3 >, and < h4 >

This is a great solution for those that spend more time in the Text editor that the Visual editor.

To add these buttons to your text editor, add this code to your functions.php file:

This code will allow you to create your own button:

You would then change these parameters:

  • button ID
  • button value
  • button Tag Start
  • button Tag End

Add Custom Styles to Visual Editor

This code from WP Beginner shows you how to add your own custom styles drop-down menu to the visual editor so you can add buttons, content blocks, taglines, and more. The buttons allow you to choose your styles without having to switch between the visual and text editor.

Place this code into your function.php file. It will add a custom styles drop down menu to the second row of buttons on your visual editor.

Now that you have the second row of buttons, it’s time to fill the buttons with options. Place this code into your functions.php file:

Now you need to make sure these styles are available in your CSS file. Add this CSS code to your theme’s stylesheet and editor-style.css file.

If you don’t have an editor-style.css file, use the following code to create one. Place this code in your theme’s root directory and then add this code in your theme’s functions.php file.

You’ve now added your very own styles to your visual editor and you can access them quickly through drop down buttons. Of course, you can change the colors to anything you like, too.

Wrapping Up

There are a lot of fine choices for sprucing up your WordPress editor, and practically all of them are free. One thing’s for sure: they give you some simple functions that will make your posts shine brighter than the standard WordPress editor can. At least without spending a lot of time to get good results!

Have you done any mods to your WordPress editor? Did you use code, plugins, or both? Have you used these or any plugins that I didn’t mention? Let us know in the comments below.