I'm using ExpressionEngine v2.7.2 and Wygwam v3.2.2 and I want to be able to add a custom template to the toolbar, to be able to add custom markup.

I've looked at the documentation for both CKEditor and Wygwam, but it's so confusing.

I see that under third-party/wygwam/ckeditor/plugins/templates/ there are two folders, dialogs and templates. And it looks like the folder templates is the one that is the default one. What are the steps I need to go from here?

In my Wygwam configuration in Expression Engine CP, I can add Advanced Settings. But should I choose templates or templates_files? If I choose template_files, this is filled out by default: plugins/templates/templates/default.js

This I reckon is the file from third-party/wygwam/ckeditor/plugings/templates/? Would that mean that I can just add plugins/templates/myCustomTemplate/default.js

I have already tried that and it comes up blank when I click the button in the wygwam editor. This is really confusing, any pointers?


Really good video on using templates in wygwam here How to use the Templates button in Wygwam for ExpressionEngine


You should define your custom templates in it's own file outside of Wygwam.

e.g. /assets/wysiwyg/wysiwyg-templates.js

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
    // The name of the subfolder that contains the preview images of the templates.
    imagesPath : '/assets/wysiwyg/images/',

    // Template definitions.
    templates :[
            title: 'Callout - Blue Background',
            image: 'callout-blue.png',
                '<div class="callout-blue"><p></p></div>' +
            title: 'Custom - List Item',
            image: 'custom-list-item.png',
                '<p class="custom-li"><span class="key">1.</span> Lorem ipsum</p>' +
            title: 'Styled Link List',
            image: 'link-list.png',
                '<ul class="link-callout"><li></li></ul>' +

Then in the EE control panel go to the Wygwam module, edit your configuration and add an advanced setting for template_files and set it to the path you used above (e.g. /assets/wysiwyg/wysiwyg-templates.js).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.