in Design & Dev & Tutorials

How to style the WordPress TinyMCE WYSIWYG visual editor

WordPress styled TinyMCE visual editor

Your TinyMCE WordPress WYSIWYG visual editor can get very close to "what you see is what you get" if you style the visual editor following these instructions.

One of my favorite things to do when I set someone up with WordPress is to make the TinyMCE WYSIWYG visual editor actually “what you see is what you get.” A sign of a good theme is that the theme’s styles are reflected in the post editor. This is actually a quite easy task to achieve with some knowledge of CSS, so it’s surprising that plenty of themes still don’t take advantage of this.

Edit your theme’s functions.php file

Andrew Ozz has written a post explaining what to add to your theme’s functions.php file, but with the add_editor_style() function the sufficient code is much shorter. Simply insert the following into your functions.php file before the closing ?> where your-theme-style.css will be the name of the stylesheet we create to style the TinyMCE editor:

// Add styles to the WYSIWYG editor
add_editor_style('your-theme-style.css');

Once you’ve done that, save your functions file and upload it. This function looks in the root folder of your theme for the stylesheet, for example, wp-content/themes/your-theme-name. If you would like to keep the stylesheet in a subfolder of your theme’s folder, simply add the name of the folder before the name of the stylesheet within this function, such as 'css-folder/your-theme-style.css'.

Create your WYSIWYG stylesheet

We can now style some default tags, borders, content width, images and captions—plus any special styles your theme might have like pull quotes. First create a css file with the same name as whatever you referenced in your functions.php file. Then you can write styles, mostly copy and pasting from your theme’s stylesheet, for the following tags and classes:

/*================================================

Some default tags

================================================*/

html .mceContentBody {
	font-size: 87.5%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #0a1626;
	line-height: 1.2;
	width: 600px;
}

a {
	color: #84a8d9;
	text-decoration: none;
	border-bottom: 1px dotted #84a8d9;
}

a:hover {
	color: #1b304c;
	border-bottom: none;
}

p {
	margin-bottom: 10px;
	font-size: 1em;
	line-height: 1.4;
}

h2, h3, h4, h5, h6  {
	margin-bottom: 15px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h3  {
	font-size: 1.5em;
	margin-top: 20px;
}

h4  {
	font-size: 1.1em;
	font-weight: 700;
	color: #1b304c;
	margin-top: 15px;
}

h4 a  {
	color: #1b304c;
	border: none;
	text-decoration: none;
	font-weight: 700;
}

h4 a:hover  {
	color: #84a8d9;
}

h5  {
	font-size: 1em;
}

h6  {
	font-size: .86em;
}

code  {
	color: #386b9e;
	font-family: "Courier New", Courier, monospace;
}

pre  {
	padding: 10px;
	border: 1px dashed #1b304c;
	background: #e6e6e6;
	font-family: "Courier New", Courier, monospace;
	margin-bottom: 20px;
}

ol li,ul li  {
	padding-bottom: 2px;
}

ul, ol  {
	margin: 0 0 10px 40px;
	list-style: square;
}

ul a  {
	text-decoration: none;
	border-bottom: none;
}

ol  {
	list-style: decimal;
}

blockquote  {
	margin: 0 0 0 -5px;
	padding: 5px 20px 10px 70px;
	background: url(images/blockquote.png) no-repeat;
	clear: both;
}

/*================================================

Images and captions

================================================*/

.wp-caption  {
	text-align: center;
	background-color: white;
	padding-top: 4px;
	margin: 10px 10px 5px 10px;
	border: none;
}

.wp-caption img  {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption a img  {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: .86em;
	line-height: 1.2;
	padding: 5px 4px;
	margin: 0;
}

/*================================================

Special Theme Classes

================================================*/

.leftpullquote  {
	padding: 5px 5px 10px 65px;
	background: url(images/blockquote.png) no-repeat;
	border-bottom: 5px solid #1b304c;
	float: left;
	width: 200px;
	font-size: 1.2em;
	color: #262a31;
	font-weight: 700;
	margin: 10px 10px 10px 0;
}

.rightpullquote  {
	padding: 5px 5px 10px 65px;
	background: url(images/blockquote.png) no-repeat;
	border-bottom: 5px solid #1b304c;
	float: right;
	width: 200px;
	font-size: 1.2em;
	color: #262a31;
	font-weight: 700;
	margin: 10px 0 10px 10px;
}

.button a  {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	text-decoration: none;
	padding: 5px 10px;
	background: #1b304c;
	color: #FFF;
	font-weight: 700;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	float: right;
	clear: both;
	border: none;
	border-bottom-color: #1b304c;
}

.button a:hover  {
	background: #84a8d9;
	color: #FFF;
	text-decoration: none;
}

.alert  {
	background: #ffffe0;
	border: 1px #e6db55 solid;
	padding: 10px 5px;
	margin-bottom: 20px;
}

Of course, don’t copy these examples, otherwise your TinyMCE visual editor will be styled like my blog’s theme!

Final steps

Once you’ve got your styles written, upload your properly named stylesheet file into your theme’s directory wherever the add_editor_style() function is pointing.

Have questions about how to add styles to your TinyMCE WordPress visual editor? Let me know in the comments below, and we’ll see what we can do!

Comments (5)

  1. None of this makes you able to see white text in the visual editor's white background. I find it appalling that anyone with website with a black background and white text has to resort to css to simply be able to read the words while typing. Seems like a relatively common issue that someone in the world would have address by now but alas I have been googling all morning and none of this stuff achieves this simple goal.

    Utterly remarkable what is acceptable in the world of IT wouldn't you agree?

    -J

    • The CSS you're looking for in the visual editor is:

      html .mceContentBody {
      color: gray;
      background: black;
      }

      At least, this is what would match the website you linked to.

      I don't think it's easy because I don't think most people want to read let alone write with gray on black text 🙂

  2. Thanks for this article.
    I'm having some success with this but I have one question. Some of my styles don't get recognised because there are more specific style definitions in tinyMCE's own style "content.css". Is there a way of telling tinyMCE not to use the default content.css? Obviously I don't want to change content.css in any way because it's part of tinyMCE, not part of my theme. And although I could obviously override the definitions in content.css, it would mean a lot of repetition (for example content.css styles the font of td elements, whereas I have a single top-level font definition.)

    Thanks

    Anthony