How to Add Custom Shortcodes in Drupal 7

I was recently tasked with adding the ability for writers to enter simple shortcodes in Drupal’s WYSIWYG editor. My first thought was, no problem! It’ll only take me a few minutes. Like with everything Drupal, nothing is that simple. The ease at which WordPress makes it for developers to create and build blows Drupal out of the water. Simple tasks like creating these shortcodes — filters in Drupal speak—is a cinch using WordPress’s Shortcode API. So, how do you add custom shortcodes in Drupal?

Custom Shortcodes in Drupal 7

Before I begin, bare with me, because as I said before—I’m a WordPress developer. There may be an easier way to go about doing this, but this is what I’ve found works best after reverse engineering Drupal’s Node Embed module. I also came across the Custom Filter module which seems to accomplish this. I’d rather learn how to do it myself, than a plug and play option so I get more familiar with how Drupal works. Suggestions welcomed!

Build the Drupal Functionality

I started off with building a custom module that will hold my shortcode logic. Here’s the directory structure:

  • Webroot
    — sites
    — all
    —- modules
    —– custom
    —— custom_shortcodes
    ——- custom_shortcodes.module

First, you need to tell Drupal about your module. In the

name = Custom Shortcodes
description = Sets up a custom filter that enables custom shortcodes.
core = 7.x

That’s it for that file. Next comes the custom_shortcodes.module file. This is where all the magic happens:

That’s it for the module. Now, you’ll need to enable it through admin/modules or with Drush:

Once you’ve enabled the module, you’ll need to update the text formats so the Custom Shortcodes filter is enabled through admin/config/content/formats.

Now when you enter [style:class_name]Content[/style] in Drupal’s WYSIWYG editor, the front-end output will look like this:

Wouldn’t it be nice to have a button on the editor to do this for you? I agree. But alas, haven’t figured out that part yet. Once I do, I’ll come back and update the post so you’ll know what I know. In the meantime, I’d love to hear your thoughts, suggestions or even a way to add that button, comment below!

Thanks to Matt Alexander for the regular expression!


  1. Shfifty Five March 31, 2016

    Why do you use ‘custom_shortcodes_filter_node_embed_prepare’ for the ‘prepare callback’ value instead of ‘custom_shortcodes_filter_custom_shortcodes_prepare’?

  2. Chris Devriese July 1, 2015

    works great, nice and easy tutorial. great stuff

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

icon-search icon-link