Creating a Custom Style Set

To customize the contents of the “Styles” toolbar menu, you need to create and assign a custom Style Set to your field’s configuration.

First, create a new Javascript file named my_styles.js. This file will hold your custom Style Set:

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block Styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline Styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);

Each “style” within your Style Set is an Object with the following attributes:

name

The name that will appear within the Styles menu

element

The element your selection will be converted to (or wrapped by, in the case of “span”) if the style is selected

styles (optional)

CSS styles that will be applied directly to the element

attributes (optional)

Any other attributes to be added to the element (i.e. “class”)

Upload this file to your server somewhere. (I like to keep mine in /themes/third_party/wygwam_assets/, along with any CSS files used by my Wygwam fields.)

Now we need to point Wygwam to our new style set. Go to Add-Ons → Modules → Wygwam, and click on the configuration you want to be using these styles. Then click on the “Add an advanced setting…” drop-down, and choose “styleSet”. A text field will appear. Replace its contents with:

my_styles:/themes/third_party/wygwam_assets/my_styles.js

(If you uploaded your Javascript file to a different location, use the correct URL.)

Save your configuration, and you’re done!