• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

1 October - 2016 By Paal Joachim Add a Comment
Last updated on: August 29, 2017

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 theme stylesheet. Add the code to your functions.php file.

// 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.

Adding a blue background to the WP editor

Adding a blue background to the WP editor

 

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:

/*
 * 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

Share this:

  • Email

Categories: Featured, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.