{"id":135189,"date":"2015-01-14T08:00:00","date_gmt":"2015-01-14T13:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=135189"},"modified":"2015-01-27T22:19:07","modified_gmt":"2015-01-28T03:19:07","slug":"customizing-wordpress-post-editor","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/customizing-wordpress-post-editor\/","title":{"rendered":"Your Totally Complete Guide to Customizing the WordPress Post Editor"},"content":{"rendered":"<p>To give you a place to create posts and pages, WordPress uses <a href=\"http:\/\/www.tinymce.com\/\" rel=\"noopener\" target=\"_blank\">TinyMCE<\/a>, a platform-independent web-based Javascript HTML WYSIWYG editor control.<\/p>\n<p>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\u2019ll have the basic fonts and styles. If you want a different font style, you\u2019ll have to switch from the Visual editor to the Text editor and make your modifications in HTML. It works, but it\u2019s time-consuming and can be clunky.<\/p>\n<p>But there is another option. You can use plugins or create your own code. Through using plugins or by coding by hand, TinyMCE can be replaced or modified to give you more features to help you stand out from the crowd.<\/p>\n<h2>Plugins for Customizing the WordPress Editor<\/h2>\n<p>Of course, plugins are much faster to deal with and get quicker results compared to writing your own code.<\/p>\n<p>Here is a list of the best plugins to customize your WordPress editor. These plugins will give you some nifty features that can truly\u00a0make your posts sparkle.<\/p>\n<ul class=\"dev-tutorial-list\"><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">TinyMCE Advanced<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/tinymce-advanced-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"TinyMCE Advanced image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>This free plugin will let you add features to the WordPress WYSIWYG editor. You can rearrange, add, and remove buttons in the Editor&#8217;s toolbar. The tools you can add include: tables, options for inserting lists, find and replace, set font size and style, and more.<\/p>\n<p>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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in TinyMCE Advanced?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">WP Edit<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/wp-edit-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"WP Edit image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<p>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.<\/p>\n<p>The <a href=\"https:\/\/wpeditpro.com\/\" target=\"_blank\">Pro edition<\/a> 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.<\/p>\n<p>It also includes one year of support and updates.<\/p>\n<p>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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in WP Edit?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wp-edit\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Visual Editor Custom Buttons<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/visual-editor-custom-buttons-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Visual Editor Custom Buttons image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Visual Editor Custom Buttons?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/visual-editor-custom-buttons\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Plug-N-Edit Drag & Drop HTML Visual Editor with Web Page Builder WYSIWYG<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/plug-n-edit-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Plug-N-Edit Drag &amp; Drop HTML Visual Editor with Web Page Builder WYSIWYG image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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\u2019s CSS, so the pages you build with it will match the rest of your site.<\/p>\n<p>You can create buttons, clone items, use Google fonts, and more. When you\u2019re 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.<\/p>\n<p>Using this plugin takes you away from your WordPress editor, so it doesn\u2019t 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.<\/p>\n<p>This is an amazing plugin, especially considering it\u2019s free. You can make some really nice layouts and posts with it. Using it is intuitive, so there\u2019s not much of a learning curve.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Plug-N-Edit Drag & Drop HTML Visual Editor with Web Page Builder WYSIWYG?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/plugnedit\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">CKEditor for WordPress<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/ckeditor-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"CKEditor for WordPress image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>This one replaces your current editor and adds a ton of new buttons and features.<\/p>\n<p>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!<\/p>\n<p>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\u2019s automatically inserted into the content but you can delete it if you want.<\/p>\n<p>It can also integrate with several other plugins including Viper\u2019s Video Quicktags, WP-Polls, GD Star Rating, and NextGEN Gallery. Unfortunately, it can\u2019t 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\u2019t color-code the tags for you though.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in CKEditor for WordPress?<\/p><div class=\"dev-tutorial-list__item__cta\"><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">RichTextEditor<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/richtexteditor-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"RichTextEditor image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<p>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\u2019t get slow page-load times due to Word\u2019s unnecessary markup. You can also paste from regular text.<br \/>\nFormat 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.<br \/>\nParagraphs 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.<br \/>\nInsert 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 \u2013 great for writing with a tablet or smartphone if you don\u2019t want to use the one that\u2019s built in to your device), image gallery, image, template, PDF, video, syntax highlighter, YouTube video, HTML5 tags, and Google Maps.<br \/>\nYou can drag to resize the writing space in both height and width. At the bottom are tags to change from design, source, and preview.<\/p>\n<p>These same features also appear on the back end for your comments. Readers can\u2019t use them from the front end, though. You can turn this off in the settings if you wish.<\/p>\n<p>Advanced settings let you choose the paths for your media so you can link your images, video, gallery, and documents to the Insert buttons.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in RichTextEditor?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/richtexteditor\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Jetpack<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/jetpack-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Jetpack image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<p>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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Jetpack?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"http:\/\/jetpack.me\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Pods \u2013 Custom Content Types and Fields<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/pods-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Pods \u2013 Custom Content Types and Fields image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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\u2014or pods\u2014that you\u2019ve already made in another screen. It places a shortcode in your post that you can move around anywhere you want.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Pods \u2013 Custom Content Types and Fields?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/pods\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Just Writing<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/just-writing-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Just Writing image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<p>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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Just Writing?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/just-writing\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">HTML Editor Syntax Highlighter<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/html-editor-syntax-highlighter-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"HTML Editor Syntax Highlighter image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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.<\/p>\n<p>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.<\/p>\n<p>You can change the font size independently of the font that will be displayed in the post. The line you\u2019re typing on is highlighted in blue, making it easier to see where you are in your code.<\/p>\n<p>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.<\/p>\n<p>You can save your posts by selecting crtl+s for PC and cmd+s for Mac.<\/p>\n<p>There is a light and dark theme that you can switch between with a button click, so you can choose the one that\u2019s 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 <a href=\"https:\/\/wordpress.org\/plugins\/advanced-code-editor\/\" target=\"_blank\">Advanced Code Editor<\/a>.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in HTML Editor Syntax Highlighter?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/html-editor-syntax-highlighter\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">WP Editor<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"165\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/wp-editor-600x165.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"WP Editor image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>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\u2019s 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.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in WP Editor?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wp-editor\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><\/ul><!-- end dev-tutorial-list -->\n<h2>Code<\/h2>\n<p>And speaking of code, rather than adding features via a plugin, you can always code your own. Here is a list of tutorials from around the web that make it easy to add great features to TinyMCE.<\/p>\n<h3>Display the Full TinyMCE Editor in WordPress<\/h3>\n<p>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\u00a0and shows you how to unhide the buttons with just a few lines of code. This one is just too easy to ignore.<\/p>\n<p>To turn the buttons on, place this code in your <em>functions.php<\/em> file (code from <a title=\"Display the Full TinyMCE Editor In WordPress\" href=\"https:\/\/wpmudev.com\/blog\/display-the-full-tinymce-editor-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">Display the Full TinyMCE Editor In WordPress<\/a>):<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/85459afcd564304b1a89\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/85459afcd564304b1a89.js\" target=\"_blank\">Loading gist raewrites\/85459afcd564304b1a89<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>All 26 buttons will now be useable, opening up the full functionality of your visual editor.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><a rel=\"lightbox[135189]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/more-buttons.gif\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/more-buttons.gif\" alt=\"More buttons\" width=\"646\" height=\"338\" \/><\/a><figcaption class=\"wp-caption-text\">The Post Editor with full array of buttons.<\/figcaption><\/figure>\n<h3>TinyMCE Custom Styles<\/h3>\n<p>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 <em>functions.php<\/em> file or you can use it in a plugin.<\/p>\n<p>NOTE: This code is taken from the <a title=\"TinyMCE Custom Styles\" href=\"http:\/\/codex.wordpress.org\/TinyMCE_Custom_Styles\" rel=\"noopener\" target=\"_blank\">WordPress Codex<\/a>.<\/p>\n<h4>Enable the Stylesheet<\/h4>\n<div class=\"gist\" data-gist=\"raewrites\/defee72097489fcb8b4e\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/defee72097489fcb8b4e.js\" target=\"_blank\">Loading gist raewrites\/defee72097489fcb8b4e<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>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.<\/p>\n<h4>Registering Custom Styles<\/h4>\n<p>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.<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/1a03f303d57d9186f553\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/1a03f303d57d9186f553.js\" target=\"_blank\">Loading gist raewrites\/1a03f303d57d9186f553<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<h3>Making Visual Editor Display Styles<\/h3>\n<p>In order to get your styles to display, they have to be registered in your CSS. For this you will use <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_editor_style\" rel=\"noopener\" target=\"_blank\">add_editor_style()<\/a>. This will let you link a custom stylesheet file to your visual editor. The code looks like this:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/c1381817ab31b2f09e65\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/c1381817ab31b2f09e65.js\" target=\"_blank\">Loading gist raewrites\/c1381817ab31b2f09e65<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>Here\u2019s what it looks like when added to the<em> functions.php<\/em> portion of your theme:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/f6fcbfbb396032deb4a7\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/f6fcbfbb396032deb4a7.js\" target=\"_blank\">Loading gist raewrites\/f6fcbfbb396032deb4a7<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>Next, you will need to create a file named\u00a0<em>custom-editor-style.css<\/em>\u00a0and 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\u2019s an example of what this might look like:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/9c02bf2bd208cd9fd19f\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/9c02bf2bd208cd9fd19f.js\" target=\"_blank\">Loading gist raewrites\/9c02bf2bd208cd9fd19f<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<h3>Using Google Fonts<\/h3>\n<p>If you want to use Google Fonts, you can insert this code. This will bring in the styles from Google\u2019s CSS file. It includes multiple variants of type-faces.<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/162bb5a043651de2ddcf\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/162bb5a043651de2ddcf.js\" target=\"_blank\">Loading gist raewrites\/162bb5a043651de2ddcf<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<h3>Reusing Your Theme Styles<\/h3>\n<p>If you want to use the styles from your theme\u2019s stylesheet, you can import them into your custom editor stylesheet. This code goes into the\u00a0<em>custom-editor-style.css<\/em>\u00a0file:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/773412d85aae440caf03\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/773412d85aae440caf03.js\" target=\"_blank\">Loading gist raewrites\/773412d85aae440caf03<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<h3>WordPress WYSIWYG Editor Customization<\/h3>\n<p>This code from Alex Bulat will add four extra buttons to your Text editor. The buttons it will add are:<\/p>\n<p>&lt; p &gt;, &lt; br &gt;, &lt; h3 &gt;, and\u00a0&lt; h4 &gt;<\/p>\n<p>This is a great solution for those that spend more time in the Text editor that the Visual editor.<\/p>\n<p>To add these buttons to your text editor, add this code to your <em>functions.php<\/em> file:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/9c3f2b29eea77b43f0cb\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/9c3f2b29eea77b43f0cb.js\" target=\"_blank\">Loading gist raewrites\/9c3f2b29eea77b43f0cb<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>This code will allow you to create your own button:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/103c8a156dada2cec395\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/103c8a156dada2cec395.js\" target=\"_blank\">Loading gist raewrites\/103c8a156dada2cec395<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>You would then change these parameters:<\/p>\n<ul>\n<li>button ID<\/li>\n<li>button value<\/li>\n<li>button Tag Start<\/li>\n<li>button Tag End<\/li>\n<\/ul>\n<h3>Add Custom Styles to Visual Editor<\/h3>\n<p>This code 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.<\/p>\n<p>Place this code into your <em>function.php<\/em> file. It will add a custom styles drop-down menu to the second row of buttons on your visual editor.<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/f9ede0f4ea6e467782c6\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/f9ede0f4ea6e467782c6.js\" target=\"_blank\">Loading gist raewrites\/f9ede0f4ea6e467782c6<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>Now that you have the second row of buttons, it\u2019s time to fill the buttons with options. Place this code into your <em>functions.php<\/em> file:<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/9d0e23d0c5b653b7e61d\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/9d0e23d0c5b653b7e61d.js\" target=\"_blank\">Loading gist raewrites\/9d0e23d0c5b653b7e61d<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>Now you need to make sure these styles are available in your CSS file. Add this CSS code to your theme\u2019s stylesheet and <em>editor-style.css<\/em> file.<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/a3263deee790bbd37da1\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/a3263deee790bbd37da1.js\" target=\"_blank\">Loading gist raewrites\/a3263deee790bbd37da1<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>If you don\u2019t have an<em> editor-style.css<\/em> file, use the following code to create one. Place this code in your theme\u2019s root directory and then add this code in your theme\u2019s <em>functions.php<\/em> file.<\/p>\n<div class=\"gist\" data-gist=\"raewrites\/949efeb9b3a39be0fe2c\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/raewrites\/949efeb9b3a39be0fe2c.js\" target=\"_blank\">Loading gist raewrites\/949efeb9b3a39be0fe2c<\/a><\/p>\n<div class=\"gist-consent-notice\" style=\"display:none\">\n<p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p>\n<\/div>\n<\/div>\n<p>You\u2019ve now added your very own styles to your visual editor and you can access them quickly through dropdown buttons. Of course, you can change the colors to anything you like, too.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>There are a lot of fine choices for sprucing up your WordPress editor, and practically all of them are free. One thing\u2019s 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!<\/p>\n<p><strong>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\u2019t mention? Let us know in the comments below.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress Post Editor is great, but sometimes it&#8217;s just not enough when you need more options for formatting text. So we&#8217;ve put together this huge post with plugins and code to help you customize the Post Editor.<\/p>\n","protected":false},"author":344989,"featured_media":136219,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10044,10042,10045,10043],"tutorials_categories":[],"class_list":["post-135189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tinymce","tag-wordpress-dashboard","tag-customization","tag-editor"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=135189"}],"version-history":[{"count":4,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135189\/revisions"}],"predecessor-version":[{"id":215706,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135189\/revisions\/215706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/136219"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=135189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=135189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=135189"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=135189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}