Your WordPress WYSIWYG Editor Can Reflect Your Theme Styles

While the WordPress visual editor is a nice WYSIWYG editor, it doesn’t reflect your theme styles, and so it’s often difficult to tell how your content will actually look in your post without viewing the actual post. With a few quick additions to your theme files, you can have your WordPress editor styled like your theme. This WordPress tutorial shows you how.

This Is What You’ll See

The editor content will mirror the fonts and spacing for paragraphs and images, just like your theme. The left side is the default WordPress visual editor; the right is styled like the theme. You can see that the content is more visually appealing on the right.

The headlines in the editor content reflect the theme fonts and spacing on the right. They are larger, use Google font “Lato”, and have different spacing.

You will want to follow along with the steps to create your own editor stylesheet. I used the Genesis Sample 2.0.1 theme for my example, but you can use any theme you like. The “example editor-style.css” from this tutorial can be used with any theme, not just Genesis.

You can find all the code for this tutorial in the GitHub Gist: Your WordPress WYSIWYG Editor Can Reflect Your Theme Styles

Step One: Create a New Editor Stylesheet File

Open a text editor, like Notepad or TextEdit.
Add the comment line below
Save a new file in your child theme folder with the name: editor-style.css.

/* Editor Stylesheet for Genesis Sample 2.0.1
--------------------------------------------- */

Step Two: Add Your New Editor Stylesheet to Your Theme

Open your child theme functions.php in a text editor.
Add the following to tell WordPress that you have a custom editor stylesheet:

<?php
// Note: Add only code below to your functions.php

// Customize WordPress Visual Editor
add_editor_style()

Step three: Open Your Child Theme style.css

You will want to open the style.css from your child theme in another text editor window, so that you can see which styles to copy.
You will want to keep editor-style.css open to add styles.
Note that the styles you primarily need are the color, fonts, margin, and padding styles for the body, paragraph, lists, and heading tags.

Add Google Fonts

If your theme is using Google Fonts, you will want to add them next.
Find your fonts on Google.com/fonts; save them all to your collection, if you use more than one.
Choose the Quick Use arrow. Select only the font styles you use.
Scroll down to choose the “@import” tab to copy.
Add that @import line to your editor-style.css, like so.

/* Import Google Fonts */
@import url('http://fonts.googleapis.com/css?family=Lato:300,700');

Body Styles

Find the section in your style.css that has the body styles: body { }.
You will need to add .content to the front of each style that you copy from your style.css. And you will use just .content instead of body.
You want to copy styles that pertain to fonts – color, font-family, font-size, font-weight, line-height, padding, margin.
For this theme, body { } becomes:
You do not need to copy background, background-color, etc.

.content {
	color: #666;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

Link and Hover Styles

Find your a, a:link and a:hover styles in your style.css.
Copy styles like: color, text-decoration, border, background-color.
For my theme, here is link and hover:

.content a {
	border-bottom: 1px solid #ddd;
	color: #f15123;
}

.content a:hover {
	color: #333;
}

Paragraph and Ordered and Unordered List Styles

Sometimes the paragraph (p) and list styles (ol and ul, and also li) are near the top of the style.css.
Sometimes there are additional paragraph and list styles that are preceded by .post or .entry or .entry-content. You will want to copy all of them. You can remove the .post or .entry or .entry-content from the front of them, and only add the .content
Here are the Genesis Sample paragraph and list styles:

.content p {
	margin: 0 0 26px;
	padding: 0;
}

.content ol,
.content ul {
	margin: 0 0 26px 40px;
	padding: 0;
}

.content ol li {
	list-style-type: decimal;
}

.content ul li {
	list-style-type: disc;
}

.content ol ol,
.content ul ul {
	margin-bottom: 0;
}

Blockquotes

If you use blockquotes in your blog posts, you will want to copy the blockquote and cite styles from your style.css.
Here are the blockquote and cite styles for this theme:

.content blockquote,
.content blockquote::before {
	color: #999;
}

.content blockquote {
	margin: 40px 40px 24px;
}

.content blockquote::before {
	content: "201C";
	display: block;
	font-size: 30px;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

.content cite {
	font-style: normal;
}

Heading Tags

You will want to copy your Heading styles from your style.css.
Find your h1, h2, h3,… and copy the color, fonts, margin, and padding styles. Your theme may not have all of them.
Here are the heading styles:

/* Headings
--------------------------------------------- */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	color: #333;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.content h1 {
	font-size: 36px;
}

.content h2 {
	font-size: 30px;
}

.content h3 {
	font-size: 24px;
}

.content h4 {
	font-size: 20px;
}

.content h5 {
	font-size: 18px;
}

.content h6 {
	font-size: 16px;
}

Tables

If you use tables in your blog posts, you can see the code at the bottom of this post or in the GitHub Gist.

Images Inserted in the Content

You will want to copy the basic image styles from your style.css
These are .aligncenter, .alignnone, .alignleft, .alignright
You can also copy the .wp-caption styles, if you like.
Here are the image styles:

/*
Common Classes
---------------------------------------------------------------------------------------------------- */
.content img.centered,
.content .aligncenter {
	display: block;
	margin: 0 auto 24px;
}

.content img.alignnone {
	margin-bottom: 12px;
}

.content .alignleft {
	float: left;
	text-align: left;
}

.content .alignright {
	float: right;
	text-align: right;
}

.content img.alignleft,
.content .wp-caption.alignleft {
	margin: 0 24px 24px 0;
}

.content img.alignright,
.content .wp-caption.alignright {
	margin: 0 0 24px 24px;
}

.content .wp-caption-text {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

Column Classes – For Genesis Themes Only

For Genesis themes, you can also copy the column class CSS, if you use column classes in your posts.
You can also add a box-shadow to outline the column classes that you can see only in the WordPress visual editor.
You will need to use the WordPress text editor to copy over the column class sample html from the StudioPress website. Then save it. Now you can edit your columns in the visual editor; just be careful when you delete the default content, so that you don’t remove the columns.
Column class CSS:

/* Column Classes
	Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	box-shadow: inset 0 0 0 1px #ddd; /* Added outline in editor */
	float: left;
	margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48.717948717948715%;
}

.one-third,
.two-sixths {
	width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
	width: 65.81196581196582%;
}

.one-fourth {
	width: 23.076923076923077%;
}

.three-fourths {
	width: 74.35897435897436%;
}

.one-sixth {
	width: 14.52991452991453%;
}

.five-sixths {
	width: 82.90598290598291%;
}

.first {
	clear: both;
	margin-left: 0;
}

All the CSS

Here is all the CSS from above:

/* Editor Stylesheet for Genesis Sample 2.0.1
--------------------------------------------- */

/* Import Google Fonts */
@import url('//fonts.googleapis.com/css?family=Lato:300,700');

.mce-content-body.content {
	padding: 30px !important;
} /* Optional - Adds padding to the editor */

.content {
	color: #666;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

.content a {
	border-bottom: 1px solid #ddd;
	color: #f15123;
}

.content a:hover {
	color: #333;
}

.content p {
	margin: 0 0 26px;
	padding: 0;
}

.content strong {
	font-weight: 700;
}

.content ol,
.content ul {
	margin: 0 0 26px 40px;
	padding: 0;
}

.content ol li {
	list-style-type: decimal;
}

.content ul li {
	list-style-type: disc;
}

.content ol ol,
.content ul ul {
	margin-bottom: 0;
}

.content blockquote,
.content blockquote::before {
	color: #999;
}

.content blockquote {
	margin: 40px 40px 24px;
}

.content blockquote::before {
	content: "201C";
	display: block;
	font-size: 30px;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

.content cite {
	font-style: normal;
}

/* Headings
--------------------------------------------- */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	color: #333;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.content h1 {
	font-size: 36px;
}

.content h2 {
	font-size: 30px;
}

.content h3 {
	font-size: 24px;
}

.content h4 {
	font-size: 20px;
}

.content h5 {
	font-size: 18px;
}

.content h6 {
	font-size: 16px;
}

/* Tables
--------------------------------------------- */
.content table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2;
	margin-bottom: 40px;
	width: 100%;
}

.content tbody {
	border-bottom: 1px solid #ddd;
}

.content th,
.content td {
	text-align: left;
}

.content th {
	font-weight: bold;
	text-transform: uppercase;
}

.content td {
	border-top: 1px solid #ddd;
	padding: 6px 0;
}

/*
Common Classes
---------------------------------------------------------------------------------------------------- */
.content img.centered,
.content .aligncenter {
	display: block;
	margin: 0 auto 24px;
}

.content img.alignnone {
	margin-bottom: 12px;
}

.content .alignleft {
	float: left;
	text-align: left;
}

.content .alignright {
	float: right;
	text-align: right;
}

.content img.alignleft,
.content .wp-caption.alignleft {
	margin: 0 24px 24px 0;
}

.content img.alignright,
.content .wp-caption.alignright {
	margin: 0 0 24px 24px;
}

.content .wp-caption-text {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

/* Column Classes
	Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	box-shadow: inset 0 0 0 1px #ddd;
	float: left;
	margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
	width: 48.717948717948715%;
}

.one-third,
.two-sixths {
	width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
	width: 65.81196581196582%;
}

.one-fourth {
	width: 23.076923076923077%;
}

.three-fourths {
	width: 74.35897435897436%;
}

.one-sixth {
	width: 14.52991452991453%;
}

.five-sixths {
	width: 82.90598290598291%;
}

.first {
	clear: both;
	margin-left: 0;
}

So now you have a WordPress visual editor that is truly WYSIWYG for your theme.

Comments

2 responses to “Your WordPress WYSIWYG Editor Can Reflect Your Theme Styles”

Alexis Villegas

August 14, 2014

Hi Marcy. Great tutorial! Although I’ve been using the editor stylesheet for Genesis column classes, I didn’t quite understand how to leverage the stylesheet for more specific formatting uses until now. I bookmarked you article right away. Thank you!

1. Marcy Diaz
  
  August 14, 2014
  
  Thank you, Alexis. I’m glad you found it helpful for your visual editor.