Customize Your Visual Editor With A Simple Function

Did you know that you can easily edit your Visual Editor to look exactly like your published article? All it takes is one simple piece of code in our functions.php file.

—

Customize Your Visual Editor

Open up your themes functions.php file and add this snippet of code anywhere, preferably near the top:

add_editor_style();

This tells your Visual Editor to load by default an editor-style.css file, if it’s present. If it does not find it within your theme files, it won’t load anything.

You can customize the code to request a specific file, in case you’re anal about naming conventions, the code for that looks like this:

add_editor_style( 'my-stylesheet.css' );

Now that you’ve added that, simply create the relevant CSS file and add some style elements to it. For example:

html .mceContentBody {
max-width: 600px; background: #fafafa;
}

The above styling will change the background color to a very light gray and limit the width of your entered text to 600 pixels. You can basically add any other styling you like. For example your headings, paragraph margins and padding, blockquote design, list designs etc…

So there you have it, a very easy and concise way to write it as your viewer would see it. If you would like to know more about the function you can do so here, add_editor_style.

Tags:

• CSS
• wordpress editor