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 this post by Ivan Soto that shows how to use the Custom Filter module 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!

Load JS & CSS Files on Specific Pages in Drupal 7

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.

Loading a CSS or JS file for a particular page in Drupal is a cinch with hooks. Here’s a few of the ways you can load JS & CSS on specific pages. Before you get started, I’d suggest taking a look at Drupal’s drupal_add_js and drupal_add_css. Regardless how you go about doing it, you’ll need to be somewhat familiar with these functions.


Using a Module

Here’s one of the simplest methods I found to load certain JS and CSS files on specific pages. It uses a custom module and Drupal’s request_uri to define when scripts should get loaded.

function modulename_init() {
  if (request_url() == 'your-url-path') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Using a Template Preprocess

You can also use Drupal’s preprocess functions to add JS and CSS to specific pages:

In your template.php:

template_preprocess_node

function yourtheme_preprocess_node(&$vars) {
  // Add JS & CSS by node type
  if( $vars['type'] == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS to the front page
  if ($vars['is_front']) {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
  
  // Add JS & CSS by node ID
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'your-node-id') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_page

function yourtheme_preprocess_page(&$vars) {
  // Add JS & CSS by node type
  if (isset($vars['node']) && $vars['node']->type == 'your-node-type') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

template_preprocess_views_view

function template_preprocess_views_view(&$vars) {
  // Get the current view info
  $view = $vars['view'];

  // Add JS/CSS based on view name
  if ($view->name == 'view_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }

  // Add JS/CSS based on current view display
  if ($view->current_display == 'current_display_name') {
    drupal_add_js( /* parameters */ );
    drupal_add_css( /* parameters */ );
  }
}

Not comfortable diving into code?

Here’s a couple of Drupal projects that allow you to inject CSS and JS into your pages:

And of course, you can use a combination of the above to add your JS and CSS files to a page. If you do it a different way or know a better Drupal way, please comment below and let me know!

Remove ‘type’ attribute in Drupal 7 – Say goodbye style, script & link!

Here’s a quick tip to remove the type attribute in Drupal 7 to make your site more HTML5 code compliant. This along with other HTML5 features allows for less code on the front-end… and who doesn’t like less code?!

No longer do you need to include this attribute in your script, style and link tags. As an added bonus, this Drupal hook will also remove CDATA comments. They only existed to satisfy the XHTML validator and it too has gone away with the release of HTML5.

Continue reading “Remove ‘type’ attribute in Drupal 7 – Say goodbye style, script & link!”

Drupal Behaviors: A Quick Introduction & How-to

I’m fairly new to Drupal myself and came across something called Drupal Behaviors when I was working over at BioWare Austin. A fellow Drupal developer whom was part of the team, Ivan Fuyivara, gave a presentation on what they were and how to use them. Being a complete greenhorn at Drupal then, I was a little foggy on the concept and didn’t really understand. Now with a year of Drupal dev under my belt, a better understanding on how to do things the ‘Drupal way’, and an opportunity to work on a re-theme project at Stratfor Global Intelligence, I had the opportunity to put this feature into practice.

Here’s a quick introduction on what Drupal Behaviors are and how to use them. Feel free to critique or tell me I’m completely wrong here… in no way am I claiming to be a Drupal expert. You can also read more (though not too much info) on Drupal.org.

Continue reading “Drupal Behaviors: A Quick Introduction & How-to”

Introduction to Drupal Preprocess & Process Functions

[dropcap type=”v2″]I[/dropcap]n this post, I’m going to give you an introduction to Drupal’s powerful preprocess and process functions. If you’re not already familiar with these functions, I like to think of them as both a front-enders nightmare and best friend. A nightmare only because it’s Drupal and with everything Drupal, has a steep learning curve. A best friend because, it provides the front-ender more control over the output of rendered code allowing for more efficient, clean, and crisp markup. It does need some basic PHP knowledge, but hopefully after reading this post everything will make sense.

Continue reading “Introduction to Drupal Preprocess & Process Functions”