How To Customize The Text Editor of Your WordPress Site

Last Updated on November 24, 2021 by James Wilson

WordPress started out as a simple blogging platform and over time has almost become a full framework for applications. One thing that hasn’t evolved much with time is the text editor or the kitchen sink. Users have been resorting to plugins to add functionality and to give it some style. While WordPress 4.0 did dramatically improve the editor, there’s still plenty of room left for more customization and improvement.

Why Would You Customize The Editor?

One of the biggest problems with the editor is that you still have to click the preview button to get a feel of how your front end looks. When you add up the time spent switching between your previews and back to your editor to make additional content changes, you’d be surprised how much time is wasted. Basically, you’ll instantly receive the benefit of a true WYSIWYG editor when you customize the text editor to look and function like the front end of your site.

If you’re a reseller or build WordPress sites for people, then you know that a lot of your clients aren’t going to be technically capable of managing their own sites or changing content. This is when they end up calling you at 4AM to tell you that they accidentally removed something when they tried to edit their site.

This happens a lot…

Having a true WYSIWYG editor for your text editor will dramatically reduce all of these mishaps. Why doesn’t WordPress have a true front-end editor yet? No one knows but the promise of having one has been on the horizon for years and competitors such as Weebly and Squarespace have made their sites super user friendly by adding front-end editors. It may be because there’s a downside to the front-end editors in terms of functionality and content flow when creating content.

Not only that but most of the front-end editors that are offered by those competitors aren’t solid, have bugs, create disgusting code and don’t have things such as Meta boxes. So while you can try to use a plugin like Visual Composer, be warned that not only does it create messy code but they’re often buggy and unreliable. I can’t count the number of times I’ve clicked save and nothing happened or things were deleted for no reason. This isn’t exactly ideal for a text editor.

Warning: This is an advanced tutorial and beginner things like WordPress installation won’t be explained. You should have knowledge of how WordPress works and CSS before beginning.

Step 1 – A Fresh Install

Make sure you’re doing this on a brand new fresh install of WordPress, preferably a remote version on your own computer. It shouldn’t need to be said but don’t do this with someone’s website to test things out, do this on a test website, try out a free theme if you need to.

Step 2 – Understanding the Core

Once there’s same sample content via your fresh WordPress install and a fresh theme to look at, you have to understand how the core of WordPress works and the functions of the text editor to get the most out of it. TinyMCE is a great tool but it’s completely ignorant of anything going on outside the editor. There’s one core file that controls TinyMCE but thankfully for us, the creators have allowed us to load additional stylesheets into it.

While it’s great that ever since 3.0.0, you’ve been able to add stylesheets in a function called add_editor_style in includes/theme.php, we’re going to be looking at more efficient ways to call the function. The very first thing we need to do is look for a file called editor-style.css. Does this file exist already for your theme?

The editor should look for the file editor-style.css by default but we can check for this in the development console. It’s F12 for most browsers and on the right hand pane, we can easily see that it indeed is pulling style from editor-style.css. A quick re-cap so far:

• WordPress is powered by a powerful editor called TinyMCE but it lacks some core functionality that we’re going to be messing with
• TinyMCE while it does come with core styling allows for the overwriting of its styling with a native function in WordPress
• WordPress calls this function add_editor_style in includes/theme.php to allow people to do such a thing

Step 3 – Making Some Changes

Taking the steps above, if you’ve determined that there is an editor’s stylesheet in your theme’s folder, then you want to make sure you save a backup of this file and copy it. Call it something like custom-editor-style.css and place it in the exact same folder location. This is far more efficient than backing up the entire theme and database.

Next, we need for WordPress to actively search for that file rather than trying to find the default one. To do this, navigate to your theme’s folder and look for functions.php. We need to open this up and call add_editor_style to make sure that it’s going to use your new stylesheet rather than the old one.

Add the following code to the theme’s function.php and when you’re done, simply hit save. If you’re editing directly from a FTP client, make sure you re-upload the file.

// This is the code for adding a custom stylesheet to the WordPress post editor

function my_theme_add_editor_styles() {

  add_editor_style( 'custom-editor-style.css' );

}

 

add_action( 'admin_init', 'my_theme_add_editor_styles' );

Where custom-editor-style.css is, if you’ve named your new file something different, change it to that name. Next, we need to make sure that the editor is actually using the stylesheet and the default stylesheet isn’t overriding your new one. Simply look at the inspector to confirm this. Earlier we confirmed you’d need some CSS knowledge so you should have a few changes already made in that stylesheet to see if any of the changes have gone through.

Are the changes being tracked by the backend as well? Let’s do a quick test by changing the color of your headers. Find the following in your stylesheet or add it if it’s not there. By default, all of the headers should be listed.

h1, h2, h3, h4, h5, h6 {color: red; font-size: 35px;}

You can make the color whatever hexcode or color you want and you change the font-size to whatever you want but this is for testing purposes at this point. Is everything working great so far? It should be but let’s test something else by adding a little splash of border to the images in TinyMCE.

For this, all we have to do is target the TinyMCE main styling ID which is by default, #tinymce. This is the ID that it automatically generates in the body, regardless of the WordPress version you’re using, as long as it has TinyMCE. When we generate a border for our images, we should see the results instantly. This is the last CSS example we’re going to do because the entire point of this is to make sure that we have complete control over the styling of TinyMCE.

To generate a border around all TinyMCE images, simply type in the following in the stylesheet we made:

#tinymce img {border: 5px solid blue;}

From this point on, you should be able to style everything the way you want it now that we’ve confirmed the style changes are taking effect. If you’re new to CSS or styling, there are plenty of guides online such as Codeacademy that’s 100% free and has great tutorials on styling and a lot more.

What about Sites That Don’t Have an Existing Editor Stylesheet?

If this is the case, which it usually isn’t, you can simply open up the custom-editor-style.css file and replace the contents of that file with this:

@import url(‘my-style.css’);

The first time you do this, don’t panic if things look broken. It will take some time going back and forth, making sure changes were saved, etc. The steps above should give you a nice base to work with and if you’re new to styling, it should give you some practice as well. One great file to look at is the basic styling sheet for the theme Twenty Sixteen. This is a nice starting point and can help you map out your styling strategy for customizing your own.

Conclusion

That’s simply it. With a couple of steps you can begin editing the default look and behavior of your editor to feel far more like a WYSIWYG editor and like the front-end. There’s so much more you can do with the editor as well, such as adding styling based on different post types or custom post types. For these advanced tutorials, we’d highly recommend consulting with the WordPress documentation before touching anything.

While there are some plugins that do this for you, they need to be constantly updated, most of them are outdated, they slow down the site and plugins like Visual Composer as mentioned earlier are notorious for bugs, breaking your site, producing messy code and slowing down the site. The steps mentioned above are a great starting point for creating a truly customized text editor. We’re still years away from a fully functional WYSIWYG TinyMCE that works flawlessly.