How to allow CSS classes in ProcessWire and CKEditor

ProcessWire uses CKEditor for its HTML editor. It has some decent conservative settings that keep your HTML clean. If you’re an advanced user you may at times need CSS classes — which are disbled by default. Change your field like this:

Edit your field
Go to the Input field
Scroll down to CKEditor Toolbar
Under Extra Allowed Content add each element for which you want to allow classes for followed by (*). E.g. to allow classes on paragraph tags add p(*)
To allow for all add *(*)
Save your field before use.

How-tos

Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.