Mark Thomas Miller

WordPress theming tips: adding TinyMCE styles

As someone who creates beautifully functioning WordPress themes, you’d probably be interested in add_editor_style(). This function allows you to control the writing experience for your users by adding a standalone stylesheet just for TinyMCE (the WordPress text editor).

There are two steps. First, place this guy in your theme’s functions.php file:

add_editor_style();

Then, create a CSS file called editor-style.css in the root directory of your theme. add_editor_style() looks for that exact filename, so make sure there are no typos. (If you need to use a different name…)

Then, inside of editor-style.css, add some CSS. Here are some basic properties you can take a look at:

#tinymce {
    margin: 30px;
    font-family: "Avenir Next", "Helvetica", "Arial";
    font-size: 19px;
    max-width: 620px;
}

h1,h2,h3,h4,h5,h6 {
    color: #000;
}

p,li {
    margin-top: 10px;
}

a {
    color: #008CFF;
}

pre {
    font-family: "Courier New";
    border: 1px solid #ccc;
    padding: 25px;
}

code {
    font-family: "Courier New";
    background: #ededed;
    padding: 2px 3px;
}

blockquote {
    border-left: 10px solid #000;
    margin-left: -30px;
    padding-left: 20px;
}

hr {
    border: none;
    height: 0;
    border-top: 10px solid #ededed;
    margin: 40px 0;
}

You can display everything with the same font, width, and spacing as your front-end – or, you can style a minimalistic interface à la iAWriter. The world is your oyster.

PS: Here’s a relevant story:

…fifty years after the fence was constructed, [Steve] Jobs showed it to [his biographer Walter] Isaacson, still standing and recalled a lesson about making things of quality that he learned from his father. Touching the boards of inside of the fence, he said that “He loved doing things right. He even cared about the look of the parts you couldn’t see.”

He said that his father refused to use poor wood for the back of cabinets, or to build a fence that wasn’t constructed as well on the back side as it was the front. Jobs likened it to using a piece of plywood on the back of a beautiful chest of drawers. “For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

Matthew Panzarino