Sameer Siruguri

My Blog

Adding Custom Styles via the WordPress Visual Editor

Specifically, this is about adding the ability to select pieces of text inside your tinyMCE editor, and having a dropdown of styles to choose from that you can apply to that text.

You need to do two things –

  1. Edit your theme’s style, which you can do from the WordPress dashboard, via Appearance → Edit CSS. Add a style element that looks something like .classname {font-size: 1em}.
  2. This is the tricky part – you have to edit code now. You need to tell the editor to load a drop down called Styles, which will have the styles you want to be able to apply. Look at how it’s done here – the code is explained fairly well.

There are a bunch of caveats on that page about what you can’t do.

Apply a class to an existing block element
Limit a style to a specific HTML tag
Wrap multiple block elements in another block element with a custom class
Apply inline styles to an element

You also can’t see these styles applied in the editor itself.

 

Single Post Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *