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?

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.info
    ——- custom_shortcodes.module

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

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!

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

2 thoughts on “How to Add Custom Shortcodes in Drupal 7”

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

Leave a Reply

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