Create a Custom Palette in the WYSIWYG Editor

I thought that I’d start a new series about better blogging, to share a few of the things that WordPress can do to make your blog posts better. If you’re a stickler for formatting like I am, there are some things in the WordPress WYSIWYG editor that will give your posts greater clarity and style. I may not cover all of the options in the WordPress editor, but I thought it might be helpful for me to point out a few of the lesser known ones.

Firstly, what am I referring to when I say the WYSIWYG editor? Well, WYSIWYG stands for “what you see is what you get.” It’s basically the editor box that you type out your blog posts out in. I’m typing in one right now to create this post! Side note: What you see is what you get, is a bit of a fallacy. Unless your web developer has inserted a piece of code into your custom theme to actually show your custom typography in your editor, you will see a pared down version of your specific typography. (Ask them to add: add_editor_style(‘style.css’); to your functions.php file. They’ll know what you mean.)

Let’s look at the WYSIWYG editor. The top row of icons, above the editor, has the basics: (from left to right) bold, italics, strikethrough, bulleted list (or unordered list, in HTML), numbered list (or ordered list), blockquote (a specific HTML tag for text that is quoted from another source), horizontal line, text align left, text align center, text align right, link, unlink and insert read more tag (this will break your post up so that your readers must click this link to delve into the full post). The last icon in the first row is important! It is the toolbar toggler. When you click it, it gives you many more options for formatting. The full set of tools is called the kitchen sink (as in “everything but”), and a lot of people don’t know about that handy second row.

So what’s in the second row? From left to right, you have: typographic styles, underline, text align justify, text colour, paste as text, clear formatting, special characters, decrease indent, increase indent, undo, redo and keyboard shortcuts. Today, I’m going to talk about text colour. In the coming weeks, I’ll cover many of the other features in this row of the WYSIWYG editor.

Text Colour

This little icon allows you to change the colour of the text in your post. Coloured text can help bring emphasis to your words, but when misused, can make your posts look very sloppy. If you read my post on How to Create Your Visual Identity, you know that I would recommend that you stick to the colours in your website’s colour palette in your posts to prevent sloppy-ness. If you have a professional brand or a DIY version, you should have the colours you used readily available. pro tip: Colours all have specific codes and to create a colour palette in the editor, you’ll need the hexidecimal code, which is a six-character alphanumeric code. To create a palette specific to your brand, follow these steps:

1. Click on the text colour icon.
2. In the dropdown palette, click on the word custom.
3. You will see a colour picker take over your screen. Paste the hexidecimal code of one of your brand’s colours into the space next to the pound (or hash, since it is 2014).
4. Repeat until you have your full palette.

Once you have the full palette in your text colour icon, it will remain there. This will ensure that anytime you need to use a colour, you can use just the colours within your brand. Again, I really recommend that you use these colours sparingly, but knowing how to use your brands colours can’t hurt!

Was that helpful? If you have a burning question about how to use something in WordPress, especially as it pertains to blogging, please let me know in the comments below, on Twitter or Facebook.