Why the Editor on WordPress Doesn’t Have Fonts and Colors

Business Owners | Designers

Editing WordPress TextThe WordPress editor is a great tool when you’re trying to simply edit text on your site. You don’t have to know anything about coding or CSS or HTML to make something look the way you want it to. And yet, despite the range of options in the toolbar, there are some things conspicuously missing.

How Text Works on Websites

A long time ago, in a land far far away, we used to add in text and font information directly into the page – called an “inline style”. So when we were writing a headline and we wanted to make it Yellow and size 24, we simply added those directly into the coding. Those were the dark days of website development. If you wanted to change all your headlines, you had to go page by page or change it everywhere it showed on the page. It was a pain.

Now, when we set a headline as Yellow and size 24, we add it to a separate file called the CSS file or stylesheet. Then we reference that “style” in our page. It’s like if we had the Dallas Cowboys and the Oakland Raiders. The players on the teams can change, but the actual team stays the same. When we want the Dallas Cowboys to play, we call their name, not the individual players. It’s the same for font styles. We can name the styles anything we want – even DallasCowboys (no spaces allowed), but the color, size, font, width, etc can all change.

So Why Can’t I change text attributes in the Editor

When the text styles were all inline, it didn’t matter if you changed them in the editor. Change them in the editor and it would just add some html around the font like the “font-size:16px” below:

<p style="font-size:16px">TEXT</p>

But now it’s not supposed to add inline styles. To keep your coding organized and clean, we’re supposed to add those styles to the CSS file and reference them:

<p class="DallasCowboys">TEXT</p>

In our CSS file, our “DallasCowboys” style can be set at yellow with a font size of 24, but all that is referenced using the “DallasCowboys” name.

Don’t care? Google does! They don’t like inline styles because it’s not industry standard.

How do I edit text then?

There is in the text editor some built-in style names. If you check out the top bar, you’ll see a dropdown that probably says “paragraph” in it. That dropdown has 7 pre-set styles: paragraph, and Heading 1 through 6. They also allow you to bold, italicize, and underline. Those are all acceptable for inline styles.

If you want your headings styles or paragraph to be a different color or size or more/less spacing etc., talk to your web developer. They can edit the styles in the CSS file; that way your website stays nice and neat and organized, your coding stays beautiful, and Google won’t banish you to the arctic.

Comments