Add your own editor style
We can style the content creation area inside the backend post or page creation screen by using add editor style code. The following code uses the child theme stylesheet. Add the code to your functions.php file or code snippet plugin.
// The following code is from: https://carriedils.com/add-editor-style/
add_action( 'init', 'cd_add_editor_styles' );
/**
* Apply theme's stylesheet to the visual editor.
*
* @uses add_editor_style() Links a stylesheet to visual editor
* @uses get_stylesheet_uri() Returns URI of theme stylesheet
*/
function cd_add_editor_styles() {
add_editor_style( get_stylesheet_uri() );
}Add a editor style sheet from another theme.
I have downloaded the theme Twenty Sixteen. Inside the CSS folder is the file: editor-style.css
I copied the CSS file into the root of the theme. Then added the following code.
// Add support for editor stylesheet - using Twenty Sixteens editor stylesheet.
add_editor_style( 'editor-style.css' );Changing the white background to blue
Sometimes the client wants to use white text on their web site. The text will then become invisible in the WordPress editor in the content area of a post or page. One way to handle this is to use a editor stylesheet.
The editor CSS stylesheet adjusts how the text and background looks like inside the wp editor in a page or post. As one modify to create ones own custom view of what the edit area looks like.
The default theme Twenty Sixteen uses an editor stylesheet which is located inside the CSS folder and called editor-style.css. Copy the file to your own theme. One has to also define the usage of the editor style so copy the add_editor_style code from the functions file of Twenty Sixteen to your theme functions file.
An example.
The client uses a deep blue hex code #0066bf as the background color and a white text color.
To make it easier on the client when they work on a page/post I will then add a editor style stylesheet that adds a background color inside the edit area of a page or post to the same blue color.
Here is some of the code inside the editor-style.css from Twenty Sixteen as well as the background color that I added to create the blue background. There are a lot of modifications one can do.
/*
Theme Name: Twenty Sixteen
Description: Used to style the TinyMCE editor.
*/
/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Audio / Video
* 8.0 - RTL
*/
/**
* 1.0 - Body
*/
body {
color: #1a1a1a;
font-family: Merriweather, Georgia, serif;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
margin: 20px 40px;
max-width: 600px;
vertical-align: baseline;
/* ADDED */
background-color: #0066bf;
}Add the following code to your functions.php file or Code snippet plugin:
/*
* This theme styles the visual editor to resemble the theme style,
* specifically font, colors, icons, and column width.
add_editor_style('editor-style.css');
*/The above will help a lot when using a white text color throughout the site. Modify the CSS file to fit your needs.
Some extra resources:
Add Background Color (Highlight) Option (to the text) in WordPress Editor TinyMCE
https://gist.github.com/thierrypigot/7fe4b3e40735d4b9a3ca
