Believe it or not, this was never supposed to be a blog about tweaking WordPress - I'm actually a Flash developer. But clearly this is the kind of thing you ravenous wolves are after, and I'm nothing if not a slave to my analytics data.

I've been asked a handful of times in the past by our more adventurous clients if they can add colour to the body of their text in a post, or even - shock-horror - change the style, size, or font. After repeatedly untwisting my features from a mask of moral outrage to something more placid and socially acceptable, I finally came up with a neat & lovely little solution.

Ordinarily you might wonder why they don't just make those kinds of edits with the kitchen-sink tools in the TinyMCE editor, where post editors can normally change the colour, style, size and typeface of any selected text. The answer is because we invariably remove or nullify the effects of those kinds of style changes - a topic I'll cover in a future post. But there have been far too many instances of a client spending decent money to have their site lovingly crafted with care and attention to every typographical detail, only to start tearing through it  making all of the text purple and green and bold and in Comic Sans SO THAT IT ALL STANDS OUT  once they gain access to the CMS.

And in the end, nobody wants that resulting monstrosity - not the client, not the website users, and certainly not the design team that spent weeks getting just the right shade of blue. What we want is a mechanism that allows the user to choose colours and styles that will blend seamlessly with the design, creating accents and highlights rather than garishly obnoxious web-graffiti.

So the intention is to add an extra Styles dropdown menu to the TinyMCE editor, into which will have a small selection of predfined CSS classes. In your site's theme, open up that trusty old functions.php file and insert the following callback and function:

<?php

add_filter('tiny_mce_before_init', 'add_custom_classes');

function add_custom_classes($initArray) {

 $initArray['theme_advanced_styles'] = "Orange=orange,Blue=blue,Large=large";
 
 $initArray['theme_advanced_buttons2_add_before'] = 'styleselect';
 
 return $initArray;
}
?>

What this does is hook into TinyMCE's initialisation function and append the 'styleselect' dropdown with the theme_advanced_styles value we've defined, which is currently 'Orange=orange,Blue=blue,Large=large'. This is a comma-delimited list of values where the first part is the human-readable label and the second part is the CSS class it refers to. So it becomes:

Orange = .orange
Blue = .blue
Large = .large

If you check your post editor now, you should see (if you're showing the Kitchen Sink) a new Styles dropdown menu to the left of your Paragraph menu, which has Orange, Blue and Large options inside it. As I said, these refer to CSS classes, so as long as you have these classes defined in your site's stylesheet, then you're good to go:

.orange {
 color: #FF6600;
}
.blue {
 color: #0000CC;
}
.larger {
 font-size: 1.2em;
}

 Congratulations! You now have an easily-accessible list of styles for your posts. In my next post I'll show you how to ensure that those ugly manual style changes can be wiped away forever. FOREVER!


  • Sculley

    Very cool. This is great. Have been looking for solutions to add styles for user to use easily from design view. Can you add all kinds of styles to this or just font changes?

    • http://blog.gaijindesign.com/ Lawrie Malen

      The styles that are added with this method refer to a CSS class (i.e. ‘.myclass’), so as long as you have that class defined in the site’s stylesheet, then you can add whatever you like to it: absolute positioning, border-box padding, drop shadows… anything.